• Stars
    star
    6,540
  • Rank 6,048 (Top 0.2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 10 years ago
  • Updated 6 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

RecordRTC is WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.

RecordRTC.js | Live Demo

WebRTC JavaScript Library for Audio+Video+Screen+Canvas (2D+3D animation) Recording

Chrome Extension or Dozens of Simple-Demos and it is Open-Sourced and has API documentation

npm downloads Build Status: Linux

A demo using promises:

let stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
let recorder = new RecordRTCPromisesHandler(stream, {
    type: 'video'
});
recorder.startRecording();

const sleep = m => new Promise(r => setTimeout(r, m));
await sleep(3000);

await recorder.stopRecording();
let blob = await recorder.getBlob();
invokeSaveAsDialog(blob);

A demo using normal coding:

navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
}).then(async function(stream) {
    let recorder = RecordRTC(stream, {
        type: 'video'
    });
    recorder.startRecording();

    const sleep = m => new Promise(r => setTimeout(r, m));
    await sleep(3000);

    recorder.stopRecording(function() {
        let blob = recorder.getBlob();
        invokeSaveAsDialog(blob);
    });
});

Browsers Support

Browser Operating System Features
Google Chrome Windows + macOS + Ubuntu + Android audio + video + screen
Firefox Windows + macOS + Ubuntu + Android audio + video + screen
Opera Windows + macOS + Ubuntu + Android audio + video + screen
Edge (new) Windows (7 or 8 or 10) and MacOSX audio + video + screen
Safari macOS + iOS (iPhone/iPad) audio + video

Codecs Support

Browser Video Audio
Chrome VP8, VP9, H264, MKV OPUS/VORBIS, PCM
Opera VP8, VP9, H264, MKV OPUS/VORBIS, PCM
Firefox VP8, H264 OPUS/VORBIS, PCM
Safari VP8 OPUS/VORBIS, PCM
Edge (new) VP8, VP9, H264, MKV OPUS/VORBIS, PCM

CDN

<!-- recommended -->
<script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>

<!-- use 5.6.2 or any other version on cdnjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.6.2/RecordRTC.js"></script>

<!-- NPM i.e. "npm install recordrtc" -->
<script src="node_modules/recordrtc/RecordRTC.js"></script>

<!-- bower -->
<script src="bower_components/recordrtc/RecordRTC.js"></script>

Configuration

const recorder = RecordRTC(stream, {
     // audio, video, canvas, gif
    type: 'video',

    // audio/webm
    // audio/webm;codecs=pcm
    // video/mp4
    // video/webm;codecs=vp9
    // video/webm;codecs=vp8
    // video/webm;codecs=h264
    // video/x-matroska;codecs=avc1
    // video/mpeg -- NOT supported by any browser, yet
    // audio/wav
    // audio/ogg  -- ONLY Firefox
    // demo: simple-demos/isTypeSupported.html
    mimeType: 'video/webm',

    // MediaStreamRecorder, StereoAudioRecorder, WebAssemblyRecorder
    // CanvasRecorder, GifRecorder, WhammyRecorder
    recorderType: MediaStreamRecorder,

    // disable logs
    disableLogs: true,

    // get intervals based blobs
    // value in milliseconds
    timeSlice: 1000,

    // requires timeSlice above
    // returns blob via callback function
    ondataavailable: function(blob) {},

    // auto stop recording if camera stops
    checkForInactiveTracks: false,

    // requires timeSlice above
    onTimeStamp: function(timestamp) {},

    // both for audio and video tracks
    bitsPerSecond: 128000,

    // only for audio track
    // ignored when codecs=pcm
    audioBitsPerSecond: 128000,

    // only for video track
    videoBitsPerSecond: 128000,

    // used by CanvasRecorder and WhammyRecorder
    // it is kind of a "frameRate"
    frameInterval: 90,

    // if you are recording multiple streams into single file
    // this helps you see what is being recorded
    previewStream: function(stream) {},

    // used by CanvasRecorder and WhammyRecorder
    // you can pass {width:640, height: 480} as well
    video: HTMLVideoElement,

    // used by CanvasRecorder and WhammyRecorder
    canvas: {
        width: 640,
        height: 480
    },

    // used by StereoAudioRecorder
    // the range 22050 to 96000.
    sampleRate: 96000,

    // used by StereoAudioRecorder
    // the range 22050 to 96000.
    // let us force 16khz recording:
    desiredSampRate: 16000,

    // used by StereoAudioRecorder
    // Legal values are (256, 512, 1024, 2048, 4096, 8192, 16384).
    bufferSize: 16384,

    // used by StereoAudioRecorder
    // 1 or 2
    numberOfAudioChannels: 2,

    // used by WebAssemblyRecorder
    frameRate: 30,

    // used by WebAssemblyRecorder
    bitrate: 128000,

    // used by MultiStreamRecorder - to access HTMLCanvasElement
    elementClass: 'multi-streams-mixer'
});

