0

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.

1
  • Reverti a edição caro @reculos, porque se não descaracteriza a resposta, estou verificando o problema e já adiciono uma possivel resolução ;)
    – Syzoth
    Commented 20/07/2018 às 18:28

1 Resposta 1

1

Seu único erro é estar chamando a função na hora de declarar:

   window.addEventListener("DOMContentLoaded", startCamera())

O correto é o próprio DOMContentLoaded chamar, ficando assim:

   window.addEventListener("DOMContentLoaded", startCamera)

O outro erro é que a propriedade srcObject não é mais suportada desde Novembro de 2017, então deve usar algo como (para retro-compatibilidade):

try {
  video.srcObject = mediaSource;
} catch (error) {
  video.src = URL.createObjectURL(mediaSource);
}

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 o startCamera 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())
   }


   //inicia os eventos
   window.addEventListener("DOMContentLoaded", startAll)

   function startAll()
   {
     //ligar a camera automaticamente
     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.width, 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">

10
  • fiz as alterações... entendi o codigo... seria o mesmo que document.getElementById('video')=stream com tratamento de erro correto? entretanto, continua com o mesmo erro... a camer liga... aparece na tela o stream, quando clica no botão pra tirar a foto, o canvas vira um quadrado inteiro preto! não sei se estou certo, mas o problema está dentro do evendo 'click'... vou colocar o novo código acima! obrigado! Commented 20/07/2018 às 18:11
  • Caro @reculos document.getElementById('video')=stream parece incorreto, por isso criei a função, só pra constar, cameras acho que só rodam sob HTTPS, mas creio que em localhost também deva rodar, só em FILE:/// talvez não funcione, dependendo do navegador, vou testar bem aqui e corrigir qualquer erro possivel e te mando o código corrigido
    – Syzoth
    Commented 20/07/2018 às 18:16
  • Muito obrigado pela ajuda @Guilherme Nascimento, tentei colocar em localhost e aqui mas também aconteceu a mesma coisa, depois de clicar no botão, virou um quadrado preto no lugar do canvas, entretanto o stream aparece na tela... Commented 20/07/2018 às 18:30
  • no firefox rodou... mas eu precisava que rodasse no chrome mesmo! Commented 20/07/2018 às 18:39
  • @reculos corrigido, era um erro de digitação simples, digitou canvas.witdh, mas o correto era canvas.width, aproveite e movi tudo para uma função unica para ser carregado tudo só quando a camera iniciar no DOMContentLoaded ;)
    – Syzoth
    Commented 20/07/2018 às 19:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .