{"id":13402288,"url":"https://github.com/muaz-khan/RecordRTC","last_synced_at":"2025-03-14T07:32:39.032Z","repository":{"id":19191064,"uuid":"22424133","full_name":"muaz-khan/RecordRTC","owner":"muaz-khan","description":"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.","archived":false,"fork":false,"pushed_at":"2024-05-13T00:39:07.000Z","size":6837,"stargazers_count":6385,"open_issues_count":430,"forks_count":1744,"subscribers_count":176,"default_branch":"master","last_synced_at":"2024-05-16T02:46:40.207Z","etag":null,"topics":["mediarecorder","mediarecorder-api","mediastreamrecorder","record-audio","record-screen","record-video","recordrtc","webrtc","webrtc-recording"],"latest_commit_sha":null,"homepage":"https://www.webrtc-experiment.com/RecordRTC/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/muaz-khan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-07-30T11:07:04.000Z","updated_at":"2024-06-03T21:16:19.436Z","dependencies_parsed_at":"2023-02-12T23:00:53.820Z","dependency_job_id":"24536468-82f7-4518-903d-3a2da0981ebb","html_url":"https://github.com/muaz-khan/RecordRTC","commit_stats":{"total_commits":344,"total_committers":43,"mean_commits":8.0,"dds":"0.22093023255813948","last_synced_commit":"7b1c360f27c7ae34047137bb2356e39b6f93374f"},"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muaz-khan%2FRecordRTC","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muaz-khan%2FRecordRTC/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muaz-khan%2FRecordRTC/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muaz-khan%2FRecordRTC/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/muaz-khan","download_url":"https://codeload.github.com/muaz-khan/RecordRTC/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243030785,"owners_count":20224665,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mediarecorder","mediarecorder-api","mediastreamrecorder","record-audio","record-screen","record-video","recordrtc","webrtc","webrtc-recording"],"created_at":"2024-07-30T19:01:14.026Z","updated_at":"2025-03-14T07:32:39.016Z","avatar_url":"https://github.com/muaz-khan.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","底层相关","Libraries","webrtc"],"sub_categories":["JavaScript"],"readme":"# RecordRTC.js | [Live Demo](https://www.webrtc-experiment.com/RecordRTC/)\n\n**WebRTC JavaScript Library for Audio+Video+Screen+Canvas (2D+3D animation) Recording**\n\n[Chrome Extension](https://github.com/muaz-khan/Chrome-Extensions/tree/master/screen-recording) or [Dozens of Simple-Demos](https://www.webrtc-experiment.com/RecordRTC/simple-demos/) and [it is Open-Sourced](https://github.com/muaz-khan/RecordRTC) and has [API documentation](https://recordrtc.org/)\n\n[![npm](https://img.shields.io/npm/v/recordrtc.svg)](https://npmjs.org/package/recordrtc) [![downloads](https://img.shields.io/npm/dm/recordrtc.svg)](https://npmjs.org/package/recordrtc) [![Build Status: Linux](https://travis-ci.org/muaz-khan/RecordRTC.png?branch=master)](https://travis-ci.org/muaz-khan/RecordRTC)\n\n**A demo using promises:**\n\n```javascript\nlet stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});\nlet recorder = new RecordRTCPromisesHandler(stream, {\n    type: 'video'\n});\nrecorder.startRecording();\n\nconst sleep = m =\u003e new Promise(r =\u003e setTimeout(r, m));\nawait sleep(3000);\n\nawait recorder.stopRecording();\nlet blob = await recorder.getBlob();\ninvokeSaveAsDialog(blob);\n```\n\n**A demo using normal coding:**\n\n```javascript\nnavigator.mediaDevices.getUserMedia({\n    video: true,\n    audio: true\n}).then(async function(stream) {\n    let recorder = RecordRTC(stream, {\n        type: 'video'\n    });\n    recorder.startRecording();\n\n    const sleep = m =\u003e new Promise(r =\u003e setTimeout(r, m));\n    await sleep(3000);\n\n    recorder.stopRecording(function() {\n        let blob = recorder.getBlob();\n        invokeSaveAsDialog(blob);\n    });\n});\n```\n\n* [Watch a YouTube video presentation/tutorial](https://www.youtube.com/watch?v=YrLzTgdJ-Kg)\n\n## Browsers Support\n\n| Browser        | Operating System                    | Features               |\n| -------------  |-------------                        |---------------------   |\n| Google Chrome  | Windows + macOS + Ubuntu + Android  | audio + video + screen |\n| Firefox        | Windows + macOS + Ubuntu + Android  | audio + video + screen |\n| Opera          | Windows + macOS + Ubuntu + Android  | audio + video + screen |\n| Edge (new)     | Windows (7 or 8 or 10) and MacOSX   | audio + video + screen |\n| Safari         | macOS + iOS (iPhone/iPad)           | audio + video          |\n\n## Codecs Support\n\n| Browser       | Video               | Audio            |\n| ------------- |-------------        |-------------     |\n| Chrome        | VP8, VP9, H264, MKV | OPUS/VORBIS, PCM |\n| Opera         | VP8, VP9, H264, MKV | OPUS/VORBIS, PCM |\n| Firefox       | VP8, H264           | OPUS/VORBIS, PCM |\n| Safari        | VP8                 | OPUS/VORBIS, PCM |\n| Edge (new)    | VP8, VP9, H264, MKV | OPUS/VORBIS, PCM |\n\n\n## CDN\n\n```html\n\u003c!-- recommended --\u003e\n\u003cscript src=\"https://www.WebRTC-Experiment.com/RecordRTC.js\"\u003e\u003c/script\u003e\n\n\u003c!-- use 5.6.2 or any other version on cdnjs --\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.6.2/RecordRTC.js\"\u003e\u003c/script\u003e\n\n\u003c!-- NPM i.e. \"npm install recordrtc\" --\u003e\n\u003cscript src=\"node_modules/recordrtc/RecordRTC.js\"\u003e\u003c/script\u003e\n\n\u003c!-- bower --\u003e\n\u003cscript src=\"bower_components/recordrtc/RecordRTC.js\"\u003e\u003c/script\u003e\n```\n\n## Configuration\n\n```javascript\nconst recorder = RecordRTC(stream, {\n     // audio, video, canvas, gif\n    type: 'video',\n\n    // audio/webm\n    // audio/webm;codecs=pcm\n    // video/mp4\n    // video/webm;codecs=vp9\n    // video/webm;codecs=vp8\n    // video/webm;codecs=h264\n    // video/x-matroska;codecs=avc1\n    // video/mpeg -- NOT supported by any browser, yet\n    // audio/wav\n    // audio/ogg  -- ONLY Firefox\n    // demo: simple-demos/isTypeSupported.html\n    mimeType: 'video/webm',\n\n    // MediaStreamRecorder, StereoAudioRecorder, WebAssemblyRecorder\n    // CanvasRecorder, GifRecorder, WhammyRecorder\n    recorderType: MediaStreamRecorder,\n\n    // disable logs\n    disableLogs: true,\n\n    // get intervals based blobs\n    // value in milliseconds\n    timeSlice: 1000,\n\n    // requires timeSlice above\n    // returns blob via callback function\n    ondataavailable: function(blob) {},\n\n    // auto stop recording if camera stops\n    checkForInactiveTracks: false,\n\n    // requires timeSlice above\n    onTimeStamp: function(timestamp) {},\n\n    // both for audio and video tracks\n    bitsPerSecond: 128000,\n\n    // only for audio track\n    // ignored when codecs=pcm\n    audioBitsPerSecond: 128000,\n\n    // only for video track\n    videoBitsPerSecond: 128000,\n\n    // used by CanvasRecorder and WhammyRecorder\n    // it is kind of a \"frameRate\"\n    frameInterval: 90,\n\n    // if you are recording multiple streams into single file\n    // this helps you see what is being recorded\n    previewStream: function(stream) {},\n\n    // used by CanvasRecorder and WhammyRecorder\n    // you can pass {width:640, height: 480} as well\n    video: HTMLVideoElement,\n\n    // used by CanvasRecorder and WhammyRecorder\n    canvas: {\n        width: 640,\n        height: 480\n    },\n\n    // used by StereoAudioRecorder\n    // the range 22050 to 96000.\n    sampleRate: 96000,\n\n    // used by StereoAudioRecorder\n    // the range 22050 to 96000.\n    // let us force 16khz recording:\n    desiredSampRate: 16000,\n\n    // used by StereoAudioRecorder\n    // Legal values are (256, 512, 1024, 2048, 4096, 8192, 16384).\n    bufferSize: 16384,\n\n    // used by StereoAudioRecorder\n    // 1 or 2\n    numberOfAudioChannels: 2,\n\n    // used by WebAssemblyRecorder\n    frameRate: 30,\n\n    // used by WebAssemblyRecorder\n    bitrate: 128000,\n\n    // used by MultiStreamRecorder - to access HTMLCanvasElement\n    elementClass: 'multi-streams-mixer'\n});\n```\n\n## MediaStream parameter\n\nMediaStream parameter accepts following values:\n\n```javascript\nlet recorder = RecordRTC(MediaStream || HTMLCanvasElement || HTMLVideoElement || HTMLElement, {});\n```\n\n## API\n\n```javascript\nRecordRTC.prototype = {\n    // start the recording\n    startRecording: function() {},\n\n    // stop the recording\n    // getBlob inside callback function\n    stopRecording: function(blobURL) {},\n\n    // pause the recording\n    pauseRecording: function() {},\n\n    // resume the recording\n    resumeRecording: function() {},\n\n    // auto stop recording after specific duration\n    setRecordingDuration: function() {},\n\n    // reset recorder states and remove the data\n    reset: function() {},\n\n    // invoke save as dialog\n    save: function(fileName) {},\n\n    // returns recorded Blob\n    getBlob: function() {},\n\n    // returns Blob-URL\n    toURL: function() {},\n\n    // returns Data-URL\n    getDataURL: function(dataURL) {},\n\n    // returns internal recorder\n    getInternalRecorder: function() {},\n\n    // initialize the recorder [deprecated]\n    initRecorder: function() {},\n\n    // fired if recorder's state changes\n    onStateChanged: function(state) {},\n\n    // write recorded blob into indexed-db storage\n    writeToDisk: function(audio: Blob, video: Blob, gif: Blob) {},\n\n    // get recorded blob from indexded-db storage\n    getFromDisk: function(dataURL, type) {},\n\n    // [deprecated]\n    setAdvertisementArray: function([webp1, webp2]) {},\n\n    // [deprecated] clear recorded data\n    clearRecordedData: function() {},\n\n    // clear memory; clear everything\n    destroy: function() {},\n\n    // get recorder's state\n    getState: function() {},\n\n    // [readonly] property: recorder's state\n    state: string,\n\n    // recorded blob [readonly] property\n    blob: Blob,\n\n    // [readonly] array buffer; useful only for StereoAudioRecorder\n    buffer: ArrayBuffer,\n\n    // RecordRTC version [readonly]\n    version: string,\n\n    // [readonly] useful only for StereoAudioRecorder\n    bufferSize: integer,\n\n    // [readonly] useful only for StereoAudioRecorder\n    sampleRate: integer\n}\n```\n\nPlease check documentation here: [https://recordrtc.org/](https://recordrtc.org/)\n\n## Global APIs\n\n```javascript\n// \"bytesToSize\" returns human-readable size (in MB or GB)\nlet size = bytesToSize(recorder.getBlob().size);\n\n// to fix video seeking issues\ngetSeekableBlob(recorder.getBlob(), function(seekableBlob) {\n    invokeSaveAsDialog(seekableBlob);\n});\n\n// this function invokes save-as dialog\ninvokeSaveAsDialog(recorder.getBlob(), 'video.webm');\n\n// use these global variables to detect browser\nlet browserInfo = {isSafari, isChrome, isFirefox, isEdge, isOpera};\n\n// use this to store blobs into IndexedDB storage\nDiskStorage = {\n    init: function() {},\n    Fetch: function({audioBlob: Blob, videoBlob: Blob, gifBlob: Blob}) {},\n    Store: function({audioBlob: Blob, videoBlob: Blob, gifBlob: Blob}) {},\n    onError: function() {},\n    dataStoreName: function() {}\n};\n```\n\n## How to fix echo issues?\n\n1. Set `\u003cvideo\u003e.muted=true` and `\u003cvideo\u003e.volume=0`\n2. Pass `audio: {echoCancellation:true}` on getUserMedia\n\n## Wiki\n\n* [https://github.com/muaz-khan/RecordRTC/wiki](https://github.com/muaz-khan/RecordRTC/wiki)\n\n## Releases\n\n* [https://github.com/muaz-khan/RecordRTC/releases](https://github.com/muaz-khan/RecordRTC/releases)\n\n## Unit Tests\n\n* [https://travis-ci.org/muaz-khan/RecordRTC](https://travis-ci.org/muaz-khan/RecordRTC)\n\n## Issues/Questions?\n\n* Github: [https://github.com/muaz-khan/RecordRTC/issues](https://github.com/muaz-khan/RecordRTC/issues)\n* Disqus: [https://www.webrtc-experiment.com/RecordRTC/#ask](https://www.webrtc-experiment.com/RecordRTC/#ask)\n* Stackoverflow: [http://stackoverflow.com/questions/tagged/recordrtc](http://stackoverflow.com/questions/tagged/recordrtc)\n* Email: `muazkh =\u003e gmail`\n\n## Credits\n\n| Library     | Usage |\n| ------------- |------------|\n| [Recorderjs](https://github.com/mattdiamond/Recorderjs) | StereoAudioRecorder |\n| [webm-wasm](https://github.com/GoogleChromeLabs/webm-wasm) | WebAssemblyRecorder |\n| [jsGif](https://github.com/antimatter15/jsgif) | GifRecorder |\n| [whammy](https://github.com/antimatter15/whammy) | WhammyRecorder |\n\n## Spec \u0026 Reference\n\n1. [MediaRecorder API](https://w3c.github.io/mediacapture-record/MediaRecorder.html)\n2. [Web Audio API](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html)\n3. [Canvas2D](http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/)\n4. [Media Capture and Streams](http://www.w3.org/TR/mediacapture-streams/)\n\n## Who is using RecordRTC?\n\n| Framework     | Github               | Article            |\n| ------------- |-------------        |-------------     |\n| Angular2      | [github](https://github.com/ShankarSumanth/Angular2-RecordRTC) | [article](https://medium.com/@SumanthShankar/integrate-recordrtc-with-angular-2-typescript-942c9c4ca93f#.7x5yf2nr5) |\n| React.js       | [github](https://github.com/szwang/recordrtc-react) | [article]([http://suzannewang.com/recordrtc/](https://web.archive.org/web/20220819225619/https://suzannewang.com/recordrtc/)) |\n| Video.js      | [github](https://github.com/collab-project/videojs-record) | None |\n| Meteor        | [github](https://github.com/launchbricklabs/recordrtc-meteor-demo) | None |\n\n## License\n\n[RecordRTC.js](https://github.com/muaz-khan/RecordRTC) is released under [MIT license](https://github.com/muaz-khan/RecordRTC/blob/master/LICENSE) . Copyright (c) [Muaz Khan](https://MuazKhan.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuaz-khan%2FRecordRTC","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmuaz-khan%2FRecordRTC","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuaz-khan%2FRecordRTC/lists"}