Last active
November 23, 2024 06:44
-
-
Save lokeb/bbb524f7d9c02f7ed0b88d5d499b9eac to your computer and use it in GitHub Desktop.
HTML5 and Javascript to capture images from a webcam
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| </head> | |
| <body> | |
| <video id="video" width="640" height="480" autoplay></video> | |
| <button id="snap">Snap Photo</button> | |
| <canvas style="outline: 1px solid pink" id="canvas" width="640" height="480"></canvas> | |
| </body> | |
| <script type="text/javascript"> | |
| var video = document.getElementById('video'); | |
| var canvas = document.getElementById('canvas'); | |
| var context = canvas.getContext('2d'); | |
| var errBack = function(e) { | |
| console.log('An error has occurred!', e) | |
| }; | |
| // Get access to the camera! | |
| if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { | |
| // Not adding `{ audio: true }` since we only want video now | |
| navigator.mediaDevices.getUserMedia({ | |
| video: true | |
| }).then(function(stream) { | |
| video.autoplay = true; | |
| video.srcObject = stream; | |
| }); | |
| } | |
| // Trigger photo take | |
| document.getElementById('snap').addEventListener('click', function() { | |
| context.drawImage(video, 0, 0, 640, 480); | |
| }); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment