Tem um erro de digitação simples também, você escreveu witdh
:
context.drawImage(video, 0, 0, canvas.witdh, canvas.height)
Mas o correto é width
:
context.drawImage(video, 0, 0, canvas.width, canvas.height)
Nota: movi todos eventos para dentro de
DOMContentLoaded
, tanto ostartCamera
quanto o click do botão.
Exemplo:
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'},
audio:true
})
.then((stream) => {
setMedia(document.getElementById('video'), stream)
})
}
//função para parar a camera
function stopCamera(){
//Se não tiver stream definido ainda
if (!tmpStream) return;
tmpStream.getVideoTracks().forEach(track => track.stop())
}
//ligar ainicia cameros automaticamenteeventos
window.addEventListener("DOMContentLoaded", startCamerastartAll)
function startAll()
{
//funçãoligar paraa tirarcamera fotoautomaticamente
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.witdhwidth, 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">