Skip to content

JavaScript module to record HTML canvas and WebAudio based app

License

Notifications You must be signed in to change notification settings

pentamania/canvas-app-recorder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Canvas-app-recorder

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

Prerequisites

Install and Usage

in-browser

<script src='path/to/canvas-app-recorder.js'></script>
// Instance of your app
const app = new YourCoolApp();

const canvasRecorder = new CanvasAppRecorder(
  app.getCanvasElement(), // the canvas element used in your app
  app.getAudioContext(), // the webAudio context used in your app
  app.getMasterGain() // the webAudio gainNode
  // ,anotherGain // you can add more than one gain node
);

// open dialog after recording to save the result video
canvasRecorder.downloadAfterStop = true;

// callback function after stopping
canvasRecorder.onstop = (data)=> {
  const videoElement = document.createElement('video');
  document.body.appendChild(videoElement);
  videoElement.loop = true;
  videoElement.src = window.URL.createObjectURL(data.blob);
  videoElement.play();
}

// start recording
app.start();
canvasRecorder.start();

// stop recording in some timing
setTimeout(()=> {
  canvasRecorder.stop();
}, 5000);

ES Modules

npm install canvas-app-recorder
import CanvasAppRecorder from "canvas-app-recorder";

/* ... same as example above */

CDN

https://cdn.jsdelivr.net/npm/[email protected]/dist/canvas-app-recorder.min.js

License

MIT

About

JavaScript module to record HTML canvas and WebAudio based app

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published