@flyyn2/recordrtc

v5.6.2

Published

2 years ago

RecordRTC is a server-less (entire client-side) JavaScript library that can be used to record WebRTC audio/video media streams. It supports cross-browser audio/video recording.

Downloads

0High
0Medium
0Low

flyyn2

##声明：本人修改RecordRTC录音库源代码添加新功能，只为了自己的项目可通过npm拉取包，方便线上打包，代码所有权归muaz-khan所有

##: Personally modify the source code of the recording and recording library to add new additions, just for the sake of your own, which can be obtained through pm, which is convenient for packaging RT code packages. The function is owned by muaz-khan

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

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);
    });
});

Watch a YouTube video presentation/tutorial

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?

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

Wiki

https://github.com/muaz-khan/RecordRTC/wiki

Releases

https://github.com/muaz-khan/RecordRTC/releases

Unit Tests

https://travis-ci.org/muaz-khan/RecordRTC

Issues/Questions?

Github: https://github.com/muaz-khan/RecordRTC/issues
Disqus: https://www.webrtc-experiment.com/RecordRTC/#ask
Stackoverflow: http://stackoverflow.com/questions/tagged/recordrtc
Email: muazkh => gmail

Credits

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

Spec & Reference

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.