Skip to main content
adicionou 477 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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


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

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

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">
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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);
}

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