Diffusez votre webcam vers un navigateur en JavaScript

Opera 12: Un pionnier de la prise en charge de l'API de flux multimédia de W3C

La version

Opera Software de la version 12 a marqué une étape importante, ce qui en fait le premier navigateur majeur à prendre en charge l'API de flux multimédia du W3C (également connu sous le nom d'API GetUserMedia). Cette API permet le streaming de la caméra et des entrées de microphone directement dans une fenêtre de navigateur, généralement utilisée comme l'attribut src d'un élément <video></video>. Compte tenu du projet de statut de l'API et de l'évolution de la nature, cet article fournit un aperçu fondamental. Nous allons développer cela à mesure que l'API mûrit et gagne un soutien plus large.

Vérification du support de l'API

Actuellement, Opera reste le seul navigateur avec la prise en charge de l'API Stream. Par conséquent, la vérification de la disponibilité des API avant la mise en œuvre est cruciale. La fonction suivante confirme la prise en charge en examinant la méthode navigator de l'objet getUserMedia():

function isStreamSupported() {
  return !!navigator.getUserMedia;
}

en utilisant la méthode getUserMedia()

La méthode navigator.getUserMedia() donne accès à l'API Stream. Cependant, une autorisation explicite de l'utilisateur est requise. En appelant getUserMedia(), l'opéra affiche une boîte de dialogue de consentement.

La syntaxe getUserMedia() est la suivante: il accepte deux arguments obligatoires et un tiers facultatif. L'objet "Contraintes" spécifie les flux de supports demandés (vidéo et / ou audio). successCallback est exécuté sur un accès réussi, recevant l'objet de flux multimédia. errorCallback (Facultatif) gère les échecs (par exemple, le déni de l'utilisateur).

navigator.getUserMedia(constraints, successCallback[, errorCallback]);

intégrer avec <video> éléments

Cet exemple démontre l'entrée de la caméra en streaming dans un élément HTML <video>, y compris les commandes de lecture, de pause et d'arrêt. La variable constraints demande à la fois audio et vidéo. (Une version en direct, si disponible sur Opera, serait liée ici.)

<title>getUserMedia Example</title>
<meta charset="UTF-8">
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="stop">Stop</button>
<br><br>
<video id="camera"></video>

<🎜>

Questions fréquemment posées (FAQ)

Cette section aborde les questions courantes concernant le streaming webcam en JavaScript, couvrant la sécurité, le dépannage, le streaming multi-navigateur, l'ajustement de la résolution, la réduction des retards, l'enregistrement, la gestion des erreurs, l'intégration audio / vidéo, l'optimisation des performances et l'application filtrante. (Les réponses détaillées du texte d'origine seraient incluses ici).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!