I'm getting images from html canvas and would like to convert these images into a video. Search long and hard. Just want to take a couple of images and make them into a video. I manage to pass multiple images to a library engine and it return me a arraybuffer.

My question:

How can I take a arraybuffer and play it in a video tag or convert it so it can play.

On Request:

//You can simply call:
var frames = [];//array to hold each image/frame url
frames.push(canvas.toDataURL('image/png'));//get the data url from canvas

But my question concern more of using arraybuffer as a uri for a video tag.

I'm getting images from html canvas and would like to convert these images into a video. Search long and hard. Just want to take a couple of images and make them into a video. I manage to pass multiple images to a library engine and it return me a arraybuffer.

My question:

How can I take a arraybuffer and play it in a video tag or convert it so it can play.

On Request:

//You can simply call:
var frames = [];//array to hold each image/frame url
frames.push(canvas.toDataURL('image/png'));//get the data url from canvas

But my question concern more of using arraybuffer as a uri for a video tag.

• javascript
• html
• arraybuffer

• Could you please provide some code of how you are getting the images from canvas? – Antonio Narkevich Commented Feb 19, 2018 at 17:40
• Possible duplicate of HTML5 generating video from images – Karen Grigoryan Commented Feb 19, 2018 at 18:59

2 Answers 2

I ended up using the following solution:

const arrayBuffer = null; // your ArrayBuffer goes here
// For example you can fetch it from some URL like 
// const arrayBuffer = await fetch(url).then(r => r.arrayBuffer());
const blob = new Blob([arrayBuffer]);
const video = document.createElement('video');
video.src = URL.createObjectURL(blob);
// You can now insert video into DOM

You can directly use it, You can use mediaStream and then create URL object. Which can be passed to video tag