Canvas-app-recorder

Module to record HTML Canvas and WebAudio based App.
Make sure this module is experimental, and could be drastically changed.

Prerequisites

• Browser should support captureStream/MediaStream and MediaRecorder API.
• Your canvas should not be tainted. (Don't use data loaded from another origin without CORS approval!)

Install and Usage

in-browser

1<script src='path/to/canvas-app-recorder.js'></script>

1// Instance of your app
2const app = new YourCoolApp();
3
4const canvasRecorder = new CanvasAppRecorder(
5  app.getCanvasElement(), // the canvas element used in your app
6  app.getAudioContext(), // the webAudio context used in your app
7  app.getMasterGain() // the webAudio gainNode
8  // ,anotherGain // you can add more than one gain node
9);
10
11// open dialog after recording to save the result video
12canvasRecorder.downloadAfterStop = true;
13
14// callback function after stopping
15canvasRecorder.onstop = (data)=> {
16  const videoElement = document.createElement('video');
17  document.body.appendChild(videoElement);
18  videoElement.loop = true;
19  videoElement.src = window.URL.createObjectURL(data.blob);
20  videoElement.play();
21}
22
23// start recording
24app.start();
25canvasRecorder.start();
26
27// stop recording in some timing
28setTimeout(()=> {
29  canvasRecorder.stop();
30}, 5000);

ES Modules

1npm install canvas-app-recorder

1import CanvasAppRecorder from "canvas-app-recorder";
2
3/* ... same as example above */
4

CDN

https://cdn.jsdelivr.net/npm/canvas-app-recorder@0.1.0/dist/canvas-app-recorder.min.js

License

MIT