search

spite / ccapture.js

A library to capture canvas-based animations at a fixed framerate
MIT License
3.55k stars 406 forks source link

What kind of data is in custom save blob? File[]? .tar? #100

Closed vtan31 closed 4 years ago

vtan31 commented 4 years ago

I'm trying to figure out what blob contains. Is it an array of images? or is it the .tar file?

So i want to use ccapture.js to get my canvas animations jpg frames and send it to an ffmpeg server to convert the images into my animation.mp4. The reason i'm not using the webm type is because i'm trying to get this to work for ios safari as well.

before saving the blob, i was just trying to see if I can get the images out of the blob on the client for testing.

What kind of file is blob? Is it a File[]? How can I get Uint8Array to the image files?

below is my typescript snippet. Any help figuring this out is greatly appreciated.

                // What kind of file is blob?  Is it a File[]?
                 this.capturer.save((blob: Blob) => {

                    let fileReader = new FileReader();

                    fileReader.readAsArrayBuffer(blob);

                    fileReader.onload = (event:any) =>  {
                        let arrayBuffer = fileReader.result;

                        let uinit8Arr = new Uint8Array(<any>arrayBuffer);

                        //How can I get Uint8Array to the image files?

                        return uinit8Arr;
                    };

                });
vtan31 commented 4 years ago

I figured this out... the blob is a .tar file.

var imageUrl = URL.createObjectURL(blob);