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, 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) 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
alert(recorder.state);

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();
});

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;
});

bufferSize

This works only with {recorderType:StereoAudioRecorder}. Legal values are (256, 512, 1024, 2048, 4096, 8192, 16384)
Properties:
Name Type Description
bufferSize number Either audio device's default buffer-size, or your custom value.
Source:
Example
recorder = RecordRTC(audioStream, {
    type: 'audio',
    bufferSize:  16384
});

sampleRate

This works only with {recorderType:StereoAudioRecorder}. Legal range is: 22050 to 96000
Properties:
Name Type Description
sampleRate number Audio device's default sample rates.
Source:
Example
recorder = RecordRTC(audioStream, {
    type: 'audio',
    sampleRate: 96000
});

view

{recorderType:StereoAudioRecorder} returns DataView object.
Properties:
Name Type Description
view DataView Audio DataView, supported only in Chrome.
Source:
Example
recorder.stopRecording(function() {
    var dataView = this.view;
});

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) 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
});

addStream()

Add extra media-streams to existing recordings.
Source:
Example
recorder.addStream(MediaStream);

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()

Get the recorded blob. Use this method inside the "stopRecording" callback.
Source:
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;
});

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()

Get virtual/temporary URL. Usage of this URL is limited to current tab.
Source:
Example
recorder.stopRecording(function() {
    video.src = this.toURL();
});