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

{status}

)} />
); ``` 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. ## Usage with react hooks ```javascript import { useReactMediaRecorder } from "react-media-recorder"; const RecordView = () => { const { status, startRecording, stopRecording, mediaBlobUrl } = useReactMediaRecorder({ video: true }); return (

{status}

); }; ``` The hook receives an object as argument with the same ReactMediaRecorder options / props (except the `render` function). ### Options / Props #### audio Can be either a boolean value or a [MediaTrackConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) object. type: `boolean` or `object` default: `true` #### blobPropertyBag [From MDN](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob): An optional `BlobPropertyBag` dictionary which may specify the following two attributes (for the `mediaBlob`): - `type`, that represents the MIME type of the content of the array that will be put in the blob. - `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 type: `object` default: if `video` is enabled, ``` { type: "video/mp4" } ``` if there's only `audio` is enabled, ``` { type: "audio/wav" } ``` #### customMediaStream A media stream object itself (optional) #### mediaRecorderOptions 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. type: `object` default: `{}` #### onStart A `function` that would get invoked when the MediaRecorder starts. type: `function()` default: `() => null` #### onStop A `function` that would get invoked when the MediaRecorder stops. It'll provide the blob and the blob url as its params. type: `function(blobUrl: string, blob: Blob)` default: `() => null` #### stopStreamsOnStop Whether to stop all streams on stop. By default, its `true` #### render A `function` which accepts an object containing fields: `status`, `startRecording`, `stopRecording` and`mediaBlob`. This function would return a react element/component. type: `function` default: `() => null` #### screen 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..) #### video Can be either a boolean value or a [MediaTrackConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) object. type: `boolean` or `object` default: `false` #### askPermissionOnMount A boolean value. If set to `true`, will ask media permission on mounting. type: `boolean` default: `false` #### preferCurrentTab A boolean value. If set to `true`, the browser will offer the current tab as the most prominent capture source, i.e. as a separate "This Tab" option in the "Choose what to share" options presented to the user. type: `boolean` default: `false` #### selfBrowserSurface An enumerated value specifying whether the browser should allow the user to select the current tab for capture. Possible values are `include`, which hints that the browser should include the current tab in the choices offered for capture, and `exclude`, which hints that it should be excluded. type: `undefined` | `'include'` | `'exclude'`; default: `undefined` ### Props available in the `render` function #### error A string enum. Possible values: - `media_aborted` - `permission_denied` - `no_specified_media_found` - `media_in_use` - `invalid_media_constraints` - `no_constraints` - `recorder_error` #### status A string `enum`. Possible values: - `media_aborted` - `permission_denied` - `no_specified_media_found` - `media_in_use` - `invalid_media_constraints` - `no_constraints` - `recorder_error` - `idle` - `acquiring_media` - `recording` - `stopping` - `stopped` #### startRecording A `function`, which starts recording when invoked. #### pauseRecording A `function`, which pauses the recording when invoked. #### resumeRecording A `function`, which resumes the recording when invoked. #### stopRecording A `function`, which stops recording when invoked. #### muteAudio A `function`, which mutes the audio tracks when invoked. #### unmuteAudio A `function` which unmutes the audio tracks when invoked. #### mediaBlobUrl A `blob` url that can be wired to an `