Galera... Estou tentando tirar uma foto com uma webcam... sou relativamente novo em Javascript e estou levando um coro!
Segue meu código:
//função para iniciar a camera
function startCamera(){
navigator.mediaDevices.getUserMedia({
video:{facingMode:'environment'},
audio:true
})
.then((stream) => {
document.getElementById('video').srcObject=stream
})
}
//função para parar a camera
function stopCamera(){
document.getElementById('video')
.srcObject
.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.