All Projects → muaz-khan → Recordrtc

muaz-khan / Recordrtc

Licence: mit
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.

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to Recordrtc

Mediastreamrecorder
Cross browser audio/video/screen recording. It supports Chrome, Firefox, Opera and Microsoft Edge. It even works on Android browsers. It follows latest MediaRecorder API standards and provides similar APIs.
Stars: ✭ 2,381 (-52.46%)
Mutual labels:  webrtc, mediarecorder, mediastreamrecorder
ScreenKap
A simple screen recorder app for Android
Stars: ✭ 46 (-99.08%)
Mutual labels:  record-audio, record-video
webapis-media-recorder
這個範例示範如何透過瀏覽器內建的 MediaStream API 來打造影音錄影的功能
Stars: ✭ 27 (-99.46%)
Mutual labels:  mediarecorder, mediarecorder-api
record-camera-and-screen
录制摄像头和录制屏幕,两者之间可以轻易切换
Stars: ✭ 77 (-98.46%)
Mutual labels:  record-video, record-screen
Libstreaming
A solution for streaming H.264, H.263, AMR, AAC using RTP on Android
Stars: ✭ 3,167 (-36.76%)
Mutual labels:  mediarecorder, mediarecorder-api
Anyrtc Rtmp Opensource
RTMP 推流器,RTMP(HLS)秒开播放器,跨平台(Win,IOS,Android)开源代码
Stars: ✭ 3,871 (-22.7%)
Mutual labels:  webrtc
Webtorrent Hybrid
WebTorrent (with WebRTC support in Node.js)
Stars: ✭ 422 (-91.57%)
Mutual labels:  webrtc
Quickblox Ios Sdk
QuickBlox iOS SDK for messaging and video calling
Stars: ✭ 373 (-92.55%)
Mutual labels:  webrtc
Gortcd
Fast TURN and STUN server: cross-platform, hot reload, flexible config
Stars: ✭ 358 (-92.85%)
Mutual labels:  webrtc
Sipsorcery
A WebRTC, SIP and VoIP library for C# and .NET Core. Designed for real-time communications apps.
Stars: ✭ 449 (-91.03%)
Mutual labels:  webrtc
Geckos.io
🦎 Real-time client/server communication over UDP using WebRTC and Node.js http://geckos.io
Stars: ✭ 439 (-91.23%)
Mutual labels:  webrtc
Twilio Video.js
Twilio’s Programmable Video JavaScript SDK
Stars: ✭ 408 (-91.85%)
Mutual labels:  webrtc
Flutter Webrtc Server
A simple WebRTC signaling server for flutter-webrtc.
Stars: ✭ 384 (-92.33%)
Mutual labels:  webrtc
Rpi Webrtc Streamer
This repo's objective is providing something like Web Cam server on the most popular Raspberry PI hardware. By integrating [WebRTC](https://webrtc.org/native-code/) and Raspberry PI, we can stream the Raspberry camera feed to browser or native client which talks WebRTC.
Stars: ✭ 428 (-91.45%)
Mutual labels:  webrtc
Filedrop Web
📲 WebRTC file transfer - React/TypeScript front end.
Stars: ✭ 375 (-92.51%)
Mutual labels:  webrtc
Re
Generic library for real-time communications with async IO support
Stars: ✭ 444 (-91.13%)
Mutual labels:  webrtc
Media Server Go
WebRTC media server for go
Stars: ✭ 362 (-92.77%)
Mutual labels:  webrtc
React Native Twilio Video Webrtc
Twilio Video (WebRTC) for React Native
Stars: ✭ 403 (-91.95%)
Mutual labels:  webrtc
Go Webrtc
WebRTC for Go
Stars: ✭ 432 (-91.37%)
Mutual labels:  webrtc
P
Peer-to-peer networking with browsers
Stars: ✭ 400 (-92.01%)
Mutual labels:  webrtc

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].