Create animated gif from array of png data

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: ``` getUserMedia API - jsFiddle demo by Vulpus RecorderGif

getUserMedia

Accepted Answer

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.

Create animated gif from array of png data

Solution

Problem