Create animated gif from array of png data

StackOverflow https://stackoverflow.com/questions/21507679

Question

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>
<html>
<head>
  <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>
</head>
<body>
        <title>RecorderGif</title>
        <header>
            <h1>getUserMedia</h1>
        </header>
        <article>
            <video id="video" width="320" height="200" style="display:none" autoplay=""></video>
            <section>
                <button id="btnStart">Start video</button>
                <button id="btnStop">Stop video</button>
                <button id="btnSave">Download</button>             
                            </section>
            <canvas id="canvas" width="320" height="240"></canvas>
        </article>
<script type="text/javascript">//<![CDATA[ 
var encoder = new GIFEncoder();
encoder.setRepeat(0);
encoder.setDelay(250);
encoder.start();
window.onload = function() {

    //Compatibility
    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() {
                data.push(canvas.toDataURL('image/png'))
            },100);
            }, function(error) {
                console.error("Video capture error: ", error.code);
            });

            btnStop.addEventListener("click", function() {
                localMediaStream.stop();
                clearInterval(addFrame)
            });
            btnSave.addEventListener("click", function() {
                for (var i = 0; i < data.length; i++) {
                    var frame = new Image();
                    frame.src=data[i]
                    context.drawImage(frame,0,0)
                    encoder.addFrame(context);
                    setTimeout(function(){},100)
                };
                encoder.finish();
                var binary_gif = encoder.stream().getData() //notice this is different from the as3gif package!
                var data_url = 'data:image/gif;base64,'+encode64(binary_gif);
                window.location.href=data_url;
            });



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




        }

    });
};
//]]>  
</script>
</body>
</html>
Was it helpful?

Solution

You cannot create GIFs natively using canvas but you can use a libray called JSGif to do this:
https://github.com/antimatter15/jsgif

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).

encoder.start();

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

encoder.addFrame(context);

For more details check out its documentation.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top