All Projects → welefen → Canvas2video

welefen / Canvas2video

Licence: mit
Convert dynamic canvas to video, support merge audio

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Canvas2video

Anichart.js
Easily create data visualization animation videos
Stars: ✭ 480 (+310.26%)
Mutual labels:  ffmpeg, canvas
Ccapture.js
A library to capture canvas-based animations at a fixed framerate
Stars: ✭ 2,836 (+2323.93%)
Mutual labels:  ffmpeg, canvas
Egret
🐦Some of the egret tutorial -《白鹭引擎笔记》
Stars: ✭ 108 (-7.69%)
Mutual labels:  canvas
Vue Thanos Snap
thanos snap animation by vue
Stars: ✭ 115 (-1.71%)
Mutual labels:  canvas
Filimo Downloader
Download movies from filimo.com | لینک جایگزین جهت احتیاط: https://gitlab.com/NabiKAZ/filimo-downloader
Stars: ✭ 113 (-3.42%)
Mutual labels:  ffmpeg
Capture Frame
Capture video screenshot from a `<video>` tag (at the current time)
Stars: ✭ 109 (-6.84%)
Mutual labels:  canvas
Sonos Web
Web interface for Sonos audio systems
Stars: ✭ 114 (-2.56%)
Mutual labels:  ffmpeg
Echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser
Stars: ✭ 49,119 (+41882.05%)
Mutual labels:  canvas
Easy Canvas
小程序简单绘图,通过 json 方式绘制一张朋友圈分享图
Stars: ✭ 117 (+0%)
Mutual labels:  canvas
Knowledge
文档着重构建一个完整的「前端技术架构图谱」,方便 F2E(Front End Engineering又称FEE、F2E) 学习与进阶。
Stars: ✭ 1,620 (+1284.62%)
Mutual labels:  canvas
Canvas
Peer-to-peer canvas app for Urbit
Stars: ✭ 114 (-2.56%)
Mutual labels:  canvas
Canvas Raycaster
Using the <canvas> element to do software rendering of a 3D environment with ray-casting
Stars: ✭ 112 (-4.27%)
Mutual labels:  canvas
Schart.js
📊 Small & simple HTML5 charts
Stars: ✭ 110 (-5.98%)
Mutual labels:  canvas
Canvas Confetti
🎉 on-demand confetti gun
Stars: ✭ 2,394 (+1946.15%)
Mutual labels:  canvas
The Matrix Effect
The incredible effect of rain of letters in the style of the Matrix trilogy.
Stars: ✭ 109 (-6.84%)
Mutual labels:  canvas
Ytmdl
A simple app to get songs from YouTube in mp3 format with artist name, album name etc from sources like iTunes, Spotify, LastFM, Deezer, Gaana etc.
Stars: ✭ 2,070 (+1669.23%)
Mutual labels:  ffmpeg
Scrcpy
Display and control your Android device
Stars: ✭ 58,880 (+50224.79%)
Mutual labels:  ffmpeg
Skqw
JavaScript Audio Visualizer
Stars: ✭ 112 (-4.27%)
Mutual labels:  canvas
Vue Graph
⚡️ Vue components based on the JUI chart available in Vue.js
Stars: ✭ 114 (-2.56%)
Mutual labels:  canvas
Canvas Webgl Study
this is a canvas study project
Stars: ✭ 117 (+0%)
Mutual labels:  canvas

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].