Class: RecordRTC

© Muaz Khan . @WebRTCWeb . Github . Latest issues . What's New?

new RecordRTC(mediaStream, config)

Record audio, video or screen inside the browser.

RecordRTC is a WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.
Parameters:
Name Type Description
mediaStream MediaStream Single media-stream object, array of media-streams, html-canvas-element, etc.
config object {type:"video", recorderType: MediaStreamRecorder, disableLogs: true, numberOfAudioChannels: 1, bufferSize: 0, sampleRate: 0, desiredSampRate: 16000, video: HTMLVideoElement, etc.}
Author:
License:
Source:
See:
Example
var recorder = RecordRTC(mediaStream or [arrayOfMediaStream], {
    type: 'video', // audio or video or gif or canvas
    recorderType: MediaStreamRecorder || CanvasRecorder || StereoAudioRecorder || Etc
});
recorder.startRecording();

Members

(static, readonly) state

A recorder can have inactive, recording, paused or stopped states.
Properties:
Name Type Description
state String A recorder's state can be: recording, paused, stopped or inactive.
Source:
Example
// this looper function will keep you updated about the recorder's states.
(function looper() {
    document.querySelector('h1').innerHTML = 'Recorder's state is: ' + recorder.state;
    if(recorder.state === 'stopped') return; // ignore+stop
    setTimeout(looper, 1000); // update after every 3-seconds
})();
recorder.startRecording();

(readonly) blob

It is equivalent to "recorder.getBlob()" method. Usage of "getBlob" is recommended, though.
Properties:
Name Type Description
blob Blob Recorded Blob can be accessed using this property.
Source:
Example
recorder.stopRecording(function() {
    var blob = this.blob;

    // below one is recommended
    var blob = this.getBlob();
});

(readonly) buffer

{recorderType:StereoAudioRecorder} returns ArrayBuffer object.
Properties:
Name Type Description
buffer ArrayBuffer Audio ArrayBuffer, supported only in Chrome.
Source:
Example
recorder.stopRecording(function() {
    var arrayBuffer = this.buffer;
    alert(arrayBuffer.byteLength);
});

(readonly) bufferSize

This works only with {recorderType:StereoAudioRecorder}. Use this property on "stopRecording" to verify the encoder's sample-rates.
Properties:
Name Type Description
bufferSize number Buffer-size used to encode the WAV container
Source:
Example
recorder.stopRecording(function() {
    alert('Recorder used this buffer-size: ' + this.bufferSize);
});

(readonly) sampleRate

This works only with {recorderType:StereoAudioRecorder}. Use this property on "stopRecording" to verify the encoder's sample-rates.
Properties:
Name Type Description
sampleRate number Sample-rates used to encode the WAV container
Source:
Example
recorder.stopRecording(function() {
    alert('Recorder used these sample-rates: ' + this.sampleRate);
});

Methods

(static) getFromDisk(type, callback)

This method can be used to get all recorded blobs from IndexedDB storage.
Parameters:
Name Type Description
type string 'all' or 'audio' or 'video' or 'gif'
callback function Callback function to get all stored blobs.
Source:
Example
RecordRTC.getFromDisk('all', function(dataURL, type){
    if(type === 'audio') { }
    if(type === 'video') { }
    if(type === 'gif')   { }
});

(static) getState() → {String}

Get recorder's readonly state.
Source:
Returns:
Returns recording state.
Type
String
Example
var state = recorder.getState();

(static) writeToDisk(options)

This method can be used to store recorded blobs into IndexedDB storage.
Parameters:
Name Type Description
options object {audio: Blob, video: Blob, gif: Blob}
Source:
Example
RecordRTC.writeToDisk({
    audio: audioBlob,
    video: videoBlob,
    gif  : gifBlob
});

clearRecordedData()

This method can be used to clear/reset all the recorded data.
Source:
To Do:
  • Figure out the difference between "reset" and "clearRecordedData" methods.
Example
recorder.clearRecordedData();

getBlob() → {Blob}

Get the recorded blob. Use this method inside the "stopRecording" callback.
Source:
Returns:
Returns recorded data as "Blob" object.
Type
Blob
Example
recorder.stopRecording(function() {
    var blob = this.getBlob();

    var file = new File([blob], 'filename.webm', {
        type: 'video/webm'
    });

    var formData = new FormData();
    formData.append('file', file); // upload "File" object rather than a "Blob"
    uploadToServer(formData);
});

