RecordRTC is a server-less (entire client-side) JavaScript library that can be used to record WebRTC audio/video media streams. It supports cross-browser audio/video recording.
npm install @mrmaruf/recordrtcjavascript
let stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
let recorder = new RecordRTCPromisesHandler(stream, {
type: 'video'
});
recorder.startRecording();
const sleep = m => new Promise(r => setTimeout(r, m));
await sleep(3000);
await recorder.stopRecording();
let blob = await recorder.getBlob();
invokeSaveAsDialog(blob);
`
A demo using normal coding:
`javascript
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(async function(stream) {
let recorder = RecordRTC(stream, {
type: 'video'
});
recorder.startRecording();
const sleep = m => new Promise(r => setTimeout(r, m));
await sleep(3000);
recorder.stopRecording(function() {
let blob = recorder.getBlob();
invokeSaveAsDialog(blob);
});
});
`
* Watch a YouTube video presentation/tutorial
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
`html
`
Configuration
`javascript
const recorder = RecordRTC(stream, {
// audio, video, canvas, gif
type: 'video',
// audio/webm
// audio/webm;codecs=pcm
// video/mp4
// video/webm;codecs=vp9
// video/webm;codecs=vp8
// video/webm;codecs=h264
// video/x-matroska;codecs=avc1
// video/mpeg -- NOT supported by any browser, yet
// audio/wav
// audio/ogg -- ONLY Firefox
// demo: simple-demos/isTypeSupported.html
mimeType: 'video/webm',
// MediaStreamRecorder, StereoAudioRecorder, WebAssemblyRecorder
// CanvasRecorder, GifRecorder, WhammyRecorder
recorderType: MediaStreamRecorder,
// disable logs
disableLogs: true,
// get intervals based blobs
// value in milliseconds
timeSlice: 1000,
// requires timeSlice above
// returns blob via callback function
ondataavailable: function(blob) {},
// auto stop recording if camera stops
checkForInactiveTracks: false,
// requires timeSlice above
onTimeStamp: function(timestamp) {},
// both for audio and video tracks
bitsPerSecond: 128000,
// only for audio track
// ignored when codecs=pcm
audioBitsPerSecond: 128000,
// only for video track
videoBitsPerSecond: 128000,
// used by CanvasRecorder and WhammyRecorder
// it is kind of a "frameRate"
frameInterval: 90,
// if you are recording multiple streams into single file
// this helps you see what is being recorded
previewStream: function(stream) {},
// used by CanvasRecorder and WhammyRecorder
// you can pass {width:640, height: 480} as well
video: HTMLVideoElement,
// used by CanvasRecorder and WhammyRecorder
canvas: {
width: 640,
height: 480
},
// used by StereoAudioRecorder
// the range 22050 to 96000.
sampleRate: 96000,
// used by StereoAudioRecorder
// the range 22050 to 96000.
// let us force 16khz recording:
desiredSampRate: 16000,
// used by StereoAudioRecorder
// Legal values are (256, 512, 1024, 2048, 4096, 8192, 16384).
bufferSize: 16384,
// used by StereoAudioRecorder
// 1 or 2
numberOfAudioChannels: 2,
// used by WebAssemblyRecorder
frameRate: 30,
// used by WebAssemblyRecorder
bitrate: 128000,
// used by MultiStreamRecorder - to access HTMLCanvasElement
elementClass: 'multi-streams-mixer'
});
`
MediaStream parameter
MediaStream parameter accepts following values:
`javascript
let recorder = RecordRTC(MediaStream || HTMLCanvasElement || HTMLVideoElement || HTMLElement, {});
`
API
`javascript
RecordRTC.prototype = {
// start the recording
startRecording: function() {},
// stop the recording
// getBlob inside callback function
stopRecording: function(blobURL) {},
// pause the recording
pauseRecording: function() {},
// resume the recording
resumeRecording: function() {},
// auto stop recording after specific duration
setRecordingDuration: function() {},
// reset recorder states and remove the data
reset: function() {},
// invoke save as dialog
save: function(fileName) {},
// returns recorded Blob
getBlob: function() {},
// returns Blob-URL
toURL: function() {},
// returns Data-URL
getDataURL: function(dataURL) {},
// returns internal recorder
getInternalRecorder: function() {},
// initialize the recorder [deprecated]
initRecorder: function() {},
// fired if recorder's state changes
onStateChanged: function(state) {},
// write recorded blob into indexed-db storage
writeToDisk: function(audio: Blob, video: Blob, gif: Blob) {},
// get recorded blob from indexded-db storage
getFromDisk: function(dataURL, type) {},
// [deprecated]
setAdvertisementArray: function([webp1, webp2]) {},
// [deprecated] clear recorded data
clearRecordedData: function() {},
// clear memory; clear everything
destroy: function() {},
// get recorder's state
getState: function() {},
// [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
`javascript
// "bytesToSize" returns human-readable size (in MB or GB)
let size = bytesToSize(recorder.getBlob().size);
// to fix video seeking issues
getSeekableBlob(recorder.getBlob(), function(seekableBlob) {
invokeSaveAsDialog(seekableBlob);
});
// this function invokes save-as dialog
invokeSaveAsDialog(recorder.getBlob(), 'video.webm');
// use these global variables to detect browser
let browserInfo = {isSafari, isChrome, isFirefox, isEdge, isOpera};
// use this to store blobs into IndexedDB storage
DiskStorage = {
init: function() {},
Fetch: function({audioBlob: Blob, videoBlob: Blob, gifBlob: Blob}) {},
Store: function({audioBlob: Blob, videoBlob: Blob, gifBlob: Blob}) {},
onError: function() {},
dataStoreName: function() {}
};
`
How to fix echo issues?
1. Set