Skip to main content
6 de 7
adicionou 21 caracteres ao conteúdo

WEBCAM sem Flash

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.