mtsee / render-video

Convert canvas animation to video in browser using WebCodecs API

render-video

Convert canvas animation to video in browser using WebCodecs API.

Basic usage

const mp4Blob = await renderVideo(async function(frameIndex) {
  if (frameIndex === canvasPlayer.totalFrames) return;

  await canvasPlayer.seek(frameIndex);

  return canvasPlayer.canvas;
});

download(mp4Blob);

Audio support

const mp4Blob = await renderVideo(getFrameCallback, {
  audio: "https://xxx/yyy.mp3"
});

Demos

canvas player https://ziyunfei.github.io/render-video/demo/canvas player.html

images slideshow https://ziyunfei.github.io/render-video/demo/images slideshow.html

gif to mp4 https://ziyunfei.github.io/render-video/demo/gif to mp4.html

lottie to mp4 https://ziyunfei.github.io/render-video/demo/lottie to mp4.html

screen recording https://ziyunfei.github.io/render-video/demo/screen recording.html

Browser support

Chrome 94+ only.