Utilisation de l'API de capture de médias

Cet article explore l'API Media Capture and Streams (GetUserMedia), permettant aux pages Web d'accéder à la webcam et au microphone sans plugins. Soutenu par des navigateurs majeurs, notamment Chrome, Opera, Firefox et Edge.

L'API propose une capture vidéo, audio et image; contrôler les paramètres de la caméra (résolution, fréquence d'images, concentration); Support multi-caméras; et l'intégration avec d'autres API. Les applications vont du chat vidéo à la création de contenu des médias sociaux. L'autorisation de l'utilisateur est requise et la disponibilité des fonctionnalités varie selon les appareils et les navigateurs.

Fonctionnalités et fonctionnalités clés:

La méthode getUserMedia(), au centre de l'API, utilise MediaStreamConstraints pour définir les préférences de capture (FaceingMode, volume, résolution). enumerateDevices() aide à sélectionner des appareils spécifiques via leur deviceId. Les appels réussis renvoient un objet MediaStream.

Compatibilité du navigateur:

L'API bénéficie d'un large soutien, datant de Chrome 21, Opera 18 et Firefox 17, avec un ajout récent à Edge. Modernizr simplifie les vérifications de compatibilité du navigateur. Sans modernizr, des vérifications manuelles sont nécessaires pour gérer les incohérences du navigateur.

if (Modernizr.getusermedia) {
  var getUM = Modernizr.prefixed('getUserMedia', navigator);
  getUM({video: true}, function( //...
  //...
}

Alternativement, sans modernizr:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

if (!navigator.getUserMedia) {
  console.log('Unsupported browser.');
}

Playage vidéo:

Le HTML comprend une balise <video></video> (définie sur autoplay et muted) pour afficher le flux capturé. JavaScript définit dynamiquement le srcObject (ou src en tant que repli) de l'élément vidéo.

<video id="videoTag" src="" autoplay muted class="view--video__video"></video>

Accès et autorisation de la caméra:

L'API priorise la sécurité des utilisateurs. Lors du lancement, l'application demande l'autorisation d'utiliser la webcam (ou webcam et microphone, si spécifié). getUserMedia() accepte un objet spécifiant les exigences d'accès aux médias ({video: true} pour la webcam, {video: true, audio: true} pour les deux).

Support multiple webcam:

MediaDevices.enumerateDevices() Récupère des informations sur les périphériques d'entrée / sortie des supports disponibles (microphones, caméras, haut-parleurs). Il renvoie une promesse résolvant à un tableau d'objets de périphérique, chacune avec des propriétés comme kind, deviceId et label. Cette fonctionnalité est toujours expérimentale.

Réglage de la source vidéo:

La fonction initializeVideoStream() définit la source de la balise vidéo sur la MediaStream. Il utilise srcObject s'il est pris en charge, retombant à URL.createObjectURL() pour les navigateurs plus âgés.

var initializeVideoStream = function(stream) {
    // ... (code to set video source) ...
};

Filtres CSS:

L'application applique des filtres CSS en temps réel à la vidéo et aux images. Une fonction JavaScript passe à travers des filtres prédéfinis (niveaux de gris, sépia, flou, etc.), ajoutant des classes CSS correspondantes à l'élément vidéo.

if (Modernizr.getusermedia) {
  var getUM = Modernizr.prefixed('getUserMedia', navigator);
  getUM({video: true}, function( //...
  //...
}

Économie d'image:

navigator.msSaveBlob (IE10) ou une repli en utilisant toDataURL et un élément <a></a> enregistre des images capturées.

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

if (!navigator.getUserMedia) {
  console.log('Unsupported browser.');
}

Développement supplémentaire:

Les possibilités futures incluent l'intégration WebGL pour le filtrage avancé et les environnements interactifs et l'intégration de l'API audio Web pour la manipulation audio. La prise en charge du navigateur mobile est également en pleine expansion.

(le reste de l'entrée d'origine, y compris la FAQ et les ressources d'apprentissage Microsoft, est omise pour la concision, car elle est largement descriptive et non directement liée à la fonctionnalité de base de l'API de capture des médias comme démontré dans le code Extraits.)

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!