Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Proof of Concept using the Animated-GIF and gumhelper libraries from @sole in which a webcam stream is converted into a GIF; Requires the Animated_GIF and gumhelper folder paths to actually work
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>POC</title>
<style>
#canvas {
display: none;
}
</style>
</head>
<body>
<div id="videoContainer"></div>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="307" height="250"></canvas>
<img id="previewImage"></img>
<script src="gumhelper/gumhelper.js"></script>
<script src="Animated_GIF/dist/Animated_GIF.js"></script>
<script>
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
gumHelper = window.GumHelper,
videoContainer = document.getElementById('videoContainer'),
previewImg = document.getElementById('previewImage'),
video;
///////////////////////
if(navigator.getMedia) {
gumHelper.startVideoStreaming(function(err, stream, videoElement) {
if(err) {
window.alert(err.message);
} else {
videoContainer.appendChild(videoElement);
video = videoElement;
}
});
} else {
window.alert('For some reason it looks like your browser does not support getUserMedia');
}
///////////////////////
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
capture(function(image) {
try {
console.log('image', image);
} catch(e) {}
previewImg.src = image;
});
});
var capture = function (callback) {
var t = new Date();
var numFrames = 10,
interval = 0.3;
var pendingFrames = numFrames;
var ag = new Animated_GIF({ workerPath: 'Animated_GIF/dist/Animated_GIF.worker.min.js' });
ag.setSize(320, 240);
ag.setDelay(interval);
captureFrame();
function captureFrame() {
ag.addFrame(video);
pendingFrames--;
if(pendingFrames > 0) {
setTimeout(captureFrame, interval * 1000); // timeouts are in milliseconds
} else {
ag.getBase64GIF(function(image) {
// Ensure workers are freed-so we avoid bug #103 https://github.com/meatspaces/meatspace-chat/issues/103
ag.destroy();
callback(image);
console.log('time', new Date() - t);
});
}
}
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment