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 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=""></script>
var recorder = new MRecordRTC();
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.stopRecording(function(url, type) {
    document.querySelector(type).src = url;

recorder.getBlob(function(blobs) { --- audio blob --- video blob
   blobs.gif   --- gif blob
// or
var blobs = recorder.getBlob();
var audioBlob =;
var videoBlob =;
var gifBlob = blobs.gif;

// invoke save-as dialog
// for all recorded blobs;


// 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


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

Latest Updates