├── .github └── workflows │ └── publish.yaml ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── index.js ├── package-lock.json ├── package.json ├── src └── index.ts └── tsconfig.json /.github/workflows/publish.yaml: -------------------------------------------------------------------------------- 1 | name: Publish Package to npmjs 2 | on: 3 | release: 4 | types: [published] 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | permissions: 9 | contents: read 10 | id-token: write 11 | steps: 12 | - uses: actions/checkout@v4 13 | - uses: actions/setup-node@v4 14 | with: 15 | node-version: '20.x' 16 | registry-url: 'https://registry.npmjs.org' 17 | - run: npm ci 18 | - run: npm publish --provenance --access public 19 | env: 20 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # build directories 61 | lib 62 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Giridharan GM 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-media-recorder :o2: :video_camera: :microphone: :computer: 2 | 3 | `react-media-recorder` is a fully typed react component with render prop, or a react hook, that can be used to: 4 | 5 | - Record audio/video 6 | - Record screen 7 | 8 | using [MediaRecorder API](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder). 9 | 10 | ## Installation 11 | 12 | ``` 13 | npm i react-media-recorder 14 | ``` 15 | 16 | or 17 | 18 | ``` 19 | yarn add react-media-recorder 20 | ``` 21 | 22 | ## Usage 23 | 24 | ```javascript 25 | import { ReactMediaRecorder } from "react-media-recorder"; 26 | 27 | const RecordView = () => ( 28 |
29 | ( 32 |
33 |

{status}

34 | 35 | 36 |
38 | )} 39 | /> 40 |
41 | ); 42 | ``` 43 | 44 | Since `react-media-recording` uses render prop, you can define what to render in the view. Just don't forget to wire the `startRecording`, `stopRecording` and `mediaBlobUrl` to your component. 45 | 46 | ## Usage with react hooks 47 | 48 | ```javascript 49 | import { useReactMediaRecorder } from "react-media-recorder"; 50 | 51 | const RecordView = () => { 52 | const { status, startRecording, stopRecording, mediaBlobUrl } = 53 | useReactMediaRecorder({ video: true }); 54 | 55 | return ( 56 |
57 |

{status}

58 | 59 | 60 |
62 | ); 63 | }; 64 | ``` 65 | 66 | The hook receives an object as argument with the same ReactMediaRecorder options / props (except the `render` function). 67 | 68 | ### Options / Props 69 | 70 | #### audio 71 | 72 | Can be either a boolean value or a [MediaTrackConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) object. 73 | 74 | type: `boolean` or `object` 75 | default: `true` 76 | 77 | #### blobPropertyBag 78 | 79 | [From MDN](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob): 80 | An optional `BlobPropertyBag` dictionary which may specify the following two attributes (for the `mediaBlob`): 81 | 82 | - `type`, that represents the MIME type of the content of the array that will be put in the blob. 83 | - `endings`, with a default value of "transparent", that specifies how strings containing the line ending character \n are to be written out. It is one of the two values: "native", meaning that line ending characters are changed to match host OS filesystem convention, or "transparent", meaning that endings are stored in the blob without change 84 | 85 | type: `object` 86 | default: 87 | if `video` is enabled, 88 | 89 | ``` 90 | { 91 | type: "video/mp4" 92 | } 93 | ``` 94 | 95 | if there's only `audio` is enabled, 96 | 97 | ``` 98 | { 99 | type: "audio/wav" 100 | } 101 | ``` 102 | 103 | #### customMediaStream 104 | 105 | A media stream object itself (optional) 106 | 107 | #### mediaRecorderOptions 108 | 109 | An optional options object that will be passed to `MediaRecorder`. Please note that if you specify the MIME type via either `audio` or `video` prop _and_ through this `mediaRecorderOptions`, the `mediaRecorderOptions` have higher precedence. 110 | 111 | type: `object` 112 | default: `{}` 113 | 114 | #### onStart 115 | 116 | A `function` that would get invoked when the MediaRecorder starts. 117 | 118 | type: `function()` 119 | default: `() => null` 120 | 121 | #### onStop 122 | 123 | A `function` that would get invoked when the MediaRecorder stops. It'll provide the blob and the blob url as its params. 124 | 125 | type: `function(blobUrl: string, blob: Blob)` 126 | default: `() => null` 127 | 128 | #### stopStreamsOnStop 129 | 130 | Whether to stop all streams on stop. By default, its `true` 131 | 132 | #### render 133 | 134 | A `function` which accepts an object containing fields: `status`, `startRecording`, `stopRecording` and`mediaBlob`. This function would return a react element/component. 135 | 136 | type: `function` 137 | default: `() => null` 138 | 139 | #### screen 140 | 141 | A `boolean` value. Lets you to record your current screen. Not all browsers would support this. Please [check here](https://caniuse.com/#search=getDisplayMedia) for the availability. Please note that at the moment, the MediaRecorder won't record two alike streams at a time, if you provide both `screen` and `video` prop, the **screen capturing will take precedence** than the video capturing. But, you can provide the `video` prop (_as the MediaTrackConstraints_) which will then utilized by screen capture (for example, `height`, `width` etc..) 142 | 143 | #### video 144 | 145 | Can be either a boolean value or a [MediaTrackConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) object. 146 | 147 | type: `boolean` or `object` 148 | default: `false` 149 | 150 | #### askPermissionOnMount 151 | 152 | A boolean value. If set to `true`, will ask media permission on mounting. 153 | 154 | type: `boolean` 155 | default: `false` 156 | 157 | ### Props available in the `render` function 158 | 159 | #### error 160 | 161 | A string enum. Possible values: 162 | 163 | - `media_aborted` 164 | - `permission_denied` 165 | - `no_specified_media_found` 166 | - `media_in_use` 167 | - `invalid_media_constraints` 168 | - `no_constraints` 169 | - `recorder_error` 170 | 171 | #### status 172 | 173 | A string `enum`. Possible values: 174 | 175 | - `media_aborted` 176 | - `permission_denied` 177 | - `no_specified_media_found` 178 | - `media_in_use` 179 | - `invalid_media_constraints` 180 | - `no_constraints` 181 | - `recorder_error` 182 | - `idle` 183 | - `acquiring_media` 184 | - `recording` 185 | - `stopping` 186 | - `stopped` 187 | 188 | #### startRecording 189 | 190 | A `function`, which starts recording when invoked. 191 | 192 | #### pauseRecording 193 | 194 | A `function`, which pauses the recording when invoked. 195 | 196 | #### resumeRecording 197 | 198 | A `function`, which resumes the recording when invoked. 199 | 200 | #### stopRecording 201 | 202 | A `function`, which stops recording when invoked. 203 | 204 | #### muteAudio 205 | 206 | A `function`, which mutes the audio tracks when invoked. 207 | 208 | #### unmuteAudio 209 | 210 | A `function` which unmutes the audio tracks when invoked. 211 | 212 | #### mediaBlobUrl 213 | 214 | A `blob` url that can be wired to an `