Audio+Video Recording using MRecordRTC

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

Other Demos

Experiment NameDemoSource
WebPage+Canvas Recording Demo Source
HTML5 Canvas Dashboard + 2D Animation Recording Demo Source
HTML5 2D Animation Recording Demo Source
Record Videos and Upload to PHP server Demo Source
Record Mp3 Audio Files Demo Source
MRecordRTC: Multiple Videos Recording hack for Old-Chrome Demo Source
WebGL Animation Recording Demo Source
plotly - WebGL Recording Demo Source
Record Audio+Videos in Old Chrome and Merge/Mux on PHP server using Ffmpeg Source
Record Videos and Upload to Node.js server using $.post/XHR/XMLHttpRequest Source
Record Videos and Upload to ASP.NET MVC server Source
Record Videos and Upload to Node.js server using Socket.io Source
Record audio+videos in old chrome and merge/mux inside the browser using Ffmpeg-asm.js Source

Using MRecordRTC...

You can record audio in wav/ogg file format; and video in either webm format or as animated GIF image.

How to use MRecordRTC?

<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
var recorder = new MRecordRTC();
recorder.addStream(MediaStream);
recorder.mediaType = {
   audio: true,
   video: true,
   gif: true
};
// 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!
});

MRecordRTC is MIT licensed on Github! Documentation

RecordRTC Issues

Feedback

Enter your email too; if you want "direct" reply!

Latest Updates