WebRTC - API MediaStream

L'API MediaStream è stata progettata per accedere facilmente ai flussi multimediali da telecamere e microfoni locali. Il metodo getUserMedia () è il modo principale per accedere ai dispositivi di input locali.

L'API ha alcuni punti chiave:

Un flusso multimediale in tempo reale è rappresentato da un oggetto flusso sotto forma di video o audio
Fornisce un livello di sicurezza tramite le autorizzazioni utente che chiedono all'utente prima che un'applicazione web possa iniziare a recuperare un flusso
La selezione dei dispositivi di input è gestita dall'API MediaStream (ad esempio, quando ci sono due telecamere o microfoni collegati al dispositivo)

Ogni oggetto MediaStream include diversi oggetti MediaStreamTrack. Rappresentano video e audio da diversi dispositivi di input.

Ogni oggetto MediaStreamTrack può includere diversi canali (canali audio destro e sinistro). Queste sono le parti più piccole definite dall'API MediaStream.

Esistono due modi per generare oggetti MediaStream. Innanzitutto, possiamo rendere l'output in un elemento video o audio. In secondo luogo, possiamo inviare l'output all'oggetto RTCPeerConnection, che quindi lo invia a un peer remoto.

Utilizzo dell'API MediaStream

Creiamo una semplice applicazione WebRTC. Mostrerà un elemento video sullo schermo, chiederà all'utente il permesso di utilizzare la telecamera e mostrerà un flusso video in diretta nel browser. Crea un file index.html -

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

Quindi creare il file client.js e aggiungere quanto segue;

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"); 
}

Qui creiamo la funzione hasUserMedia () che controlla se WebRTC è supportato o meno. Quindi accediamo alla funzione getUserMedia dove il secondo parametro è un callback che accetta il flusso proveniente dal dispositivo dell'utente. Quindi carichiamo il nostro flusso nell'elemento video usando window.URL.createObjectURL che crea un URL che rappresenta l'oggetto dato nel parametro.

Ora aggiorna la pagina, fai clic su Consenti e dovresti vedere il tuo viso sullo schermo.

Ricordati di eseguire tutti i tuoi script utilizzando il server web. Ne abbiamo già installato uno nel Tutorial sull'ambiente WebRTC.

API MediaStream

Proprietà

MediaStream.active (read only) - Restituisce true se MediaStream è attivo o false in caso contrario.
MediaStream.ended (read only, deprecated)- Restituisce true se l' evento terminato è stato attivato sull'oggetto, il che significa che lo stream è stato letto completamente o false se la fine dello stream non è stata raggiunta.
MediaStream.id (read only) - Un identificatore univoco per l'oggetto.
MediaStream.label (read only, deprecated) - Un identificatore univoco assegnato dal programma utente.

Puoi vedere come appaiono le proprietà di cui sopra nel mio browser:

Gestori di eventi

MediaStream.onactive- Un gestore per un evento attivo che viene generato quando un oggetto MediaStream diventa attivo.
MediaStream.onaddtrack- Un gestore per un evento addtrack che viene attivato quando viene aggiunto un nuovo oggetto MediaStreamTrack .
MediaStream.onended (deprecated)- Un gestore per un evento terminato che viene attivato quando lo streaming sta terminando.
MediaStream.oninactive- Un gestore per un evento inattivo che viene attivato quando un oggetto MediaStream diventa inattivo.
MediaStream.onremovetrack- Un gestore per un evento di rimozione che viene attivato quando un oggetto MediaStreamTrack viene rimosso da esso.

Metodi

MediaStream.addTrack()- Aggiunge l' oggetto MediaStreamTrack dato come argomento a MediaStream. Se la traccia è già stata aggiunta, non accade nulla.
MediaStream.clone() - Restituisce un clone dell'oggetto MediaStream con un nuovo ID.
MediaStream.getAudioTracks()- Restituisce un elenco degli oggetti MediaStreamTrack audio dall'oggetto MediaStream .
MediaStream.getTrackById()- Restituisce la traccia per ID. Se l'argomento è vuoto o l'ID non viene trovato, restituisce null. Se più tracce hanno lo stesso ID, restituisce il primo.
MediaStream.getTracks()- Restituisce un elenco di tutti MediaStreamTrack oggetti dal MediaStream oggetto.
MediaStream.getVideoTracks()- Restituisce un elenco degli oggetti MediaStreamTrack video dall'oggetto MediaStream .
MediaStream.removeTrack()- Rimuove l' oggetto MediaStreamTrack fornito come argomento da MediaStream. Se la traccia è già stata rimossa, non accade nulla.

Per testare le API di cui sopra, modificare il file index.html nel modo seguente:

<!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>

Abbiamo aggiunto alcuni pulsanti per provare diverse API MediaStream. Quindi dovremmo aggiungere gestori di eventi per il nostro pulsante appena creato. Modifica il file client.js in questo modo:

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]); 
});

Ora aggiorna la tua pagina. Fare clic sul pulsante getAudioTracks () , quindi fare clic sul pulsante removeTrack () - audio . La traccia audio dovrebbe ora essere rimossa. Quindi fai lo stesso per la traccia video.

Se fai clic sul pulsante getTracks () dovresti vedere tutti i MediaStreamTracks (tutti gli ingressi video e audio collegati). Quindi fare clic su getTrackById () per ottenere l'audio MediaStreamTrack.

Sommario

In questo capitolo, abbiamo creato una semplice applicazione WebRTC utilizzando l'API MediaStream. Ora dovresti avere una chiara panoramica delle varie API MediaStream che fanno funzionare WebRTC.

↰ Previous page Next page ↱