2.2, captura de audio y vídeo (a)

Capítulo Introducción: En esta sección se da cuenta de la colección de la cámara y micrófono para el flujo de datos y se muestra. Recomendada manera lectura: comprensión + funcionamiento práctico.

　 API usa en esta sección - "navigator.mediaDevices.getUserMedia (restricciones)", donde "limitaciones" son los parámetros, el método también devuelve una promesa. Para practicar esta demo, he creado una nueva demo2.2.html, el siguiente código de lograr.

<! - demo2.2.html -> 
<html> 
    <head> 
        <meta charset = "UTF-8"> 
        <title> Demo 2.2音视频采集</ title> 
    </ head> 
    <body> 
        <video de reproducción automática playsinline id = "myvideo"> </ video> 
    </ body> 
　　<script src =" https://webrtc.github.io/adapter/adapter-latest.js "> </ script> 
    <script src =" ./ js / demo2.2.js "> </ script> 

</ html>

En el código, se añade una etiqueta de vídeo cuerpo de la etiqueta, id es "myvideo", para la visualización adquirido a través de la cámara de flujo de vídeo en tiempo real. Js código de la lógica correspondiente en el demo2.2.js. En js, en primer lugar, la sentencia usabilidad hacer objetos, de la siguiente manera.

'use strict' 
dejar que localVideo = document.getElementById ( "myvideo" );
si (! navigator.mediaDevices || navigator.mediaDevices.getUserMedia) 
{ 
    lanzar  nuevos error ( "getUserMedia no es compatible" ); 
}

Antes webrtc1.0 fuera de especificación, varios fabricantes de navegadores han empezado a darse cuenta de su API de WebRTC, diferentes navegadores fuerza API no es el mismo nombre, tomaron hablando getUserMedia, hay tres nombres posibles: getUserMedia, webkitGetUserMedia, mozGetUserMedia . Para los desarrolladores interesados que tener en cuenta estos casos. Así, el código puede llegar a serlo.

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

Por lo que traerá molestias a los desarrolladores, por lo que Google mantiene una biblioteca de adaptación --adapter.js. Dirección: https://webrtc.github.io/adapter/adapter-latest.js (la última versión del adaptador), los últimos cambios de código en cualquier momento para " adaptador latest.js " en, por lo que en el desarrollo real del proyecto, la mejor bloquear una versión, la versión en el formato: https://webrtc.github.io/adapter/adapter-NNNjs , por ejemplo https://webrtc.github.io/adapter/adapter-1.0.2.js .

　　A continuación, escribir para obtener la función de devolución de flujo de éxito, el código es el siguiente.

dejar que el localVideoElement = document.getElementById ( "myVideo"); // elemento de vídeo de lectura

// Obtener el éxito del flujo de medios 
función getLocalMediaStreamSuccess (a mediaStream) {

　　localVideoElement .srcObject = // asignación directa a oponerse al flujo de medios; a mediaStream 
}

devolución de llamada // obtener los medios de comunicación locales fallaron corrientes

función getLocalMediaStreamException (error) {

　console.log ( 'error navigator.getUserMedia:', error);

}

A continuación, empezar a llamar getUserMedia, el siguiente código.

// configuración de audio y captura de vídeo 
mediaStreamConstraints const = { 
    vídeo: true , // captura de vídeo 
    de audio: true , // captura de audio 
}; 
. navigator.mediaDevices.getUserMedia (mediaStreamConstraints) .then (getLocalMediaStreamSuccess) La captura (gotLocalMediaStreamError)

El código completo es el siguiente:

Demo2.2.js // 
'uso estricto' 
el dejar que localVideoElement = document.getElementById ( "myVideo" );
 SI (! Navigator.mediaDevices || Navigator.mediaDevices.getUserMedia) {
     de banda  nueva nueva de error ( "El camino a getUserMedia no es compatible" ) ; 
} 

// Obtener los medios de comunicación locales flujo de éxito de devolución de llamada 
función getLocalMediaStreamSuccess (a mediaStream) { 
    localVideoElement.srcObject = a mediaStream; 
} 

// Obtener los medios de comunicación locales flujo de devolución de llamada fallida 
función getLocalMediaStreamException (error) { 
    el console.log ( 'error navigator.getUserMedia:' , error); 
} 

// configuración de la colección de audio y vídeo
mediaStreamConstraints const = { 
    vídeo: verdad , 
    de audio: verdad , 
}; 
navigator.mediaDevices.getUserMedia (mediaStreamConstraints) 
    .then (getLocalMediaStreamSuccess). captura (gotLocalMediaStreamError)

2.2, captura de audio y vídeo (a)

Supongo que te gusta