title: Create animated gif from array of png data
body: <p>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.</p>
  
  <p>Thanks in advance,</p>
  
  <p>PS: I would like to use only pure javascript but if I need a external library I will use one
  
  <a href="http://vulpusinc.co.nf/recordgif/" rel="nofollow">demo</a> Code:</p>
  
  <pre><code>&lt;!Doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
    &lt;title&gt;getUserMedia API - jsFiddle demo by Vulpus&lt;/title&gt;
  &lt;script type="text/javascript" src="LZWEncoder.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="NeuQuant.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="GIFEncoder.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript" src="b64.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
          &lt;title&gt;RecorderGif&lt;/title&gt;
          &lt;header&gt;
              &lt;h1&gt;getUserMedia&lt;/h1&gt;
          &lt;/header&gt;
          &lt;article&gt;
              &lt;video id="video" width="320" height="200" style="display:none" autoplay=""&gt;&lt;/video&gt;
              &lt;section&gt;
                  &lt;button id="btnStart"&gt;Start video&lt;/button&gt;
                  &lt;button id="btnStop"&gt;Stop video&lt;/button&gt;
                  &lt;button id="btnSave"&gt;Download&lt;/button&gt;             
                              &lt;/section&gt;
              &lt;canvas id="canvas" width="320" height="240"&gt;&lt;/canvas&gt;
          &lt;/article&gt;
  &lt;script type="text/javascript"&gt;//&lt;![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 &lt; 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);
  
  
  
  
          }
  
      });
  };
  //]]&gt;  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>