2.2, la capture audio et vidéo (a)

Chapitre Introduction: Cette section se rendre compte de la collection de la caméra et le microphone au flux de données et affichées. manière de lecture recommandée: compréhension + fonctionnement pratique.

　 API utilisée dans cette section - « navigator.mediaDevices.getUserMedia (contraintes) », où « contraintes » sont les paramètres, la méthode renvoie également une promesse. Pour pratiquer cette démo, j'ai créé un nouveau demo2.2.html, le code suivant pour atteindre.

<! - demo2.2.html -> 
<html> 
    <head> 
        <meta charset = "UTF-8"> 
        <title> demo 2.2音视频采集</ title> 
    </ head> 
    <body> 
        <video autoplay playsinline id = "myvideo"> </ video> 
    </ body> 
　　<script src = » https://webrtc.github.io/adapter/adapter-latest.js "> </ script> 
    <script src =" ./ js / demo2.2.js "> </ script> 

</ html>

Dans le code, nous ajoutons une étiquette de balise body vidéo, id est « myvideo », pour l'affichage acquis par la caméra dans le flux vidéo en temps réel. Js correspondant code logique dans les demo2.2.js. En js, tout d'abord, le jugement de la facilité d'utilisation font des objets, comme suit.

'use strict' 
laisser localVideo = document.getElementById ( "myvideo" );
si (! navigator.mediaDevices || navigator.mediaDevices.getUserMedia) 
{ 
    lancer une  nouvelle erreur ( "getUserMedia est pas pris en charge" ); 
}

Avant webrtc1.0 hors spécifications, différents éditeurs de navigateurs ont commencé à réaliser leur API WebRTC, les différents navigateurs API pourrait n'est pas le même nom, a pris la parole getUserMedia, il y a trois noms possibles: getUserMedia, webkitGetUserMedia, mozGetUserMedia . Pour les développeurs concernés doivent tenir compte de ces cas. Ainsi, le code peut devenir.

const getUserMedia = navigator.mediaDevices.getUserMedia | navigator.mediaDevices.webkitGetUserMedia | navigator.mediaDevices.mozGetUserMedia

Donc , il apportera les inconvénients pour les développeurs, afin que Google maintient une adaptation bibliothèque --adapter.js. Adresse: https://webrtc.github.io/adapter/adapter-latest.js (la dernière version de l'adaptateur), les dernières modifications de code à tout moment « adaptateur latest.js », donc dans le développement réel du projet, la meilleure serrure une version, la version au format: https://webrtc.github.io/adapter/adapter-NNNjs , par exemple https://webrtc.github.io/adapter/adapter-1.0.2.js .

　　Ensuite, écrire pour obtenir le flux fonction de rappel réussie, le code est suit comme.

le laisser localVideoElement = document.getElementById ( "myVideo"); // lecture élément vidéo

// Obtenez le succès du flux média 
fonction getLocalMediaStreamSuccess (à mediaStream) {

　　localVideoElement .srcObject = // Affectation directe à l' objet au flux de médias à mediaStream 
}

// Obtenir les médias locaux Échec du rappel ruisseaux

fonction getLocalMediaStreamException (erreur) {

　console.log ( 'erreur navigator.getUserMedia:', erreurs);

}

Puis commencez à appeler getUserMedia, le code suivant.

// audio et la configuration de capture vidéo 
const mediaStreamConstraints = { 
    Vidéo: true , // capture vidéo 
    audio: true , // capture audio 
}; 
. navigator.mediaDevices.getUserMedia (mediaStreamConstraints) .alors (getLocalMediaStreamSuccess) Les prises (gotLocalMediaStreamError)

Le code complet est le suivant:

// Demo2.2.js 
'use strict' de 
la laisser localVideoElement = document.getElementById ( "myVideo" );
 SI (! Navigator.mediaDevices || Navigator.mediaDevices.getUserMedia) {
     le jet  nouvelle nouvelle erreur ( "La route de getUserMedia n'est pas pris en charge" ) ; 
} 

// Obtenez le rappel réussie flux médias locaux 
fonction getLocalMediaStreamSuccess (à mediaStream) { 
    localVideoElement.srcObject = à mediaStream; 
} 

// Obtenez le flux échoué médias locaux rappel 
fonction getLocalMediaStreamException (erreur) { 
    le console.log ( 'erreur navigator.getUserMedia:' , erreur); 
} 

// configuration collection audio et vidéo
const mediaStreamConstraints = { 
    vidéo: vrai , 
    audio: vrai , 
}; 
navigator.mediaDevices.getUserMedia (mediaStreamConstraints) 
    .puis (getLocalMediaStreamSuccess). catch (gotLocalMediaStreamError)

2.2, la capture audio et vidéo (a)

Je suppose que tu aimes