Create animated gif from array of png data

I am working on a project where I'm using the getUserMedia to create a array of png image data from the webcam. I am now trying to convert this array into one animated gif.

Thanks in advance,

PS: I would like to use only pure javascript but if I need a external library I will use one demo Code:

<!Doctype html>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>getUserMedia API - jsFiddle demo by Vulpus</title>
<script type="text/javascript" src="LZWEncoder.js"></script>
<script type="text/javascript" src="NeuQuant.js"></script>
<script type="text/javascript" src="GIFEncoder.js"></script> 
<script type="text/javascript" src="b64.js"></script>
            <video id="video" width="320" height="200" style="display:none" autoplay=""></video>
                <button id="btnStart">Start video</button>
                <button id="btnStop">Stop video</button>
                <button id="btnSave">Download</button>             
            <canvas id="canvas" width="320" height="240"></canvas>
<script type="text/javascript">//<![CDATA[ 
var encoder = new GIFEncoder();
window.onload = function() {

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
    var data = []
    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        video = document.getElementById("video"),
        btnStart = document.getElementById("btnStart"),
        btnStop = document.getElementById("btnStop"),
        btnSave = document.getElementById("btnSave")
        videoObj = {
            video: true,

    btnStart.addEventListener("click", function() {
        var localMediaStream;

        if (navigator.getUserMedia) {
            navigator.getUserMedia(videoObj, function(stream) {              
                video.src = (navigator.webkitGetUserMedia) ? window.webkitURL.createObjectURL(stream) : stream;
                localMediaStream = stream;
                var addFrame = setInterval(function() {
            }, function(error) {
                console.error("Video capture error: ", error.code);

            btnStop.addEventListener("click", function() {
            btnSave.addEventListener("click", function() {
                for (var i = 0; i < data.length; i++) {
                    var frame = new Image();
                var binary_gif = //notice this is different from the as3gif package!
                var data_url = 'data:image/gif;base64,'+encode64(binary_gif);

            setInterval(function() {context.drawImage(video, 0, 0, 320, 240)},100);




You cannot create GIFs natively using canvas but you can use a libray called JSGif to do this:

From the read me file:

Now we need to init the GIFEncoder.

var encoder = new GIFEncoder();

If you are making an animated gif, you need to add the following

encoder.setRepeat(0); //0  -> loop forever
                      //1+ -> loop n times then stop
encoder.setDelay(500); //go to next frame every n milliseconds

Now, you need to tell the magical thing that you're gonna start inserting frames (even if it's only one).


And for the part that took the longest to port: adding a real frame.


For more details check out its documentation.

Need Your Help

How to find real number with regex C++

c++ regex boost

I have a string with some real number.

AlertDialog inside alertdialog android

android android-alertdialog

I am trying to add an alertdialog within an alertdialog.But not able to see the second alertdialog..please help me