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.} |
- License:
- Source:
- See:
-
- For further information:
- RecordRTC Source Code
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();(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();(static, readonly) version
RecordRTC version number
Properties:
| Name | Type | Description |
|---|---|---|
version |
String | Release version number. |
- Source:
Example
alert(recorder.version);(static, readonly) version
RecordRTC version number
Properties:
| Name | Type | Description |
|---|---|---|
version |
String | Release version number. |
- Source:
Example
alert(recorder.version);(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) 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) 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) 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);
});(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) destroy()
Destroy RecordRTC instance. Clear all recorders and objects.
- Source:
Example
recorder.destroy();(static) destroy()
Destroy RecordRTC instance. Clear all recorders and objects.
- Source:
Example
recorder.destroy();(static) getState() → {String}
Get recorder's readonly state.
- Source:
Returns:
Returns recording state.
- Type
- String
Example
var state = recorder.getState();(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
});(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();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);
});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;
});
});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;
});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 internalRecorder = recorder.getInternalRecorder();
if(internalRecorder instanceof MultiStreamRecorder) {
internalRecorder.addStreams([newAudioStream]);
internalRecorder.resetVideoStreams([screenStream]);
}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 internalRecorder = recorder.getInternalRecorder();
if(internalRecorder instanceof MultiStreamRecorder) {
internalRecorder.addStreams([newAudioStream]);
internalRecorder.resetVideoStreams([screenStream]);
}initRecorder()
This method initializes the recording.
- Source:
- To Do:
-
- This method should be deprecated.
Example
recorder.initRecorder();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);
};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 againpauseRecording()
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 againreset()
This method resets the recorder. So that you can reuse single recorder instance many times.
- Source:
Example
recorder.reset();
recorder.startRecording();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 itresumeRecording()
This method resumes the recording.
- Source:
Example
recorder.pauseRecording(); // first of all, pause the recording
recorder.resumeRecording(); // now resume itsave(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');
});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);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();
});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();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();
});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();
});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();
});