RecordRTC: WebRTC audio/video recording ® Muaz Khan

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

into


URL Parameters 

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

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

RecordRTC Sources Codes / Wiki Pages

  1. RecordRTC Main Demo (Records screen/video/audio in all browsers!)
  2. RecordRTC-to-PHP (audio/video recording and uploading to server)
  3. Canvas Recording! (Web-Page Recording)
  4. Record Canvas2D Drawings (Huge collection of 2D drawings!)
  5. Record Mp3 or Wav (Pre-recorded audio) i.e. (Audio on Demand)
  6. MRecordRTC and writeToDisk/getFromDisk!
  7. Audio+Video Recording on Firefox
  8. RecordRTC / PHP / FFmpeg (Syncing/Merging audio/video in single file!)
  9. RecordRTC-to-Nodejs (used ffmpeg to merge wav/webm in single WebM container)
  10. RecordRTC-to-ASP.NET MVC (audio/video recording and uploading to server)
  11. RecordRTC-to-Socket.io (used ffmpeg to merge wav/webm in single WebM container)
  12. RecordRTC and ffmpeg-asm.js (ffmpeg inside the browser!)

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