Skip to content

Instantly share code, notes, and snippets.

@hasdavidc
Last active August 29, 2015 13:55
Show Gist options
  • Save hasdavidc/8702963 to your computer and use it in GitHub Desktop.
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
<!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