• Stars
    star
    249
  • Rank 162,170 (Top 4 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Convert dynamic canvas to video, support merge audio

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