WebRTC: API de MediaStream

La API de MediaStream se diseñó para acceder fácilmente a los flujos de medios desde cámaras y micrófonos locales. El método getUserMedia () es la forma principal de acceder a los dispositivos de entrada locales.

La API tiene algunos puntos clave:

Un flujo de medios en tiempo real está representado por un objeto de flujo en forma de video o audio.
Proporciona un nivel de seguridad a través de permisos de usuario que le preguntan al usuario antes de que una aplicación web pueda comenzar a buscar una transmisión.
La selección de dispositivos de entrada es manejada por la API MediaStream (por ejemplo, cuando hay dos cámaras o micrófonos conectados al dispositivo)

Cada objeto MediaStream incluye varios objetos MediaStreamTrack. Representan video y audio de diferentes dispositivos de entrada.

Cada objeto MediaStreamTrack puede incluir varios canales (canales de audio derecho e izquierdo). Estas son las partes más pequeñas definidas por MediaStream API.

Hay dos formas de generar objetos MediaStream. Primero, podemos convertir la salida en un elemento de video o audio. En segundo lugar, podemos enviar la salida al objeto RTCPeerConnection, que luego la envía a un par remoto.

Usando la API de MediaStream

Creemos una aplicación WebRTC simple. Mostrará un elemento de video en la pantalla, le pedirá permiso al usuario para usar la cámara y mostrará una transmisión de video en vivo en el navegador. Crea un archivo index.html -

<!DOCTYPE html> 
<html lang = "en">
 
   <head> 
      <meta charset = "utf-8" /> 
   </head> 
	
   <body> 
      <video autoplay></video> 
      <script src = "client.js"></script> 
   </body>
	
</html>

Luego cree el archivo client.js y agregue lo siguiente;

function hasUserMedia() { 
   //check if the browser supports the WebRTC 
   return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || 
      navigator.mozGetUserMedia); 
} 

if (hasUserMedia()) { 
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
      || navigator.mozGetUserMedia; 
		
   //enabling video and audio channels 
   navigator.getUserMedia({ video: true, audio: true }, function (stream) { 
      var video = document.querySelector('video'); 
		
      //inserting our stream to the video tag     
      video.src = window.URL.createObjectURL(stream); 
   }, function (err) {}); 
} else { 
   alert("WebRTC is not supported"); 
}

Aquí creamos la función hasUserMedia () que verifica si WebRTC es compatible o no. Luego accedemos a la función getUserMedia donde el segundo parámetro es una devolución de llamada que acepta el flujo proveniente del dispositivo del usuario. Luego cargamos nuestra transmisión en el elemento de video usando window.URL.createObjectURL que crea una URL que representa el objeto dado en el parámetro.

Ahora actualice su página, haga clic en Permitir, y debería ver su cara en la pantalla.

Recuerde ejecutar todos sus scripts usando el servidor web. Ya hemos instalado uno en el Tutorial del entorno WebRTC.

API de MediaStream

Propiedades

MediaStream.active (read only) - Devuelve verdadero si MediaStream está activo o falso en caso contrario.
MediaStream.ended (read only, deprecated)- Devuelve verdadero si el evento finalizado se ha disparado en el objeto, lo que significa que la transmisión se ha leído por completo, o falso si no se ha alcanzado el final de la transmisión.
MediaStream.id (read only) - Un identificador único para el objeto.
MediaStream.label (read only, deprecated) - Un identificador único asignado por el agente de usuario.

Puede ver cómo se ven las propiedades anteriores en mi navegador:

Controladores de eventos

MediaStream.onactive- Un controlador para un evento activo que se activa cuando un objeto MediaStream se vuelve activo.
MediaStream.onaddtrack- Un controlador para un evento addtrack que se activa cuando se agrega un nuevo objeto MediaStreamTrack .
MediaStream.onended (deprecated)- Un controlador para un evento finalizado que se activa cuando finaliza la transmisión.
MediaStream.oninactive- Un controlador para un evento inactivo que se activa cuando un objeto MediaStream se vuelve inactivo.
MediaStream.onremovetrack: Un controlador para un evento removetrack que se activa cuando se elimina un objeto MediaStreamTrack .

Métodos