MediaStream parameter

MediaStream parameter accepts following values:

let recorder = RecordRTC(MediaStream || HTMLCanvasElement || HTMLVideoElement || HTMLElement, {});

API

RecordRTC.prototype = {
    // start the recording
    startRecording: function() {},

    // stop the recording
    // getBlob inside callback function
    stopRecording: function(blobURL) {},

    // pause the recording
    pauseRecording: function() {},

    // resume the recording
    resumeRecording: function() {},

    // auto stop recording after specific duration
    setRecordingDuration: function() {},

    // reset recorder states and remove the data
    reset: function() {},

    // invoke save as dialog
    save: function(fileName) {},

    // returns recorded Blob
    getBlob: function() {},

    // returns Blob-URL
    toURL: function() {},

    // returns Data-URL
    getDataURL: function(dataURL) {},

    // returns internal recorder
    getInternalRecorder: function() {},

    // initialize the recorder [deprecated]
    initRecorder: function() {},

    // fired if recorder's state changes
    onStateChanged: function(state) {},

    // write recorded blob into indexed-db storage
    writeToDisk: function(audio: Blob, video: Blob, gif: Blob) {},

    // get recorded blob from indexded-db storage
    getFromDisk: function(dataURL, type) {},

    // [deprecated]
    setAdvertisementArray: function([webp1, webp2]) {},

    // [deprecated] clear recorded data
    clearRecordedData: function() {},

    // clear memory; clear everything
    destroy: function() {},

    // get recorder's state
    getState: function() {},

    // [readonly] property: recorder's state
    state: string,

    // recorded blob [readonly] property
    blob: Blob,

    // [readonly] array buffer; useful only for StereoAudioRecorder
    buffer: ArrayBuffer,

    // RecordRTC version [readonly]
    version: string,

    // [readonly] useful only for StereoAudioRecorder
    bufferSize: integer,

    // [readonly] useful only for StereoAudioRecorder
    sampleRate: integer
}

Please check documentation here: https://recordrtc.org/

Global APIs

// "bytesToSize" returns human-readable size (in MB or GB)
let size = bytesToSize(recorder.getBlob().size);

// to fix video seeking issues
getSeekableBlob(recorder.getBlob(), function(seekableBlob) {
    invokeSaveAsDialog(seekableBlob);
});

// this function invokes save-as dialog
invokeSaveAsDialog(recorder.getBlob(), 'video.webm');

// use these global variables to detect browser
let browserInfo = {isSafari, isChrome, isFirefox, isEdge, isOpera};

// use this to store blobs into IndexedDB storage
DiskStorage = {
    init: function() {},
    Fetch: function({audioBlob: Blob, videoBlob: Blob, gifBlob: Blob}) {},
    Store: function({audioBlob: Blob, videoBlob: Blob, gifBlob: Blob}) {},
    onError: function() {},
    dataStoreName: function() {}
};

How to fix echo issues?

  1. Set <video>.muted=true and <video>.volume=0
  2. Pass audio: {echoCancellation:true} on getUserMedia

Wiki

Releases

Unit Tests

Issues/Questions?

Credits

Library Usage
Recorderjs StereoAudioRecorder
webm-wasm WebAssemblyRecorder
jsGif GifRecorder
whammy WhammyRecorder

Spec & Reference

  1. MediaRecorder API
  2. Web Audio API
  3. Canvas2D
  4. Media Capture and Streams

Who is using RecordRTC?

Framework Github Article
Angular2 github article
React.js github article
Video.js github None
Meteor github None

License

RecordRTC.js is released under MIT license . Copyright (c) Muaz Khan.

More Repositories

1

WebRTC-Experiment

WebRTC, WebRTC and WebRTC. Everything here is all about WebRTC!!
JavaScript
11,736
star
2

RTCMultiConnection

