Skip to content

Based on MediaRecorder and AudioContext implementation, it can record audio and canvas on the web page and generate a video file to download locally.

Notifications You must be signed in to change notification settings

rewbs/ac-recorder

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#ac-recorder

Based on MediaRecorder and AudioContext implementation: can record audio and canvas on a web page simultaneously, and generate a video file to download locally.

🔗 Chrome support 🔗 Support Safari

Example

To see it in action, run

npm install
npm run build
npm start

and hit "start recording", then "preview video".

Instantiation

Instantiation parameters: constructor(targetAudio, targetCanvas)

  • targetAudio: the audio element that can play audio or a '#id_name' or '.class_name' css selector
  • targetCanvas: The canvas element that plays the animation or video or a '#id_name' or '.class_name' css selector

Configuration parameters (optional)

.setOptions()

Create recorder

.createRecorder()

Recorder control method (main method)

.start()
.pause()
.resume()
.stop()

other methods

.preview()
.closePreview()
.download()
.changeAudio()

Usage

  1. Import the ACRecorder class:
import { ACRecorder } from "./index.js";
  1. Instantiate ACRecorder, and pass in the audio element and canvas element to be recorded:
let ACR = new ACRecorder(document. querySelector("#audio"), "#canvas");
  1. Set up listening events (optional):
ACR.setListeners({
  start: () => {...},
  fail: () => {...},
  pause: () => {...},
  resume: () => {...},
  stop: () => {...}
});
  1. Start recording:
ACR.start();
  1. Pause recording:
ACR. pause();
  1. Resume recording:
ACR. resume();
  1. Stop recording:
ACR. stop();
  1. Preview recorded video (optional):
ACR. preview();
  1. Turn off video preview (optional):
ACR. closePreview();
  1. Download recorded video (optional):
ACR.download();
  1. Destroy the recorder (optional):
ACR.destroy();

Tips

new AudioContext() must be executed after a user operation, otherwise the warning "The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page" will appear, causing the audio to fail to play .

About

Based on MediaRecorder and AudioContext implementation, it can record audio and canvas on the web page and generate a video file to download locally.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 66.8%
  • HTML 27.0%
  • JavaScript 6.2%