WEBCAM without Flash

Question

WEBCAM without Flash

Navigation

#1 by (1 votes)

0

I'm trying to take a picture with a webcam ... I'm relatively new to Javascript and I'm taking a chorus!

Follow 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've only been able to turn the camera on and show 'LIVE' ... I could not make the photo appear on the canvas ... the image is black when I click the button to take the picture.

javascript html5-canvas html5-video

asked by anonymous 20.07.2018 / 15:05

1 answer

Call a method every time a Controller fires asp.net mvc Pass Value By PHP PHP parameter [duplicate]

score 1 · Accepted Answer

Your only mistake is to be calling the function at the time of declaring:

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

The correct is the DOMContentLoaded itself call, thus:

   window.addEventListener("DOMContentLoaded", startCamera)

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

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

You have a typo too, you wrote witdh :

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

But the correct one is width :

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

Note: I moved all events to within DOMContentLoaded , both startCamera and button click.

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