Comment accéder audio et vidéo lors du codage avec javascript

Comment avez-vous accès audio et vidéo lors du codage avec javascript? Avant de HTML5, la seule façon pour une page Web pour utiliser un appareil photo connecté à un ordinateur ou intégré dans un ordinateur est à travers l'utilisation de plugins, tels que Flash.

L'un des principaux objectifs de HTML5 est d'éliminer la nécessité pour les plugins, avec leurs mises à jour constantes et les questions de sécurité. Depuis HTML5 a été proposé, il ya eu plusieurs tentatives pour définir une norme pour l'utilisation de l'entrée à partir de caméras.

L'API la plus récente et pour permettre à la vidéo en direct et de la communication audio via les navigateurs Web est appelée WebRTC (Web Real Time Communications).

Au cœur de WebRTC est navigator.getUserMedia (), qui fait exactement ce que son nom implique: Il obtient des médias (audio et vidéo) de l'utilisateur (ainsi, à partir de l'appareil de l'utilisateur, en particulier).

getUserMedia est actuellement pris en charge dans Chrome, Opera, et Firefox. Si vous voulez l'utiliser dans d'autres navigateurs, tels que Safari ou Internet Explorer, vous aurez besoin d'utiliser un outil appelé un polyfill.

Le premier paramètre de getUserMedia est un objet avec des propriétés indiquant quel type de média que vous voulez accéder. Par exemple, si vous souhaitez accéder à la fois vidéo et audio, vous devez utiliser l'objet suivant comme premier paramètre:

{vidéo: true, audio: true}

Les autres paramètres que getUserMedia prend sont un rappel de succès et un rappel d'erreur. Voici un exemple de l'utilisation de getUserMedia.

Examinez les lignes principales du code:

window.addEventListener ('DOMContentLoaded', function () {

Un écouteur d'événement qui attend jusqu'à ce que le DOM est chargé avant d'exécuter le reste du code est

var v = document.getElementById ('v') -

La ligne précédente crée une nouvelle variable, appelée v, pour contenir une référence à l'élément vidéo avec un id =“v”:

navigator.getUserMedia = (navigator.getUserMedia || || navigator.webkitGetUserMedia navigator.mozGetUserMedia || navigator.msGetUserMedia) -

getUserMedia est une technologie expérimentale toujours pas pleinement normalisé. Pour cette raison, les navigateurs web ont différentes implémentations de ce dont ils indiquent en utilisant préfixes fournisseurs. Cette déclaration définit la valeur de la norme navigateur.getUserMedia opposer à la version du fournisseur préfixé soutenu par navigateur de l'utilisateur courant. Donc, lorsque vous utilisez Firefox et appel navigator.getUserMedia, vous êtes réellement appeler navigator.mozGetUserMedia:

if (navigator.getUserMedia) {

qui vérifie pour voir si le navigateur de l'utilisateur prend en charge getUserMedia:

navigator.getUserMedia (

Appeler le getUserMedia méthode:

{vidéo: true, audio: false}

Le premier paramètre est un révélateur de l'objet dont les médias vous souhaitez accéder:

fonction (flux) {

Le succès rappel court si la demande de getUserMedia réussit. Il prend un seul argument:

var url = window.URL || window.webkitURL-v.src url =? url.createObjectURL (flux): rationaliser

Les deux lignes précédentes lisser les différences entre la façon dont les différents navigateurs gèrent l'objet de flux multimédia. La deuxième ligne propose notre copain, l'opérateur ternaire! Cette déclaration définit la src propriété de l'élément de vidéo sur soit url.createObjectUrl (flux) ou ruisseler, fonction de la méthode est supporté par le navigateur:

v.play () -

Enfin, la vidéo est lue. Si vos supports informatiques getUserMedia et vous avez un appareil photo, vous verrez la vidéo de vous-même (ou quelle que soit la caméra est pointée vers) à ce point:

fonction (erreur) {alert ('Quelque chose a mal tourné (code d'erreur.' + error.code + ')') - Retour-}

Le code précédent est un rappel d'erreur. Si le navigateur ne fonctionne getUserMedia (), mais l'utilisateur ne permet pas le navigateur pour accéder à la caméra, cette fonction sera exécuté et imprimer un message d'erreur spécifique:

else {alert ('Désolé, le navigateur que vous utilisez n ' getUserMedia de soutien ') - retour -} -

Le code précédent est le autre état. Si le navigateur de l'utilisateur ne fonctionne pas getUserMedia (), cette alerte sera affichée:

Si le navigateur de l'utilisateur prend en charge getUserMedia, l'utilisateur dispose d'un appareil photo, et ils permettent à l'application d'accéder à la caméra, l'application va afficher la vidéo en direct dans la fenêtre du navigateur.