canvas-app-recorder
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

    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/canvas-app-recorder@0.1.0/dist/canvas-app-recorder.min.js

    License

    MIT

    Install

    npm i canvas-app-recorder

    DownloadsWeekly Downloads

    2

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    19.8 kB

    Total Files

    10

    Last publish

    Collaborators

    • pentamania