RTCMultiConnection is a WebRTC JavaScript library for peer-to-peer applications (screen sharing, audio/video conferencing, file sharing, media streaming etc.)
JavaScript
2,555
star
3

Chrome-Extensions

WebRTC chrome extensions for screen sharing, screen recording, file sharing, youtube+audio sharing, etc.
JavaScript
1,077
star
4

DetectRTC

DetectRTC is a tiny JavaScript library that can be used to detect WebRTC features e.g. system having speakers, microphone or webcam, screen capturing is supported, number of audio/video devices etc. https://www.webrtc-experiment.com/DetectRTC/
JavaScript
663
star
5

WebRTC-Scalable-Broadcast

This module simply initializes socket.io and configures it in a way that single broadcast can be relayed over unlimited users without any bandwidth/CPU usage issues. Everything happens peer-to-peer!
JavaScript
533
star
6

Ffmpeg.js

Ffmpeg.js demos, both for browsers and node.js
JavaScript
487
star
7

MultiStreamsMixer

MultiStreamsMixer is a JavaScript library that allows you pass multiple streams (e.g. screen+camera or multiple-cameras) and get single stream.
JavaScript
431
star
8

Canvas-Designer

Collaborative, extendable, JavaScript Canvas2D drawing tool, supports dozens of builtin tools, as well as generates JavaScript code for 2D animations.
JavaScript
371
star
9

RTCMultiConnection-Server

RTCMultiConnection socket.io server (npm install rtcmulticonnection-server)
JavaScript
274
star
10

getStats

getStats is a tiny JavaScript library using WebRTC getStats API to return peer connection stats i.e. bandwidth usage, packets lost, local/remote ip addresses and ports, type of connection etc.
JavaScript
257
star
11

Translator

Translator.js is a JavaScript library built top on Google Speech-Recognition & Translation API to transcript and translate voice and text. It supports many locales and brings globalization in WebRTC! https://www.webrtc-experiment.com/Translator/
HTML
132
star
12

FileBufferReader

FileBufferReader is a JavaScript library reads file and returns chunkified array-buffers. The resulting buffers can be shared using WebRTC data channels or socket.io.
JavaScript
67
star
13

getScreenId

getScreenId | Capture Screen on Any Domain! This script is a hack used to support single chrome extension usage on any HTTPs domain.
HTML
63
star
14

MultiRTC

A skype-like RTCMultiConnection demo application.
JavaScript
62
star
15

DataChannel

DataChannel.js is a JavaScript library useful to write many-to-many i.e. group file/data sharing or text chat applications. Its syntax is easier to use and understand. It highly simplifies complex tasks like any or all user rejection/ejection; direct messages delivery; and more.
JavaScript
58
star
16

Conversation.js

Conversation.js is inspired by skype; and it provides simple events-like API to manage conversations, enable/disable media devices; add/download files; and do anything supported by Skype. It allows you open data conversation between two or more users using their user-ids.
JavaScript
49
star
17

Firefox-Extensions

(discontinued) Firefox extension API are used to enable screen capturing flag for your own domains!
JavaScript
45
star
18

WebSync-Signaling

WebSync is used as signaling gateway with/for WebRTC-Experiments e.g. RTCMultiConnection.js, DataChannel.js, Plugin-free screen sharing, and video conferencing.
JavaScript
42
star
19

ConcatenateBlobs

Simply pass array of blobs. This javascript library will concatenate all blobs in single Blob object.
HTML
39
star
20

WebRTC-ASPNET-MVC

A simple WebRTC one-to-one demo written in September, 2012! It supports public rooms as well as password-protected private rooms! MS-SQL database is used as signaling gateway!
JavaScript
37
star
21

XHR-Signaling

XHR/XMLHttpRequest based WebRTC signaling implementation.
C#
36
star
22

Reliable-Signaler

A reliable socketlio/node.js based signaling implementation for DataChannel.js, RTCMultiConnection.js and WebRTC Experiments.
JavaScript
32
star
23

RTCMultiConnection-SignalR

SignalR project for RTCMultiConnection
JavaScript
21
star
24

Everything

Everything from Muaz Khan — HTML5, CSS3, JavaScript, WebRTC, WebGL, Canvas2D, SVG, etc.
JavaScript
19
star
25

Curvature

Curvature is a tool lets you design bezier curves using Canvas 2d APIs!
JavaScript
17
star