RecordRTC is a server-less (entire client-side) JavaScript library can be used to record WebRTC audio/video media streams. It supports cross-browser audio/video recording.
It is experimental repository for RecordRTC.js which means that every single update will be pushed to this repository until RecordRTC current version gets stable.
recordRTC.save('file-name');
// or
mRecordRTC.save({
audio: 'audio-name',
video: 'video-name',
gif: 'gif-name'
});
<li>
MRecordRTC is fixed to record audio+video in single stream in Firefox.
<pre>
// MRecordRTC auto sets "mRecordRTC.mediaType.audio=false" // if MediaStream has both audio and video tracks // it supports audio+video recording in single file for Firefox mRecordRTC.mediaType = { audio: true, video: true };
save" method has been added in MRecordRTC:
mRecordRTC.save();// or save only audio stream mRecordRTC.save({ audio: true });
// or save audio and video streams mRecordRTC.save({ audio: true, video: true });
<li>
If you're recording GIF, you must link:
<pre>
=
RecordRTC is a server-less (entire client-side) JavaScript library can be used to record WebRTC audio/video media streams. It supports cross-browser audio/video recording.
// Browsers Support::
// Chrome (all versions) [ audio/video individually ]
// Firefox ( >= 29 ) [ audio/video in single webm/mp4 container or only audio in ogg ]
// Opera (all versions) [ same as chrome ]
// Android (Chrome) [ only video ]
// Android (Opera) [ only video ]
// Android (Firefox) [ only video ]
npm install recordrtc
To use it:
<script src="./node_modules/recordrtc/RecordRTC.js"></script>
There are some other NPM packages regarding RecordRTC:
=
| Media File | Bitrate/Framerate | encoders | Framesize | additional info |
|---|---|---|---|---|
| Audio File (WAV) | 1411 kbps | pcm_s16le | 44100 Hz | stereo, s16 |
| Video File (WebM) | 60 kb/s | (whammy) vp8 codec yuv420p | -- | SAR 1:1 DAR 4:3, 1k tbr, 1k tbn, 1k tbc (default) |
=
=
<script src="//cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
=
You'll be recording both audio/video in single WebM container. Though you can edit RecordRTC.js to record in mp4.
var session = {
audio: true,
video: true
};
navigator.getUserMedia(session, function (mediaStream) {
window.recordRTC = RecordRTC(MediaStream);
recordRTC.startRecording();
}, onError);
btnStopRecording.onclick = function () {
recordRTC.stopRecording(function (audioVideoWebMURL) {
window.open(audioVideoWebMURL);
});
};
Demo: https://www.webrtc-experiment.com/RecordRTC/AudioVideo-on-Firefox.html
=
var recordRTC = RecordRTC(mediaStream);
recordRTC.startRecording();
recordRTC.stopRecording(function(audioURL) {
mediaElement.src = audioURL;
});
Remember, you need to invoke navigator.getUserMedia method yourself; it is too easy to use!
navigator.getUserMedia({audio: true}, function(mediaStream) {
window.recordRTC = RecordRTC(MediaStream);
recordRTC.startRecording();
});
btnStopRecording.onclick = function() {
recordRTC.stopRecording(function(audioURL) {
window.open(audioURL);
});
};
Also, you don't need to use prefixed versions of getUserMedia and URL objects. RecordRTC auto handles such things for you! Just use non-prefixed version:
navigator.getUserMedia(media_constraints, onsuccess, onfailure);
URL.createObjectURL(MediaStream);
Simply set volume=0 or muted=true:
navigator.getUserMedia({audio: true}, function(mediaStream) {
audioElement.volume = 0;
audioElement.src = URL.createObjectURL(mediaStream);
audioElement.play();
});
Or otherwise use googEchoCancellation and other experimental constraints from here.
=
Everything is optional except type:'video':
var options = {
type: 'video'
};
var recordRTC = RecordRTC(mediaStream, options);
recordRTC.startRecording();
recordRTC.stopRecording(function(videoURL) {
mediaElement.src = videoURL;
});
=
recordAudio = RecordRTC( stream, {
onAudioProcessStarted: function( ) {
recordVideo.startRecording();
}
});
recordVideo = RecordRTC(stream, {
type: 'video'
});
recordAudio.startRecording();
onAudioProcessStarted fixes shared/exclusive audio gap (a little bit). Because shared audio sometimes causes 100ms delay...
sometime about 400-to-500 ms delay.
Delay depends upon number of applications concurrently requesting same audio devices and CPU/Memory available.
Shared mode is the only mode currently available on 90% of windows systems especially on windows 7.
=
Everything is optional except type:'gif':
// you must link:
// https://cdn.webrtc-experiment.com/gif-recorder.js
var options = {
type: 'gif',
frameRate: 200,
quality: 10
};
var recordRTC = RecordRTC(mediaStream, options);
recordRTC.startRecording();
recordRTC.stopRecording(function(gifURL) {
mediaElement.src = gifURL;
});
=
You can say it: "HTML/Canvas Recording using RecordRTC"!
<script src="//www.WebRTC-Experiment.com/RecordRTC.js"></script>
<script src="//www.webrtc-experiment.com/screenshot.js"></script>
<div id="elementToShare" style="width:100%;height:100%;background:green;"></div>
<script>
var elementToShare = document.getElementById('elementToShare');
var recordRTC = RecordRTC(elementToShare, {
type: 'canvas'
});
recordRTC.startRecording();
recordRTC.stopRecording(function(url) {
window.open(url);
});
</script>
See a demo: https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/
=
autoWriteToDiskUsing autoWriteToDisk; you can suggest RecordRTC to auto-write to indexed-db as soon as you call stopRecording method.
var recordRTC = RecordRTC(MediaStream, {
autoWriteToDisk: true
});
autoWriteToDisk is helpful for single stream recording and writing to disk; however for MRecordRTC; writeToDisk is preferred one.
=
writeToDiskYou can write recorded blob to disk using writeToDisk method:
recordRTC.stopRecording();
recordRTC.writeToDisk();
=
getFromDiskYou can get recorded blob from disk using getFromDisk method:
// get all blobs from disk
RecordRTC.getFromDisk('all', function(dataURL, type) {
type == 'audio'
type == 'video'
type == 'gif'
});
// or get just single blob
RecordRTC.getFromDisk('audio', function(dataURL) {
// only audio blob is returned from disk!
});
For MRecordRTC; you can use word MRecordRTC instead of RecordRTC!
Another possible situation!
var recordRTC = RecordRTC(mediaStream);
recordRTC.startRecording();
recordRTC.stopRecording(function(audioURL) {
mediaElement.src = audioURL;
});
// "recordRTC" instance object to invoke "getFromDisk" method!
recordRTC.getFromDisk(function(dataURL) {
// audio blob is automaticlaly returned from disk!
});
In the above example; you can see that recordRTC instance object is used instead of global RecordRTC object.
=
var options = {
type: 'video',
video: {
width: 320,
height: 240
},
canvas: {
width: 320,
height: 240
}
};
=
recordRTC.getDataURL(function(dataURL) {
mediaElement.src = dataURL;
});
=
Blob object?blob = recordRTC.getBlob();
=
window.open( recordRTC.toURL() );
=
recordRTC.save();
=
// From the spec: This value controls how frequently the audioprocess event is
// dispatched and how many sample-frames need to be processed each call.
// Lower values for buffer size will result in a lower (better) latency.
// Higher values will be necessary to avoid audio breakup and glitches
// bug: how to minimize wav size?
// workaround? obviously ffmpeg!
// The size of the buffer (in sample-frames) which needs to
// be processed each time onprocessaudio is called.
// Legal values are (256, 512, 1024, 2048, 4096, 8192, 16384).
var options = {
bufferSize: 16384
};
var recordRTC = RecordRTC(audioStream, options);
Following values are allowed for buffer-size:
// Legal values are (256, 512, 1024, 2048, 4096, 8192, 16384)
You can write like this:
var options = {
'buffer-size': 16384
};
=
// The sample rate (in sample-frames per second) at which the
// AudioContext handles audio. It is assumed that all AudioNodes
// in the context run at this rate. In making this assumption,
// sample-rate converters or "varispeed" processors are not supported
// in real-time processing.
// The sampleRate parameter describes the sample-rate of the
// linear PCM audio data in the buffer in sample-frames per second.
// An implementation must support sample-rates in at least
// the range 22050 to 96000.
var options = {
sampleRate: 96000
};
var recordRTC = RecordRTC(audioStream, options);
Values for sample-rate must be greater than or equal to 22050 and less than or equal to 96000.
You can write like this:
var options = {
'sample-rate': 16384
};
=
No WinXP SP2 support. However, RecordRTC works on WinXP Service Pack 3.
=
RecordRTC uses WebAudio API for stereo-audio recording. AFAIK, WebAudio is not supported on android chrome releases, yet.
=
Audio recording fails for mono audio. So, try stereo audio only.
=
Do you know "RecordRTC" fails recording audio because following conditions fails:
--allow-file-access-from-files)If you see this error message: Uncaught Error: SecurityError: DOM Exception 18; it means that you're using HTTP; whilst your webpage is loading worker file (i.e. audio-recorder.js) from HTTPS. Both files's (i.e. RecordRTC.js and audio-recorder.js) scheme MUST be same!
=
=
If you explorer chromium code; you'll see that some APIs can only be successfully called for WAV files with stereo audio.
Stereo audio is only supported for WAV files.
...still investigating the actual issue of failure with mono audio.
=
Media Stream Recording API (MediaRecorder object) is being implemented by both Firefox and Chrome. RecordRTC is also using MediaRecorder API for Firefox (nightly).
RecordRTC is unable to record "mono" audio on chrome; however it seems that we can covert channels from "stereo" to "mono" using WebAudio API, though. MediaRecorder API's encoder only support 48k/16k mono audio channel (on Firefox Nightly).
=
RecordRTC Demo works fine on following web-browsers:
| Browser | Support |
|---|---|
| Google Chrome | Stable / Canary / Beta / Dev |
| Firefox | Nightly |
=
=
=
RecordRTC.js is released under MIT licence . Copyright (c) Muaz Khan.
FAQs
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.
We found that recordrtc demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.