recordrtc
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/recordrtc package

    5.6.2 • Public • Published

    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.

    Install

    npm i recordrtc

    DownloadsWeekly Downloads

    45,141

    Version

    5.6.2

    License

    MIT

    Unpacked Size

    380 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar