Wondering what’s next for npm?Check out our public roadmap! »

@tawaship/canvas-recorder

1.0.1 • Public • Published

CanvasRecorder

Save the canvas on the web page as a video.

Build Status MIT License


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

Install

npm i @tawaship/canvas-recorder

DownloadsWeekly Downloads

2

Version

1.0.1

License

MIT

Unpacked Size

145 kB

Total Files

14

Last publish

Collaborators

  • avatar