getDataURL(callback)

Get data-URI instead of Blob.
Parameters:
Name Type Description
callback function Callback to get the Data-URI.
Source:
Example
recorder.stopRecording(function() {
    recorder.getDataURL(function(dataURI) {
        video.src = dataURI;
    });
});

getFromDisk(callback)

This method gets a blob from indexed-DB storage.
Parameters:
Name Type Description
callback function Callback to get the recorded blob.
Source:
Example
recorder.getFromDisk(function(dataURL) {
    video.src = dataURL;
});

getInternalRecorder() → {Object}

Get internal recording object (i.e. internal module) e.g. MutliStreamRecorder, MediaStreamRecorder, StereoAudioRecorder or WhammyRecorder etc.
Source:
Returns:
Returns internal recording object.
Type
Object
Example
var msRecorder = recorder.getInternalRecorder();
if(msRecorder instanceof MultiStreamRecorder) {
    msRecorder.addStreams([newAudioStream]);
    msRecorder.resetVideoStreams([screenStream]);
}

initRecorder()

This method initializes the recording.
Source:
To Do:
  • This method should be deprecated.
Example
recorder.initRecorder();

onStateChanged()

This method is called whenever recorder's state changes. Use this as an "event".
Properties:
Name Type Description
state String A recorder's state can be: recording, paused, stopped or inactive.
Source:
Example
recorder.onStateChanged = function(state) {
    console.log('Recorder state: ', state);
};

pauseRecording()

This method pauses the recording. You can resume recording using "resumeRecording" method.
Source:
To Do:
  • Firefox is unable to pause the recording. Fix it.
Example
recorder.pauseRecording();  // pause the recording
recorder.resumeRecording(); // resume again

reset()

This method resets the recorder. So that you can reuse single recorder instance many times.
Source:
Example
recorder.reset();
recorder.startRecording();

resumeRecording()

This method resumes the recording.
Source:
Example
recorder.pauseRecording();  // first of all, pause the recording
recorder.resumeRecording(); // now resume it

save(fileName)

Invoke save-as dialog to save the recorded blob into your disk.
Parameters:
Name Type Description
fileName string Set your own file name.
Source:
Example
recorder.stopRecording(function() {
    this.save('file-name');

    // or manually:
    invokeSaveAsDialog(this.getBlob(), 'filename.webm');
});

setAdvertisementArray(arrayOfWebPImages)

This method appends an array of webp images to the recorded video-blob. It takes an "array" object.
Parameters:
Name Type Description
arrayOfWebPImages Array Array of webp images.
Source:
To Do:
  • This method should be deprecated.
Example
var arrayOfWebPImages = [];
arrayOfWebPImages.push({
    duration: index,
    image: 'data:image/webp;base64,...'
});
recorder.setAdvertisementArray(arrayOfWebPImages);

setRecordingDuration()

Ask RecordRTC to auto-stop the recording after 5 minutes.
Source:
Example
var fiveMinutes = 5 * 1000 * 60;
recorder.setRecordingDuration(fiveMinutes, function() {
   var blob = this.getBlob();
   video.src = this.toURL();
});

// or otherwise
recorder.setRecordingDuration(fiveMinutes).onRecordingStopped(function() {
   var blob = this.getBlob();
   video.src = this.toURL();
});

startRecording()

This method starts the recording.
Source:
Example
var recorder = RecordRTC(mediaStream, {
    type: 'video'
});
recorder.startRecording();

stopRecording(callback)

This method stops the recording. It is strongly recommended to get "blob" or "URI" inside the callback to make sure all recorders finished their job.
Parameters:
Name Type Description
callback function Callback to get the recorded blob.
Source:
Example
recorder.stopRecording(function() {
    // use either "this" or "recorder" object; both are identical
    video.src = this.toURL();
    var blob = this.getBlob();
});

toURL() → {String}

Get virtual/temporary URL. Usage of this URL is limited to current tab.
Source:
Returns:
Returns a virtual/temporary URL for the recorded "Blob".
Type
String
Example
recorder.stopRecording(function() {
    video.src = this.toURL();
});