You can capture image from the camera, using javascript event navigator.mediaDevices.getUserMedia for receive stream of media and capture image draw in canvas. try with below code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<video id="video" autoplay></video> <button onclick="createVideoCanvas()">Capture</button> <canvas id="canvas" ></canvas> <script type="text/javascript"> // Grab elements, create settings, etc. var video = document.getElementById('video'); var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var displayWidth=640; var displayHeight=480; document.getElementById("video").setAttribute("width", displayWidth); document.getElementById("video").setAttribute("height",displayHeight); document.getElementById("canvas").setAttribute("width", displayWidth); document.getElementById("canvas").setAttribute("height",displayHeight); // Get access to the camera! if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { console.log(navigator.mediaDevices) // Not adding `{ audio: true }` since we only want video now navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) { video.src = window.URL.createObjectURL(stream); video.play(); }); } //interval = window.setInterval(createVideoCanvas, 10); function createVideoCanvas(){ context.drawImage(video, 0, 0, displayWidth, displayHeight) } </script> |
More Stories
Amazing html canvas examples
Convert Unix Time to other Time Zone in Java script
Clone (Copy) with selected value using jQuery