canvas2video

Convert dynamic canvas to video, support merge audio

Usage no npm install needed!

<script type="module">
  import canvas2video from 'https://cdn.skypack.dev/canvas2video';
</script>

README

canvas2video

Convert dynamic canvas to video, support merge audio (use ffmpeg.wasm)

Install

npm i canvas2video

Usage

import { Canvas2Video } from "canvas2video";

<script src="https://unpkg.com/canvas2video/dist/canvas2video.js"></script>
<!--if convert video type or merge audio, must be include ffmpeg.js in html file -->
<script src="https://unpkg.com/@ffmpeg/ffmpeg/dist/ffmpeg.min.js"></script>
<script>
  const canvas = document.querySelector("canvas");
  const instance = new Canvas2Video({
    canvas: canvas,
    workerOptions: {
      // logger: str => console.error(str),
    },
    // audio: 'http://s5.qhres.com/static/465f1f953f1e6ff2.mp3'
  });
  instance.startRecord();

  setTimeout(() => {
    instance.stopRecord();
  }, 3000);

  instance
    .getStreamURL()
    .then((url) => {
      console.log("video url", url);
    })
    .catch((err) => console.error(err));
</script>

Demo