Created
October 14, 2016 04:02
-
-
Save laixintao/8ffd3989b74016668c237b4cb3dbdacc to your computer and use it in GitHub Desktop.
Snap photo with html5
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 id="canvas" width="640" height="480"></canvas> | |
| <script> | |
| // Grab elements, create settings, etc. | |
| var video = document.getElementById('video'); | |
| // 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(); | |
| }); | |
| } | |
| /* Legacy code below: getUserMedia | |
| else if(navigator.getUserMedia) { // Standard | |
| navigator.getUserMedia({ video: true }, function(stream) { | |
| video.src = stream; | |
| video.play(); | |
| }, errBack); | |
| } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed | |
| navigator.webkitGetUserMedia({ video: true }, function(stream){ | |
| video.src = window.webkitURL.createObjectURL(stream); | |
| video.play(); | |
| }, errBack); | |
| } else if(navigator.mozGetUserMedia) { // Mozilla-prefixed | |
| navigator.mozGetUserMedia({ video: true }, function(stream){ | |
| video.src = window.URL.createObjectURL(stream); | |
| video.play(); | |
| }, errBack); | |
| } | |
| */ | |
| // Elements for taking the snapshot | |
| var canvas = document.getElementById('canvas'); | |
| var context = canvas.getContext('2d'); | |
| var video = document.getElementById('video'); | |
| // Trigger photo take | |
| document.getElementById("snap").addEventListener("click", function() { | |
| context.drawImage(video, 0, 0, 640, 480); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment