WEBCAM without Flash

Question

Guys... I’m trying to take a photo with a webcam... I’m relatively new in Javascript and I’m taking a choir!

Follows my code:

   //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">

So far I could only turn on the camera and show 'LIVE'... I could not make the photo appear on the canvas... it is all black when I click on the button to take the photo.

Answer 1

Your only mistake is calling the function when declaring:

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

The right is the right DOMContentLoaded call, getting like this:

   window.addEventListener("DOMContentLoaded", startCamera)

The other mistake is that the property srcObject is no longer supported since November 2017, then you should use something like (for backward compatibility):

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

There’s a simple typo too, you wrote witdh:

 context.drawImage(video, 0, 0, canvas.witdh, canvas.height)

But the right thing is width:

 context.drawImage(video, 0, 0, canvas.width, canvas.height)

Note: I moved all events inside DOMContentLoaded, both the startCamera as for the click of the button.

Example:

   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">