Last active
August 29, 2015 13:55
-
-
Save hasdavidc/8702963 to your computer and use it in GitHub Desktop.
A Proof of Concept using the Animated-GIF library from @sole in which webcam images are converted into a GIF; Requires the Animated_GIF folder path to actually work
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>POC</title> | |
| <style> | |
| #canvas { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- | |
| Ideally these elements aren't created until it's confirmed that the | |
| client supports video/camera, but for the sake of illustrating the | |
| elements involved, they are created with markup (not JavaScript) | |
| --> | |
| <video id="video" width="307" height="250" autoplay></video> | |
| <button id="snap">Snap Photo</button> | |
| <canvas id="canvas" width="307" height="250"></canvas> | |
| <img id="canvasImg1"></img> | |
| <img id="canvasImg2"></img> | |
| <img id="canvasImg3"></img> | |
| <img id="canvasImg4"></img> | |
| <script src="Animated_GIF/dist/Animated_GIF.js"></script> | |
| <script> | |
| // Put event listeners into place | |
| window.addEventListener("DOMContentLoaded", function() { | |
| // Grab elements, create settings, etc. | |
| var canvas = document.getElementById("canvas"), | |
| context = 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); | |
| } | |
| var counter = 1; | |
| // Trigger photo take | |
| document.getElementById("snap").addEventListener("click", function() { | |
| if (counter > 5) { | |
| return; | |
| } | |
| if (counter == 5) { | |
| var imgs = document.querySelectorAll('img'); | |
| // change workerPath to point to where Animated_GIF.worker.js is | |
| var ag = new Animated_GIF({ workerPath: 'Animated_GIF/dist/Animated_GIF.worker.js', sampleInterval: 2 }); | |
| ag.setSize(320, 240); | |
| for(var i = 0; i < imgs.length; i++) { | |
| ag.addFrame(imgs[i]); | |
| } | |
| var animatedImage = document.createElement('img'); | |
| // This is asynchronous, rendered with WebWorkers | |
| ag.getBase64GIF(function(image) { | |
| animatedImage.src = image; | |
| document.body.appendChild(animatedImage); | |
| }); | |
| return; | |
| } | |
| context.drawImage(video, 0, 0, 307, 250); | |
| // save canvas image as data url (png format by default) | |
| var dataURL = canvas.toDataURL(); | |
| // set canvasImg image src to dataURL | |
| // so it can be saved as an image | |
| document.getElementById('canvasImg' + counter++).src = dataURL; | |
| }); | |
| }, false); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment