 |
|
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Video - HTMLVideoElement |
Como acessar sua webcam, retornar o MediaStream retornado e usá-lo na propriedade srcObject do elemento video do HTML5Quantidade de visualizações: 1984 vezes |
|
Nesta dica vou mostrar como é possível acessar sua webcam (câmera) usando o método getUserMedia() do objeto mediaDevices. Se o usuário concordar em permitir o acesso, nós vamos obter o objeto MediaStream retornado e vamos usá-lo para exibir a imagem da câmera em um elemento video. O código ficará mais fácil de ser entendido se você ler as outras dicas na seção dedicada ao HTML5. Veja o código completo:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Acessando sua webcam</title>
</head>
<body>
<video id="video" autoplay="true">
Seu browser não dá suporte ao elemento video do HTML5.
</video>
<script type="text/javascript">
async function exibirWebCam(){
// vamos obter uma referência ao elemento video
var video = document.getElementById("video");
// vamos obter o stream da webcam
var stream = null;
try{
stream = await navigator.mediaDevices.getUserMedia({video: true});
// atribui o MediaStream à propriedade srcObject do HTMLMediaElement
video.srcObject = stream;
}
catch(erro){
// o usuário não autorizou ou a webcam não está disponível
window.alert("Houve um erro: " + erro);
}
}
// o browser suporta o MediaDevices?
if(navigator.mediaDevices){
exibirWebCam();
}
else{
window.alert("O navegador não suporta o MediaDevices");
}
</script>
</body>
</html>
Veja que aqui nós não nos preocupamos com as dimensões do vídeo. Em outras dicas dessa seção você aprenderá a fazer isso sem muitas dificuldades. |
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
|
Delphi - Como obter o número do registro atual em um TClientDataSet do Delphi usando a propriedade RecNo |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
