Skip to main content
Reversão para edição 5
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
        //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"'environment'},
      audio:true
      })
            .then((stream) => {
                setMedia(document.getElementById("video"),stream) //o mesmo que document.getElementById('video')=stream.srcObject=stream
            })
        }
        //função para parar a camera
        function stopCamera(){
            ifdocument.getElementById(!tmpStream'video') return;
      .srcObject
      tmpStream.getVideoTracks()
      .forEach(track => track.stop())
        }
        //ligar a camer automaticamente
        window.addEventListener("DOMContentLoaded", startCamera())
        //função para tirar foto
          
   document.querySelector("#btnStart"'#btnStart').addEventListener("click"'click', event => {
            const canvas = document.getElementById("pic"'pic')
            const context = canvas.getContext("2d"'2d')
            const video = document.getElementById("video"'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">
        //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">
   //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">
adicionou 21 caracteres ao conteúdo
Fonte Link
        //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'"environment"},
      audio:true
      })
            .then((stream) => {
                setMedia(document.getElementById('video'"video"),stream) //o mesmo que document.srcObject=streamgetElementById('video')=stream
            })
        }
        //função para parar a camera
        function stopCamera(){
      document.getElementById('video')
      .srcObjectif(!tmpStream) return;
      .getVideoTracks()
      tmpStream.getVideoTracks().forEach(track => track.stop())
        }
        //ligar a camer automaticamente
        window.addEventListener("DOMContentLoaded", startCamera())
        //função para tirar foto
          
   document.querySelector('#btnStart'"#btnStart").addEventListener('click'"click", event => {
            const canvas = document.getElementById('pic'"pic")
            const context = canvas.getContext('2d'"2d")
            const video = document.getElementById('video'"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">
   //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">
        //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">
removeu 262 caracteres do conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

Galera... Estou tentando tirar uma foto com uma webcam... sou relativamente novo em Javascript e estou levando um coro!

Segue meu código:

<script type="text/javascript">
   //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()
   })
</script> 
<!doctype html>
<html lang="pt">
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <title>Webcam TRIX</title>       
</head>
<body>
   <video src="" id="video" muted autoplay></video>
   <canvas id="pic"></canvas>
        
   <input type="button" id="btnStart" value="Tirar Foto">
   <!-- o trecho javascript está aqui -->
</body>
</html>

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.

Galera... Estou tentando tirar uma foto com uma webcam... sou relativamente novo em Javascript e estou levando um coro!

Segue meu código:

<script type="text/javascript">
   //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()
   })
</script> 
<!doctype html>
<html lang="pt">
<head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <title>Webcam TRIX</title>       
</head>
<body>
   <video src="" id="video" muted autoplay></video>
   <canvas id="pic"></canvas>
        
   <input type="button" id="btnStart" value="Tirar Foto">
   <!-- o trecho javascript está aqui -->
</body>
</html>

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.

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.

adicionou 60 caracteres ao conteúdo
Fonte Link
Carregando
adicionou 26 caracteres ao conteúdo
Fonte Link
Carregando
Fonte Link
Carregando