Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <script>
- // Put event listeners into place
- window.addEventListener("DOMContentLoaded", function() {
- // Grab elements, create settings, etc.
- var canvas = document.getElementById("canvas"),
- lastPhoto = canvas.getContext("2d"),
- video = document.getElementById("video"),
- videoObj = { "video": true },
- errBack = function(error) {
- console.log("Video capture error: ", error.code);
- };
- // Put video listeners into place
- if(navigator.getUserMedia) { // Standard
- navigator.getUserMedia(videoObj, function(stream) {
- video.src = stream;
- video.play();
- }, errBack);
- } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
- navigator.webkitGetUserMedia(videoObj, function(stream){
- video.src = window.webkitURL.createObjectURL(stream);
- video.play();
- }, errBack);
- }
- else if(navigator.mozGetUserMedia) { // Firefox-prefixed
- navigator.mozGetUserMedia(videoObj, function(stream){
- video.src = window.URL.createObjectURL(stream);
- video.play();
- }, errBack);
- }
- // Trigger photo take
- document.getElementById("video").addEventListener("click", function() {
- var context = newCan();
- lastPhoto.drawImage(video, 0, 0, 640, 480);
- context.drawImage(video, 0, 0, 640, 480);
- });
- }, false);
- function newCan(){
- // Grab elements, create settings, etc.
- var canvas = document.createElement("canvas"),
- context = canvas.getContext("2d"),
- video = document.getElementById("video"),
- videoObj = { "video": true },
- errBack = function(error) {
- console.log("Video capture error: ", error.code);
- };
- canvas.width = 640;
- canvas.height = 480;
- var photos = document.getElementById("photos");
- photos.appendChild(canvas);
- return context;
- }
- </script>
- </head>
- <body>
- <h1>Webcam App By Kris Occhipinti</h1>
- <video id="video" width="640" height="480" autoplay></video>
- <canvas id="canvas" width="640" height="480"></canvas>
- <div id="photos"></div>
- <hr>
- <p>Tap Video to take a photo. Right Click/Long Hold to "save image as"</p>
- <p>Based on code by David Walsh https://davidwalsh.name/browser-camera</p>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement