Created
August 18, 2016 10:29
-
-
Save avermeulen/9f95926cc131d9b6103f5341a90c03b6 to your computer and use it in GitHub Desktop.
basic html5 web cam example
This file contains 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 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.src = window.URL.createObjectURL(stream); | |
| video.play(); | |
| }); | |
| } | |
| var mediaConfig = { video: true }; | |
| // | |
| if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { | |
| navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) { | |
| video.src = window.URL.createObjectURL(stream); | |
| video.play(); | |
| }); | |
| } | |
| /* Legacy code below! */ | |
| else if (navigator.getUserMedia) { // Standard | |
| navigator.getUserMedia(mediaConfig, function(stream) { | |
| video.src = stream; | |
| video.play(); | |
| }, errBack); | |
| } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed | |
| navigator.webkitGetUserMedia(mediaConfig, function(stream) { | |
| video.src = window.webkitURL.createObjectURL(stream); | |
| video.play(); | |
| }, errBack); | |
| } else if (navigator.mozGetUserMedia) { // Mozilla-prefixed | |
| navigator.mozGetUserMedia(mediaConfig, function(stream) { | |
| video.src = window.URL.createObjectURL(stream); | |
| video.play(); | |
| }, errBack); | |
| } | |
| // 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