Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rohan-deshpande/canvas-to-video
Write your canvas to video
https://github.com/rohan-deshpande/canvas-to-video
canvas html5 html5-canvas html5-video threejs video
Last synced: 3 months ago
JSON representation
Write your canvas to video
- Host: GitHub
- URL: https://github.com/rohan-deshpande/canvas-to-video
- Owner: rohan-deshpande
- License: mit
- Created: 2021-03-19T06:19:42.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-03-24T04:40:35.000Z (almost 4 years ago)
- Last Synced: 2024-09-27T16:40:58.277Z (3 months ago)
- Topics: canvas, html5, html5-canvas, html5-video, threejs, video
- Language: JavaScript
- Homepage:
- Size: 211 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# canvas-to-video
## Overview
`canvas-to-video` is a simple API for writing out whatever is being rendered to your HTML5 canvas to video - all done natively in the browser.
This is especially useful for anyone wanting to create videos of things like [three](https://three.org) applications or games.
`canvas-to-video` uses the following core APIs
- [`captureStream`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream)
- [`MediaRecorder`](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder)
- [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob)## Installation
```
npm i canvas-to-video
```## Usage
The below code is a super simple example of how you can record whatever is being rendered to your canvas for the `duration` period.
```js
import record from 'canvas-to-video';const canvas = document.getElementById('canvas');
const button = document.getElementById('button');
const player = document.getElementById('player');
const options = {
// the number of times you want to record per duration
timeslice: 100,
// the length of video you would like to record
duration: 3000,
mimeType: 'video/webm',
audioBitsPerSecond: 0,
videoBitsPerSecond: 25000000,
};button.addEventListener('mousedown', async () => {
const video = await record(canvas, options);
const url = URL.createObjectURL(video);player.src = url;
});
```