MediaStream.addTrack()- Agrega el objeto MediaStreamTrack dado como argumento al MediaStream. Si la pista ya se ha agregado, no pasa nada.
MediaStream.clone() - Devuelve un clon del objeto MediaStream con una nueva ID.
MediaStream.getAudioTracks()- Devuelve una lista de los objetos de audio MediaStreamTrack del objeto MediaStream .
MediaStream.getTrackById()- Devuelve la pista por ID. Si el argumento está vacío o no se encuentra el ID, devuelve nulo. Si varias pistas tienen el mismo ID, devuelve la primera.
MediaStream.getTracks()- Devuelve una lista de todos MediaStreamTrack objetos de la MediaStream objeto.
MediaStream.getVideoTracks()- Devuelve una lista de los objetos de vídeo MediaStreamTrack del objeto MediaStream .
MediaStream.removeTrack()- Elimina el objeto MediaStreamTrack proporcionado como argumento de MediaStream. Si la pista ya se ha eliminado, no pasa nada.

Para probar las API anteriores, cambie el index.html de la siguiente manera:

<!DOCTYPE html> 
<html lang = "en">
 
   <head> 
      <meta charset = "utf-8" /> 
   </head>
	
   <body> 
      <video autoplay></video> 
      <div><button id = "btnGetAudioTracks">getAudioTracks()
         </button></div> 
      <div><button id = "btnGetTrackById">getTrackById()
         </button></div> 
      <div><button id = "btnGetTracks">getTracks()</button></div> 
      <div><button id = "btnGetVideoTracks">getVideoTracks()
         </button></div> 
      <div><button id = "btnRemoveAudioTrack">removeTrack() - audio
         </button></div> 
      <div><button id = "btnRemoveVideoTrack">removeTrack() - video
         </button></div> 
      <script src = "client.js"></script> 
   </body> 
	
</html>

Agregamos algunos botones para probar varias API de MediaStream. Entonces deberíamos agregar controladores de eventos para nuestro botón recién creado. Modifique el archivo client.js de esta manera:

var stream;
  
function hasUserMedia() { 
   //check if the browser supports the WebRTC 
   return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || 
      navigator.mozGetUserMedia); 
} 
 
if (hasUserMedia()) {
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
      || navigator.mozGetUserMedia; 
		
   //enabling video and audio channels 
   navigator.getUserMedia({ video: true, audio: true }, function (s) { 
      stream = s; 
      var video = document.querySelector('video'); 
		
      //inserting our stream to the video tag     
      video.src = window.URL.createObjectURL(stream); 
   }, function (err) {}); 
	
} else { 
   alert("WebRTC is not supported"); 
}
  
btnGetAudioTracks.addEventListener("click", function(){ 
   console.log("getAudioTracks"); 
   console.log(stream.getAudioTracks()); 
});
  
btnGetTrackById.addEventListener("click", function(){ 
   console.log("getTrackById"); 
   console.log(stream.getTrackById(stream.getAudioTracks()[0].id)); 
});
  
btnGetTracks.addEventListener("click", function(){ 
   console.log("getTracks()"); 
   console.log(stream.getTracks()); 
});
 
btnGetVideoTracks.addEventListener("click", function(){ 
   console.log("getVideoTracks()"); 
   console.log(stream.getVideoTracks()); 
});

btnRemoveAudioTrack.addEventListener("click", function(){ 
   console.log("removeAudioTrack()"); 
   stream.removeTrack(stream.getAudioTracks()[0]); 
});
  
btnRemoveVideoTrack.addEventListener("click", function(){ 
   console.log("removeVideoTrack()"); 
   stream.removeTrack(stream.getVideoTracks()[0]); 
});

Ahora actualice su página. Haga clic en el botón getAudioTracks () , luego haga clic en el botón removeTrack () - audio . Ahora debería eliminarse la pista de audio. Luego haz lo mismo con la pista de video.

Si hace clic en el botón getTracks () , debería ver todas las MediaStreamTracks (todas las entradas de audio y video conectadas). Luego haga clic en getTrackById () para obtener el audio MediaStreamTrack.

Resumen

En este capítulo, creamos una aplicación WebRTC simple usando la API MediaStream. Ahora debería tener una descripción general clara de las diversas API de MediaStream que hacen que WebRTC funcione.

↰ Previous page Next page ↱