Transmita vídeos de sua webcam

event 30 de agosto de 2018 às 11:54 pm

O que você vai apreender

Nesse passo você descobrirá como:

  • Obter o fluxo de vídeo de sua webcam.
  • Manipular a reprodução do fluxo.
  • Usar CSS e SVG para manipular o vídeo.

Uma versão completa desse passo está na pasta step-01.

Uma pitada de HTML…

Adicionar um elemento  video e um elemento script  na  index.html em seu diretório  work :

<!DOCTYPE html>
<html>
<head>
  <title>Realtime communication with WebRTC</title>
  <link rel="stylesheet" href="css/main.css" />
</head>
<body>
    <h1>Realtime communication with WebRTC</h1>
    <video autoplay playsinline></video>
    <script src="js/main.js"></script>
</body>
</html>

… e  uma pitada de JavaScript

Adicionar o seguinte código ao main.js em sua pasta js:

'use strict';

// On this codelab, you will be streaming only video (video: true).
const mediaStreamConstraints = {
  video: true,
};

// Video element where stream will be placed.
const localVideo = document.querySelector('video');

// Local stream that will be reproduced on the video.
let localStream;

// Handles success by adding the MediaStream to the video element.
function gotLocalMediaStream(mediaStream) {
  localStream = mediaStream;
  localVideo.srcObject = mediaStream;
}

// Handles error by logging a message to the console with the error message.
function handleLocalMediaStreamError(error) {
  console.log('navigator.getUserMedia error: ', error);
}

// Initializes media stream.
navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
  .then(gotLocalMediaStream).catch(handleLocalMediaStreamError);

Todos os exemplos JavaScript aqui usam 'use strict'; para evitar pegadinhas de codificação comuns. Saiba mais sobre o que isso significa em ECMAScript 5 Strict Mode, JSON, and More.

Experimente

Abra a index.html em seu navegador e você deve ver algo assim ( apresentando a visão de sua webcam, é claro!):

Como funciona

Após a chamada de getUserMedia(), o navegador solicita a permissão do usuário para acessar sua câmera ( Se está for a primeira vez que o acesso a câmera foi solicitado para origem atual). Se for bem sucedido, uma MediaStream é retornado, que pode ser usado por um elemento de média por meio do atributo srcObject:

navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
  .then(gotLocalMediaStream).catch(handleLocalMediaStreamError);


}
function gotLocalMediaStream(mediaStream) {
  localVideo.srcObject = mediaStream;
}

O argumento constraints permite você especificar qual média obter. Nesse exemplo, somente vídeo, já que o áudio está desabilitado por padrão:

const mediaStreamConstraints = {
  video: true,
};

Você pode usar o constraints  para requisitos adicionais tais como resolução de vídeo:

const hdConstraints = {
  video: {
    width: {
      min: 1280
    },
    height: {
      min: 720
    }
  }
}

A lista de especificação do MediaTrackConstraints contém todos os tipos de restrição, Embora nem todas as opções sejam suportadas em todos os navegadores. Se a requisição de resolução não é suportada pela câmera atualmente selecionada, getUserMedia() será rejeitado com um OverconstrainedError e o usuário não será solicitado a dar permissão para acessar sua câmera.

Você pode ver uma demonstração mostrando como usar restrições para solicitar diferentes resoluções aqui, e uma demonstração de uso de restrições para escolher a câmera e o microfone aqui.

Se getUserMedia() for concluído, a transmissão de vídeo da webcam será definida como a origem do elemento de vídeo:

function gotLocalMediaStream(mediaStream) {
  localVideo.srcObject = mediaStream;
}

Pontos Bônus

  • O objeto localStream passado para getUserMedia() está no escopo global, então você pode inspeciona-lo pelo console do navegador: abra o console, digite localStream e aperte enter.( Para ver o console no Chorme, aperte Ctrl-Shift-J ou Command-Option-J se você estiver usando um Mac).
  • O que o localStream.getVideoTracks() retorna?
  • Tente chamar localStream.getVideoTracks()[0].stop().
  • Olhe para o objeto de restrições: o que acontece quando você muda para: {audio: true, video: true}?
  • Qual tamanho é o elemento de vídeo? Como você pode obter o tamanho natural do vídeo do JavaScript, em vez do tamanho de exibição? Use o Chrome Dev Tools para verificar.
  • Tente adicionar filtros CSS ao elemento de vídeo. Por exemplo:
video {
  filter: blur(4px) invert(1) opacity(0.5);
}
  • Tente adicionar filtros SVG. Por exemplo:
video {
   filter:hue-rotate(180deg) saturate(200%);
 }

 

O que você aprendeu

Nessa etapa você aprendeu como:

  • Obter o vídeo de sua webcam.
  • Definir restrições de mídia.
  • Mexer com o elemento de vídeo.

Uma versão completa dessa etapa está na pasta step-01.

 

Dicas

  • Não esqueça do atributo autoplay no elemento video. Sem isso, você apenas verá um único quadro!
  • Há muito mais opções para as restrições getUserMedia(). Dê uma olhada na demonstração em webrtc.github.io/samples/src/content/peerconnection/constraints. Como você verá, há muitos exemplos interessantes de WebRTC nesse site.

 

Melhor pratica

  • certifique-se de que seu elemento de vídeo não está transbordando o contêiner. Nós adicionamos  width e max-width para definir um tamanho preferido e um tamanho máximo para o vídeo. O navegador irá calcular a altura automaticamente:
video {
max-width: 100%;
width: 320px;
}

 

Próximo

Você recebe o vídeo, mas como você faz a transmissão? Descubra na próxima etapa!

 

Referência:

Conteúdo traduzido do site : https://codelabs.developers.google.com/codelabs/webrtc-web/#3

Deixe uma resposta

// Posts Recentes

Formulário Respondeu!