How to convert an array of png image data to a video file

Question

I get frames from canvasto canvas.getDataURL().

However, now I have an array of png images, but I want a video file.

How to do it?

var canvas = document.getElementById("mycanvaselementforvideocapturing");
var pngimages = [];
...
setInterval(function(){pngimages.push(canvas.toDataURL())}, 1000);

Answer 1

For full browser support, you need to send a packet of images to the server, and then use some server program for encoding.

FFmpeg can do this.

canvas.captureStream canvas.captureStream. -, MediaRecorder. , , , , (, " -").

var cStream,
  recorder,
  chunks = [];

rec.onclick = function() {
  this.textContent = 'stop recording';
  // set the framerate to 30FPS
  var cStream = canvas.captureStream(30);
  // create a recorder fed with our canvas' stream
  recorder = new MediaRecorder(cStream);
  // start it
  recorder.start();
  // save the chunks
  recorder.ondataavailable = saveChunks;

  recorder.onstop = exportStream;
  // change our button function
  this.onclick = stopRecording;
};

function saveChunks(e) {

  chunks.push(e.data);

}

function stopRecording() {

  recorder.stop();

}


function exportStream(e) {
  // combine all our chunks in one blob
  var blob = new Blob(chunks)
    // do something with this blob
  var vidURL = URL.createObjectURL(blob);
  var vid = document.createElement('video');
  vid.controls = true;
  vid.src = vidURL;
  vid.onended = function() {
    URL.revokeObjectURL(vidURL);
  }
  document.body.insertBefore(vid, canvas);
}

// make something move on the canvas
var x = 0;
var ctx = canvas.getContext('2d');

var anim = function() {
  x = (x + 2) % (canvas.width + 100);
  // there is no transparency in webm,
  // so we need to set a background otherwise every transparent pixel will become opaque black
  ctx.fillStyle = 'ivory';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'black';
  ctx.fillRect(x - 50, 20, 50, 50)
  requestAnimationFrame(anim);
};
anim();

<canvas id="canvas" width="500" height="200"></canvas>
<button id="rec">record</button>

Hide result

, , cStream.addTrack(anAudioStream.getAudioTracks()[0]); new MediaRecorder(cStream), chrome, FF, , MediaRecorder, , ... FF - new MediaStream([videoTrack, audioTrack]);

[ @jib , , ...]

: video.onend → video.onended

Answer 2

MediaRecorder + canvas.captureStream - , , - , Chrome Firefox.

, , webp ( Chrome):

let frames = []; // <-- frames must be *webp* dataURLs
let webmEncoder = new Whammy.Video(fps); 
frames.forEach(f => webmEncoder.add(f));
let blob = await new Promise(resolve => webmEncoder.compile(false, resolve));
let videoBlobUrl = URL.createObjectURL(blob);

whammy webp . , webp, canvas.toDataURL("image/webp") webp dataURL . - Firefox.

- , -, libwebp.js png dataURL, canvas.toDataURL() webp, whammy . , png--> webp ( ).

: , MediaRecorder/captureStream , . , - , whammy , - . . . , , webp (, , , ):

let webPEncodingIsSupported = document.createElement('canvas').toDataURL('image/webp').startsWith('data:image/webp');