MRecordRTC i.e. Multi-RecordRTC! / Demo
RecordRTC Documentation / RecordRTC Wiki Pages / RecordRTC Demo / WebRTC Experiments
This WebRTC experiment is using RecordRTC.js to record multiple audio/video/gif streams.
- It simplifies coding for multi-streams recording i.e. audio+video recording
- It auto synchronizes audio and video
- It is capable to write all blobs to indexed-db
- It allows to get/fetch all blobs or individual blob from disk/indexed-db
=
<script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>
<script>
var recorder = new MRecordRTC();
recorder.addStream(MediaStream);
recorder.mediaType = {
audio: true, // or StereoAudioRecorder
video: true, // or WhammyRecorder
gif: true // or GifRecorder
};
// mimeType is optional and should be set only in advance cases.
recorder.mimeType = {
audio: 'audio/wav',
video: 'video/webm',
gif: 'image/gif'
};
recorder.startRecording();
recorder.stopRecording(function(url, type) {
document.querySelector(type).src = url;
});
recorder.getBlob(function(blobs) {
blobs.audio --- audio blob
blobs.video --- video blob
blobs.gif --- gif blob
});
// or
var blobs = recorder.getBlob();
var audioBlob = blobs.audio;
var videoBlob = blobs.video;
var gifBlob = blobs.gif;
// invoke save-as dialog
// for all recorded blobs
recorder.save();
recorder.writeToDisk();
// get all blobs from disk
MRecordRTC.getFromDisk('all', function(dataURL, type) {
type == 'audio'
type == 'video'
type == 'gif'
});
// or get just single blob
MRecordRTC.getFromDisk('audio', function(dataURL) {
// only audio blob is returned from disk!
});
</script>=
// normally
recorder.mediaType = {
audio: true,
video: true,
gif: true
};
// or advance cases:
recorder.mediaType = {
audio: StereoAudioRecorder, // or MediaStreamRecorder
video: WhammyRecorder, // or MediaStreamRecorder
gif: GifRecorder // or TRUE
};=
// mimeType is optional and should be set only in advance cases.
recorder.mimeType = {
audio: 'audio/wav', // audio/ogg or audio/webm or audio/wav
video: 'video/webm', // video/webm or video/vp8
gif: 'image/gif'
};=
mRecordRTC.getDataURL(function (dataURL) {
// dataURL.audio
// dataURL.video
});=
Invoke save-as dialog:
recorder.save();
// or save only audio stream
recorder.save({
audio: true
});
// or save audio and video streams
recorder.save({
audio: true,
video: true
});=
recorder.getBlob(function(blobs) {
blobs.audio --- audio blob
blobs.video --- video blob
blobs.gif --- gif blob
});
// or
var blobs = recorder.getBlob();
var audioBlob = blobs.audio;
var videoBlob = blobs.video;
var gifBlob = blobs.gif;=
This method allows you write all recorded blobs to indexed-db. It will auto-write those blobs to disk!
recorder.stopRecording();
// invoke it after "stop-recording"
recorder.writeToDisk();=
This method allows you fetch all blobs from indexed-db or you can suggest returning only audio blob; only video or gif blob.
// get all blobs from disk
MRecordRTC.getFromDisk('all', function(dataURL, type) {
type == 'audio'
type == 'video'
type == 'gif'
});
// or get just single blob
MRecordRTC.getFromDisk('audio', function(dataURL) {
// only audio blob is returned from disk!
});You can invoke getFromDisk method any time; until you "manually" clear all browsing history!
=
You can suggest MRecordRTC or RecordRTC objects to automatically write recorded blobs to disk:
recorder.autoWriteToDisk = true;
autoWriteToDisk.startRecording();Again, it works both with MRecordRTC object and RecordRTC object. MRecordRTC will write all recorded blobs to disk; however RecordRTC object will write single blob to disk!
=
// gif properties
recorder.quality = 1;
recorder.frameRate = 1000;
// audio properties
recorder.framSize = 96000;
// video/gif width/height
recorder.video = recorder.canvas = {
width: innerWidth,
height: innerHeight
};=
RecordRTC.js is released under MIT licence . Copyright (c) Muaz Khan.