https://github.com/zlatnaspirala/record-canvas
Basic MediaRecorder API Javascript
https://github.com/zlatnaspirala/record-canvas
Last synced: about 1 month ago
JSON representation
Basic MediaRecorder API Javascript
- Host: GitHub
- URL: https://github.com/zlatnaspirala/record-canvas
- Owner: zlatnaspirala
- License: mit
- Created: 2021-11-17T22:48:15.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-03-23T20:47:43.000Z (about 3 years ago)
- Last Synced: 2025-03-18T13:28:42.843Z (about 1 month ago)
- Language: JavaScript
- Size: 1.46 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
## 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:
```js
npm run build
```
Take a look at `./build/compositor.lib.js`
## - For npm users first install it with:
Install command:
```js
npm 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.
```js
import { RecordCanvas } from "compositor";
// import { RecordCanvas } from "./src/index";
function attachFunction() {
const mainOption = {
injectCanvas: "canvas",
frameRequestRate: 30,
videoDuration: 10
};
let MyRecorder = new RecordCanvas(mainOption);
window.removeEventListener("click", attachFunction);
MyRecorder.run();
MyRecorder.presentationPreview();
console.info("Test instance MyRecorder => " + MyRecorder);
}
window.addEventListener("click", attachFunction);
```
### `index.html` Record-Canvas-Tool
Inputs for `any-canvas-example.js`
```js
// If you need canvas from iframe:
injectCanvas = recordCanvasIframe.contentWindow.document.getElementById('canvas');
let mainOption = {
injectCanvas: injectCanvas,
// injectCanvas: "canvas",
frameRequestRate: 30,
videoDuration: videoDuration,
outputFilename: "record-canvas.mp4",
mineType: "video/mp4",
resolutions: resolutionsDom.selectedOptions[0].innerText
};
```
New import export definition:
```typescript
import RC from "record-canvas";
let options = {
// injectCanvas: "orId",
injectCanvas: document.getElementsByTagName("canvas")[0],
frameRequestRate: 30,
videoDuration: 10,
outputFilename: "record-canvas.mp4",
mineType: "video/mp4",
resolutions: '800x600'
}
this.recordCanvas = new (RC as any).RecordCanvas(this.options);
```
### 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.
```cpp
INPUT PARAMS:
-> Video duration
-> External any canvas work or inline ctx
-> Choose audio [GENERIC SOUND | AUDIO FILE | MIC]
```
```json
WEBCAM |
VIDEO FILE |
CANVAS
=> MP4
GENERIC SOUND |
AUDIO FILE |
MIC
```