All geek questions in one place

How can I capture an image through a user’s webcam using getUserMedia?

I want to make a program on the Internet that will capture an image through the user's webcam.

I am using getUserMedia web API. Here is my code, but it does not work. How can I change it to capture a webcam image?

 <div id="container"> <video autoplay="true" id="videoElement"> </video> </div> <script> </script>

There is JS:

 var video = document.querySelector("#videoElement"); navigator.getUserMedia, elem = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia; console.log(navigator.getUserMedia); if (navigator.getUserMedia) { navigator.getUserMedia({video: true}, handleVideo, videoError); } function handleVideo(stream) { video.src = window.URL.createObjectURL(stream); } function videoError(e) { // do something }
+10
source share
4 answers

You can use this working sample.

  <!DOCTYPE html> <html> <head> </head> <body onload="init();"> <h1>Take a snapshot of the current video stream</h1> Click on the Start WebCam button. <p> <button onclick="startWebcam();">Start WebCam</button> <button onclick="stopWebcam();">Stop WebCam</button> <button onclick="snapshot();">Take Snapshot</button> </p> <video onclick="snapshot(this);" width=400 height=400 id="video" controls autoplay></video> <p> Screenshots : <p> <canvas id="myCanvas" width="400" height="350"></canvas> </body> <script> //-------------------- // GET USER MEDIA CODE //-------------------- navigator.getUserMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); var video; var webcamStream; function startWebcam() { if (navigator.getUserMedia) { navigator.getUserMedia ( // constraints { video: true, audio: false }, // successCallback function(localMediaStream) { video = document.querySelector('video'); video.src = window.URL.createObjectURL(localMediaStream); webcamStream = localMediaStream; }, // errorCallback function(err) { console.log("The following error occured: " + err); } ); } else { console.log("getUserMedia not supported"); } } function stopWebcam() { webcamStream.stop(); } //--------------------- // TAKE A SNAPSHOT CODE //--------------------- var canvas, ctx; function init() { // Get the canvas and obtain a context for // drawing in it canvas = document.getElementById("myCanvas"); ctx = canvas.getContext('2d'); } function snapshot() { // Draws current image from the video element into the canvas ctx.drawImage(video, 0,0, canvas.width, canvas.height); } </script> </html>
+19
source

The getUserMedia APIs were updated, which now provide takePhoto and grabFrame. The grabFramemethod is less interesting because it does what we have been doing all the time and just returns the next video frame from the stream, but takePhoto interrupts the stream to use the "highest available camera resolution" cameras to capture the compressed image. Learn more here: Google Developers

 var stream, imageCapture; function getMediaStream() { window.navigator.mediaDevices.getUserMedia({video: true}) .then(function(mediaStream) { stream = mediaStream; let mediaStreamTrack = mediaStream.getVideoTracks()[0]; imageCapture = new ImageCapture(mediaStreamTrack); console.log(imageCapture); }) .catch(error); } function error(error) { console.error('error:', error); } function takePhoto(img) { const img = img || document.querySelector('img'); imageCapture.takePhoto() .then(blob => { let url = window.URL.createObjectURL(blob); img.src = url; window.URL.revokeObjectURL(url); }) .catch(error); }; /* just call */ getMediaStream(); /* and when you want to capture an image */ takePhoto();
+13
source

getUserMedia is not supported by IE11, look at this link: https://caniuse.com/#search=getuserMedia

Therefore, if you still want to use the main getUserMedia property, you need to use polyfill. Take a look at this polyfilllink: https://github.com/addyosmani/getUserMedia.js

0
source

capture images from a webcam using JavaScript https://html5.tutorials24x7.com/blog/how-to-capture-image-from-camera

0
source

Source: https://habr.com/ru/post/1237017/

More articles:


All Articles