Galera... Estou tentando tirar uma foto com uma webcam... sou relativamente novo em Javascript e estou levando um coro!
Segue meu código:
//inicializa um objeto stream
var tmpStream;
function setMedia(video, s){
tmpStream=s;
try{
video.srcObject = s;
}catch(error){
video.src = URL.createObjectURL(s);
}
}
//função para iniciar a camera
function startCamera(){
navigator.mediaDevices.getUserMedia({
video:{facingMode:"environment"}
})
.then((stream) => {
setMedia(document.getElementById("video"),stream) //o mesmo que document.getElementById('video')=stream
})
}
//função para parar a camera
function stopCamera(){
if(!tmpStream) return;
tmpStream.getVideoTracks().forEach(track => track.stop())
}
//ligar a camer automaticamente
window.addEventListener("DOMContentLoaded", startCamera)
//função para tirar foto
document.querySelector("#btnStart").addEventListener("click", event => {
const canvas = document.getElementById("pic")
const context = canvas.getContext("2d")
const video = document.getElementById("video")
//tamanho da foto mesmo tamanho do video
canvas.width = video.offsetWidth
canvas.height = video.offsetHeight
//desenha o video no canvas
context.drawImage(video, 0, 0, canvas.witdh, canvas.height)
//metodo do canvas para pegar um objeto Blob
canvas.toBlob(function(blob){
const url = URL.createObjectURL(blob)
stopCamera()
}, 'image/jpeg', 0.95)
//closeCamera()
})
<video src="" id="video" muted autoplay></video>
<canvas id="pic"></canvas>
<input type="button" id="btnStart" value="Tirar Foto">
Até o momento só consegui ligar a câmera e aparecer o 'LIVE'... não consegui fazer a foto aparecer no canvas... fica toda preta a imagem quando clico no botão para tirar a foto.