Rodrigo Alves Guerra » Transmita vídeos de sua webcam
Transmita vídeos de sua webcam
event 30 de agosto de 2018 às 11:54 pm
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 :
… e uma pitada de JavaScript
Adicionar o seguinte código ao main.js em sua pasta js:
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.
Abra a index.html em seu navegador e você deve ver algo assim ( apresentando a visão de sua webcam, é claro!):
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:
O argumento constraints permite você especificar qual média obter. Nesse exemplo, somente vídeo, já que o áudio está desabilitado por padrão:
Você pode usar o constraints para requisitos adicionais tais como resolução de vídeo:
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:
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:
Tente adicionar filtros SVG. Por exemplo:
filter:hue-rotate(180deg) saturate(200%);
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.
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.
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: