Created
December 31, 2015 08:59
-
-
Save technocake/71f1cfab9558fc535cf0 to your computer and use it in GitHub Desktop.
HTML5 webcam from getUserMedia()
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> | |
| <title>Webcam test</title> | |
| <script type="text/javascript"> | |
| function loadstream(stream) { | |
| console.log(stream); | |
| video = document.getElementById("webcam"); | |
| video.src = window.URL.createObjectURL(stream); | |
| //video.play(); works, but moved to video ready handler | |
| video.onloadedmetadata = video_loaded; | |
| } | |
| function error(error) { | |
| console.log(error); | |
| } | |
| function video_loaded(e) { | |
| console.log("video loaded"); | |
| console.log(e); | |
| video = document.getElementById("webcam"); | |
| video.play(); | |
| } | |
| function start() { | |
| /* API reference: | |
| ## Webcam html5 | |
| https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia | |
| Little article about it more in depth: | |
| http://www.html5rocks.com/en/tutorials/getusermedia/intro/ | |
| */ | |
| constraints = {video: true} | |
| if(navigator.MediaDevices) | |
| navigator.MediaDevices.getUserMedia(constraints) | |
| .then(loadstream) | |
| .catch(error); | |
| else { | |
| navigator.getMedia = ( navigator.getUserMedia || | |
| navigator.webkitGetUserMedia || | |
| navigator.mozGetUserMedia || | |
| navigator.msGetUserMedia); | |
| navigator.getMedia(constraints, loadstream, error); | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body onload="start()"> | |
| <video id="webcam"></video> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment