Live Demo
RecordRTC.js |WebRTC JavaScript Library for Audio+Video+Screen+Canvas (2D+3D animation) Recording
Chrome Extension or Dozens of Simple-Demos and it is Open-Sourced and has API documentation
A demo using promises:
let stream = await navigatormediaDevices;let recorder = stream type: 'video';recorder; const sleep = ;await ; await recorder;let blob = await recorder;;
A demo using normal coding:
navigatormediaDevices;
Browsers Support
Browser | Operating System | Features |
---|---|---|
Google Chrome | Windows + macOS + Ubuntu + Android | audio + video + screen |
Firefox | Windows + macOS + Ubuntu + Android | audio + video + screen |
Opera | Windows + macOS + Ubuntu + Android | audio + video + screen |
Edge (new) | Windows (7 or 8 or 10) and MacOSX | audio + video + screen |
Safari | macOS + iOS (iPhone/iPad) | audio + video |
Codecs Support
Browser | Video | Audio |
---|---|---|
Chrome | VP8, VP9, H264, MKV | OPUS/VORBIS, PCM |
Opera | VP8, VP9, H264, MKV | OPUS/VORBIS, PCM |
Firefox | VP8, H264 | OPUS/VORBIS, PCM |
Safari | VP8 | OPUS/VORBIS, PCM |
Edge (new) | VP8, VP9, H264, MKV | OPUS/VORBIS, PCM |
CDN
<!-- recommended --> <!-- use 5.6.1 or any other version on cdnjs --> <!-- NPM i.e. "npm install recordrtc" --> <!-- bower -->
Configuration
const recorder = ;
MediaStream parameter
MediaStream parameter accepts following values:
let recorder = ;
API
RecordRTCprototype = // start the recording {} // stop the recording // getBlob inside callback function {} // pause the recording {} // resume the recording {} // auto stop recording after specific duration {} // reset recorder states and remove the data {} // invoke save as dialog {} // returns recorded Blob {} // returns Blob-URL {} // returns Data-URL {} // returns internal recorder {} // initialize the recorder [deprecated] {} // fired if recorder's state changes {} // write recorded blob into indexed-db storage {} // get recorded blob from indexded-db storage {} // [deprecated] {} // [deprecated] clear recorded data {} // clear memory; clear everything {} // get recorder's state {} // [readonly] property: recorder's state state: string // recorded blob [readonly] property blob: Blob // [readonly] array buffer; useful only for StereoAudioRecorder buffer: ArrayBuffer // RecordRTC version [readonly] version: string // [readonly] useful only for StereoAudioRecorder bufferSize: integer // [readonly] useful only for StereoAudioRecorder sampleRate: integer
Please check documentation here: https://recordrtc.org/
Global APIs
// "bytesToSize" returns human-readable size (in MB or GB)let size = ; // to fix video seeking issues; // this function invokes save-as dialog; // use these global variables to detect browserlet browserInfo = isSafari isChrome isFirefox isEdge isOpera; // use this to store blobs into IndexedDB storageDiskStorage = {} {} {} {} {};
How to fix echo issues?
- Set
<video>.muted=true
and<video>.volume=0
- Pass
audio: {echoCancellation:true}
on getUserMedia
Wiki
Releases
Unit Tests
Issues/Questions?
- Github: https://github.com/muaz-khan/RecordRTC/issues
- Disqus: https://www.webrtc-experiment.com/RecordRTC/#ask
- Stackoverflow: http://stackoverflow.com/questions/tagged/recordrtc
- Email:
muazkh => gmail
Credits
Library | Usage |
---|---|
Recorderjs | StereoAudioRecorder |
webm-wasm | WebAssemblyRecorder |
jsGif | GifRecorder |
whammy | WhammyRecorder |
Spec & Reference
Who is using RecordRTC?
Framework | Github | Article |
---|---|---|
Angular2 | github | article |
React.js | github | article |
Video.js | github | None |
Meteor | github | None |
License
RecordRTC.js is released under MIT license . Copyright (c) Muaz Khan.