WebRTC - APIs MediaStream

A API MediaStream foi projetada para acessar facilmente os fluxos de mídia de câmeras e microfones locais. O método getUserMedia () é a principal forma de acessar dispositivos de entrada locais.

A API tem alguns pontos-chave -

Um fluxo de mídia em tempo real é representado por um objeto de fluxo na forma de vídeo ou áudio
Ele fornece um nível de segurança por meio de permissões de usuário, perguntando ao usuário antes que um aplicativo da web possa começar a buscar um fluxo
A seleção de dispositivos de entrada é feita pela API MediaStream (por exemplo, quando há duas câmeras ou microfones conectados ao dispositivo)

Cada objeto MediaStream inclui vários objetos MediaStreamTrack. Eles representam vídeo e áudio de diferentes dispositivos de entrada.

Cada objeto MediaStreamTrack pode incluir vários canais (canais de áudio direito e esquerdo). Essas são as menores partes definidas pela API MediaStream.

Existem duas maneiras de gerar objetos MediaStream. Primeiro, podemos renderizar a saída em um elemento de vídeo ou áudio. Em segundo lugar, podemos enviar a saída para o objeto RTCPeerConnection, que então a envia para um par remoto.

Usando a API MediaStream

Vamos criar um aplicativo WebRTC simples. Ele mostrará um elemento de vídeo na tela, pedirá permissão ao usuário para usar a câmera e mostrará uma transmissão de vídeo ao vivo no navegador. Crie um arquivo index.html -

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

Em seguida, crie o arquivo client.js e adicione o seguinte;

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

Aqui criamos a função hasUserMedia () que verifica se WebRTC é compatível ou não. Em seguida, acessamos a função getUserMedia onde o segundo parâmetro é um retorno de chamada que aceita o fluxo proveniente do dispositivo do usuário. Em seguida, carregamos nosso stream no elemento de vídeo usando window.URL.createObjectURL, que cria uma URL que representa o objeto fornecido no parâmetro.

Agora atualize sua página, clique em Permitir e você verá seu rosto na tela.

Lembre-se de executar todos os seus scripts usando o servidor web. Já instalamos um no Tutorial do Ambiente WebRTC.

API MediaStream

Propriedades

MediaStream.active (read only) - Retorna verdadeiro se o MediaStream estiver ativo ou falso caso contrário.
MediaStream.ended (read only, deprecated)- Retorna verdadeiro se o evento finalizado foi disparado no objeto, significando que o fluxo foi completamente lido, ou falso se o final do fluxo não foi alcançado.
MediaStream.id (read only) - Um identificador exclusivo para o objeto.
MediaStream.label (read only, deprecated) - Um identificador exclusivo atribuído pelo agente do usuário.

Você pode ver a aparência das propriedades acima em meu navegador -

Manipuladores de eventos

MediaStream.onactive- Um manipulador para um evento ativo que é disparado quando um objeto MediaStream se torna ativo.
MediaStream.onaddtrack- Um manipulador para um evento addtrack que é disparado quando um novo objeto MediaStreamTrack é adicionado.
MediaStream.onended (deprecated)- Um manipulador para um evento encerrado que é disparado quando o streaming está encerrando.
MediaStream.oninactive- Um manipulador para um evento inativo que é disparado quando um objeto MediaStream se torna inativo.
MediaStream.onremovetrack- Um manipulador para um evento removetrack que é disparado quando um objeto MediaStreamTrack é removido dele.

Métodos

MediaStream.addTrack()- Adiciona o objeto MediaStreamTrack fornecido como argumento para o MediaStream. Se a faixa já foi adicionada, nada acontece.
MediaStream.clone() - Retorna um clone do objeto MediaStream com um novo ID.
MediaStream.getAudioTracks()- Retorna uma lista dos objetos de áudio MediaStreamTrack do objeto MediaStream .
MediaStream.getTrackById()- Retorna a faixa por ID. Se o argumento estiver vazio ou o ID não for encontrado, ele retornará nulo. Se várias faixas tiverem o mesmo ID, ele retornará a primeira.
MediaStream.getTracks()- Retorna uma lista de todos MediaStreamTrack objetos do MediaStream objeto.
MediaStream.getVideoTracks()- Retorna uma lista dos objetos de vídeo MediaStreamTrack do objeto MediaStream .
MediaStream.removeTrack()- Remove o objeto MediaStreamTrack fornecido como argumento do MediaStream. Se a faixa já foi removida, nada acontece.

Para testar as APIs acima, altere o index.html da seguinte maneira -

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

Adicionamos alguns botões para experimentar várias APIs do MediaStream. Em seguida, devemos adicionar manipuladores de eventos para nosso botão recém-criado. Modifique o arquivo client.js desta forma -

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

Agora atualize sua página. Clique no botão getAudioTracks () e, em seguida, clique no botão removeTrack () - áudio . A trilha de áudio agora deve ser removida. Em seguida, faça o mesmo para a trilha de vídeo.

Se você clicar no botão getTracks () , deverá ver todos os MediaStreamTracks (todas as entradas de vídeo e áudio conectadas). Em seguida, clique em getTrackById () para obter o áudio MediaStreamTrack.

Resumo

Neste capítulo, criamos um aplicativo WebRTC simples usando a API MediaStream. Agora você deve ter uma visão geral clara das várias APIs do MediaStream que fazem o WebRTC funcionar.

↰ Previous page Next page ↱