RecordRTC: WebRTC audio/video recording ® Muaz Khan

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

into


You can try a chrome extension for screen recording as well!

URL Parameters 

// AUDIO
?bufferSize=16384&sampleRate=44100
?leftChannel=false&disableLogs=false

// VIDEO
?canvas_width=1280&canvas_height=720
?frameInterval=10

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

Screen Capturing Prerequisites

  1. Chrome? Store / Source Code /
  2. Firefox? Store / Source Code /

RecordRTC Issues

Feedback

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

Using RecordRTC...

  1. You can record both Audio/Video in single file in Firefox.
  2. You can record both Audio/Screen in single file in Firefox.
  3. You can record audio as WAV and video as WebM in Chrome/Opera.
  4. You can record audio as WAV in Microsoft Edge.
  5. You can record remote audios (RTCPeerConnection.onaddstream) in Firefox using "recorderType:StereoAudioRecorder"
  6. You can record Gif in all browsers.

You can even control buffer-size, sample-rates, video-resolutions, etc.

Technical Guide

  1. Chrome allows getUserMedia invocation on majority of non-file protocols e.g. HTTP/HTTPS/ or inside chrome extension pages. Though, there is always options to use CL (command-line) flags to support file protocols.
  2. ( In Chrome) RecordRTC captures video frames via Canvas2D; which is encoded in webp-DataURL; now it is using a library named “weppy” which encodes webp into webm.
  3. ( In Firefox) RecordRTC is using MediaRecorder API; which supports both audio/video recordings, both in single and multiple files.
  4. ( In Chrome) RecordRTC is using WebAudio API for audio-recording. Such API has many issues e.g. unable to capture mono audio in wav format; unable to capture remote audio; failure on XP SP2; etc.
  5. ( In Chrome) If you’re using notebook’s built-in audio input device for audio recording; then you may get "blank" blob.
  6. ( In Chrome) RecordRTC is incapable to record audio/video in a single file; however there is ffmpeg merging solution available on Github repository.

How to use RecordRTC?

<script src="//cdn.webrtc-experiment.com/RecordRTC.js"></script>

How to record audio using RecordRTC?

var recordRTC = RecordRTC(mediaStream, {
    recorderType: StereoAudioRecorder // optionally force WebAudio API to record audio
}); 
recordRTC.startRecording(); 
recordRTC.stopRecording(function(audioURL) { 
    mediaElement.src = audioURL; 
});

How to record video using RecordRTC?

var options = {
    type: 'video',
    video: { width: 320, height: 240 },
    canvas: { width: 320, height: 240 },
    recorderType: WhammyRecorder // optional
}; 
    
var recordRTC = RecordRTC(mediaStream, options); 
recordRTC.startRecording(); 
recordRTC.stopRecording(function(videoURL) { 
    mediaElement.src = videoURL; 
});

How to record animated GIF using RecordRTC?

// you must link: // https://www.webrtc-experiment.com/gif-recorder.js
var options = {
    type: 'gif',
    video: { width: 320, height: 240 },
    canvas: { width: 320, height: 240 },
    frameRate: 200,
    quality: 10
}; 
        
var recordRTC = RecordRTC(mediaStream, options); 
recordRTC.startRecording(); recordRTC.
stopRecording(function(gifURL) {
    mediaElement.src = gifURL;
});

Possible issues/failures:

( In Chrome) The biggest issue is that RecordRTC is unable to record both audio and video streams in single file.

Do you know "RecordRTC" fails recording audio because following conditions fails ( applies only to chrome):

  1. Sample rate and channel configuration must be the same for input and output sides on Windows i.e. audio input/output devices must match
  2. Only the Default microphone device can be used for capturing.
  3. The requesting scheme is must be one of the following: http, https, chrome, extension's, or file (only works with --allow-file-access-from-files)
  4. The browser must be able to create/initialize the metadata database for the API under the profile directory

RecordRTC is MIT licensed on Github! Documentation

Latest Updates