https://github.com/welefen/canvas2video

Convert dynamic canvas to video, support merge audio
https://github.com/welefen/canvas2video

canvas canvas2video capturestream ffmpeg mediarecorder video

Last synced: about 8 hours ago
JSON representation

Convert dynamic canvas to video, support merge audio

• Host: GitHub
• URL: https://github.com/welefen/canvas2video
• Owner: welefen
• License: mit
• Created: 2020-04-13T12:05:26.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-04-08T10:59:14.000Z (almost 3 years ago)
• Last Synced: 2025-01-06T04:09:42.588Z (7 days ago)
• Topics: canvas, canvas2video, capturestream, ffmpeg, mediarecorder, video
• Language: TypeScript
• Size: 127 KB
• Stars: 253
• Watchers: 7
• Forks: 28
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# canvas2video

![](https://img.shields.io/npm/v/canvas2video.svg?style=flat-square)

Convert dynamic canvas to video, support merge audio (use [ffmpeg.wasm](https://github.com/ffmpegwasm/ffmpeg.wasm))

## Install

```js

npm i canvas2video

```

## Usage

```js

import { Canvas2Video } from "canvas2video";

```

```html

  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));

```

## Demo

- [canvas to video](./demo/index.html)

- [canvas to video, convert to mp4](./demo/mp4.html)

- [canvas to video, convert to mp4, merge audio](./demo/audio.html)