Project name record-canvas

RecordCanvas is SIMPLE-WEB-VIDEO-CREATOR with basic functionallity. Based on MediaRecorder API Javascript - Minimum ECMA6

- Work with source and build from source:

Script type module. First install node modules with npm i.

Build library (js text plane) with:

1npm run build

Take a look at ./build/compositor.lib.js

- For npm users first install it with:

Install command:

1npm i record-canvas

Source: https://github.com/zlatnaspirala/record-canvas

How to use it [Basic example is test.html]:

• videoDuration: value in Seconds
• injectCanvas: represent canvas id => "canvas", other way for injectCanvas is canvas Dom like object.

1 import { RecordCanvas } from "compositor";
2// import { RecordCanvas } from "./src/index";
3
4function attachFunction() {
5
6  const mainOption = {
7    injectCanvas: "canvas",
8    frameRequestRate: 30,
9    videoDuration: 10
10  };
11
12  let MyRecorder = new RecordCanvas(mainOption);
13  window.removeEventListener("click", attachFunction);
14  MyRecorder.run();
15  MyRecorder.presentationPreview();
16  console.info("Test instance MyRecorder => " + MyRecorder);
17}
18
19window.addEventListener("click", attachFunction);

index.html Record-Canvas-Tool

Inputs for any-canvas-example.js

1  // If you need canvas from iframe:
2  injectCanvas = recordCanvasIframe.contentWindow.document.getElementById('canvas');
3
4  let mainOption = {
5    injectCanvas: injectCanvas,
6    // injectCanvas: "canvas",
7    frameRequestRate: 30,
8    videoDuration: videoDuration,
9    outputFilename: "record-canvas.mp4",
10    mineType: "video/mp4",
11    resolutions: resolutionsDom.selectedOptions[0].innerText
12  };

Next features:

Add input options: - No generic audio context - No user request needed for download

Idea:

To combine any source. To be reusable in any case.

1 INPUT PARAMS:
2 -> Video duration
3 -> External any canvas work or inline ctx
4 -> Choose audio [GENERIC SOUND | AUDIO FILE | MIC]

1WEBCAM |
2VIDEO FILE |
3CANVAS
4                      => MP4
5GENERIC SOUND |
6AUDIO FILE | 
7MIC