CanvasRecorder

Save the canvas on the web page as a video.

---

Install

In the browser

git clone https://github.com/tawaship/CanvasRecorder.git

<script src="/path/to/dist/CanvasRecorder.min.js"></script>

NPM

npm install --save @tawaship/canvas-recorder

import { CanvasRecorder } from '@tawaship/canvas-recorder';
const { CanvasRecorder } = require('@tawaship/canvas-recorder');

Usage

Only canvas

const canvas = document.getElementsByTagName("canvas")[0]; // Canvas you want to record.
CanvasRecorder.createAsync(canvas)
    .then(recorder => {
        recorder.start();
        setTimeout(()=> {
            recorder.finishAsync()
                .then(movie => {
                    movie.download();
                });
        }, 2000);
    });

With audio

note:
When including the audio being played on the screen in the video, due to technical restrictions, we are executing navigator.mediaDevices.getDisplayMedia() to share the screen.

Only the audio is extracted without capturing the screen, and the screen sharing is canceled as soon as the recording ends.

Be very careful when using it, or do not run it if you are unreliable.

const canvas = document.getElementsByTagName("canvas")[0]; // Canvas you want to record.
CanvasRecorder.createWithAudioAsync(canvas)
    .then(recorder => {
        recorder.start();
        setTimeout(()=> {
            recorder.finishAsync()
                .then(movie => {
                    movie.download();
                });
        }, 2000);
    });