{"_id":"@arshadpakkali/react-media-recorder","name":"@arshadpakkali/react-media-recorder","dist-tags":{"latest":"1.7.1"},"versions":{"1.7.1":{"name":"@arshadpakkali/react-media-recorder","version":"1.7.1","description":"A React component based on MediaRecorder() API to record audio/video streams","main":"index.js","scripts":{"build":"tsc && jsmin -o ./lib/index.js ./lib/index.js","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/arshadpakkali/react-media-recorder.git"},"keywords":["react","recorder","voice recording","video recording","media recording","getusermedia","MediaRecorder","getDisplayMedia","screen recorder","video recorder","audio recorder"],"author":{"name":"Arshad Pakkali"},"license":"MIT","bugs":{"url":"https://github.com/arshadpakkali/react-media-recorder.git"},"homepage":"https://github.com/arshadpakkali/react-media-recorder.git","devDependencies":{"@types/react":"^16.9.11","jsmin":"^1.0.1","typescript":"^4.4.3"},"types":"./lib/index.d.ts","dependencies":{"extendable-media-recorder":"^6.6.5","extendable-media-recorder-wav-encoder":"^7.0.68"},"_id":"@arshadpakkali/react-media-recorder@1.7.1","gitHead":"1be88d8014fb57322fb163c88dea45963799bbc1","_nodeVersion":"20.16.0","_npmVersion":"10.8.1","dist":{"integrity":"sha512-VHUGRnojQsZ5ZsI9itmX3iPp0KhSeiJe3XECvDOsh71VdLscLnVenhEFm8ElNvAngbV4yM/bHPZw+0oUq86Avw==","shasum":"7213d14dcacc9db0b3e6f2bc7a12cbb177556f8e","tarball":"https://registry.npmjs.org/@arshadpakkali/react-media-recorder/-/react-media-recorder-1.7.1.tgz","fileCount":6,"unpackedSize":22697,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD6m8qhod4UxWSM3FUxwfosk4NrthygM+a75lHkZeYQ8gIgfSCscbKDzdyiBoRHcUUf2l2LI/8SCnMngZP6UmjUgfo="}]},"_npmUser":{"name":"arshadpakkali","email":"arshadpakkali@gmail.com"},"directories":{},"maintainers":[{"name":"arshadpakkali","email":"arshadpakkali@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-media-recorder_1.7.1_1740567971964_0.8781929081534654"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-26T11:06:11.891Z","1.7.1":"2025-02-26T11:06:12.207Z","modified":"2025-02-26T11:06:12.798Z"},"maintainers":[{"name":"arshadpakkali","email":"arshadpakkali@gmail.com"}],"description":"A React component based on MediaRecorder() API to record audio/video streams","homepage":"https://github.com/arshadpakkali/react-media-recorder.git","keywords":["react","recorder","voice recording","video recording","media recording","getusermedia","MediaRecorder","getDisplayMedia","screen recorder","video recorder","audio recorder"],"repository":{"type":"git","url":"git+https://github.com/arshadpakkali/react-media-recorder.git"},"author":{"name":"Arshad Pakkali"},"bugs":{"url":"https://github.com/arshadpakkali/react-media-recorder.git"},"license":"MIT","readme":"Just a fork of react-media-recorder with `wav` fixed\n\n# react-media-recorder :o2: :video_camera: :microphone: :computer:\n\n`react-media-recorder` is a fully typed react component with render prop, or a react hook, that can be used to:\n\n- Record audio/video\n- Record screen\n\nusing [MediaRecorder API](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder).\n\n## Installation\n\n```\nnpm i react-media-recorder\n```\n\nor\n\n```\nyarn add react-media-recorder\n```\n\n## Usage\n\n```javascript\nimport { ReactMediaRecorder } from \"react-media-recorder\";\n\nconst RecordView = () => (\n  <div>\n    <ReactMediaRecorder\n      video\n      render={({ status, startRecording, stopRecording, mediaBlobUrl }) => (\n        <div>\n          <p>{status}</p>\n          <button onClick={startRecording}>Start Recording</button>\n          <button onClick={stopRecording}>Stop Recording</button>\n          <video src={mediaBlobUrl} controls autoPlay loop />\n        </div>\n      )}\n    />\n  </div>\n);\n```\n\nSince `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.\n\n## Usage with react hooks\n\n```javascript\nimport { useReactMediaRecorder } from \"react-media-recorder\";\n\nconst RecordView = () => {\n  const { status, startRecording, stopRecording, mediaBlobUrl } =\n    useReactMediaRecorder({ video: true });\n\n  return (\n    <div>\n      <p>{status}</p>\n      <button onClick={startRecording}>Start Recording</button>\n      <button onClick={stopRecording}>Stop Recording</button>\n      <video src={mediaBlobUrl} controls autoPlay loop />\n    </div>\n  );\n};\n```\n\nThe hook receives an object as argument with the same ReactMediaRecorder options / props (except the `render` function).\n\n### Options / Props\n\n#### audio\n\nCan be either a boolean value or a [MediaTrackConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) object.\n\ntype: `boolean` or `object`  \ndefault: `true`\n\n#### blobPropertyBag\n\n[From MDN](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob):  \nAn optional `BlobPropertyBag` dictionary which may specify the following two attributes (for the `mediaBlob`):\n\n- `type`, that represents the MIME type of the content of the array that will be put in the blob.\n- `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\n\ntype: `object`  \ndefault:  \nif `video` is enabled,\n\n```\n{\n   type: \"video/mp4\"\n}\n```\n\nif there's only `audio` is enabled,\n\n```\n{\n  type: \"audio/wav\"\n}\n```\n\n#### customMediaStream  \n\nA media stream object itself (optional)\n\n#### mediaRecorderOptions\n\nAn 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.\n\ntype: `object`  \ndefault: `{}`\n\n#### onStart\n\nA `function` that would get invoked when the MediaRecorder starts.\n\ntype: `function()`  \ndefault: `() => null`\n\n#### onStop\n\nA `function` that would get invoked when the MediaRecorder stops. It'll provide the blob and the blob url as its params.\n\ntype: `function(blobUrl: string, blob: Blob)`  \ndefault: `() => null`  \n\n#### stopStreamsOnStop\n\nWhether to stop all streams on stop. By default, its `true`\n\n#### render\n\nA `function` which accepts an object containing fields: `status`, `startRecording`, `stopRecording` and`mediaBlob`. This function would return a react element/component.\n\ntype: `function`  \ndefault: `() => null`\n\n#### screen\n\nA `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..)\n\n#### video\n\nCan be either a boolean value or a [MediaTrackConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) object.\n\ntype: `boolean` or `object`  \ndefault: `false`\n\n#### askPermissionOnMount\n\nA boolean value. If set to `true`, will ask media permission on mounting.\n\ntype: `boolean`\ndefault: `false`\n\n### Props available in the `render` function\n\n#### error\n\nA string enum. Possible values:\n\n- `media_aborted`\n- `permission_denied`\n- `no_specified_media_found`\n- `media_in_use`\n- `invalid_media_constraints`\n- `no_constraints`\n- `recorder_error`\n\n#### status\n\nA string `enum`. Possible values:\n\n- `media_aborted`\n- `permission_denied`\n- `no_specified_media_found`\n- `media_in_use`\n- `invalid_media_constraints`\n- `no_constraints`\n- `recorder_error`\n- `idle`\n- `acquiring_media`\n- `recording`\n- `stopping`\n- `stopped`\n\n#### startRecording\n\nA `function`, which starts recording when invoked.\n\n#### pauseRecording\n\nA `function`, which pauses the recording when invoked.\n\n#### resumeRecording\n\nA `function`, which resumes the recording when invoked.\n\n#### stopRecording\n\nA `function`, which stops recording when invoked.\n\n#### muteAudio\n\nA `function`, which mutes the audio tracks when invoked.\n\n#### unmuteAudio\n\nA `function` which unmutes the audio tracks when invoked.\n\n#### mediaBlobUrl\n\nA `blob` url that can be wired to an `<audio />`, `<video />` or an `<a />` element.\n\n#### clearBlobUrl\n\nA `function` which clears the existing generated blob url (if any) and resets the workflow to its initial `idle` state.\n\n#### isMuted\n\nA boolean prop that tells whether the audio is muted or not.\n\n#### previewStream\n\nIf you want to create a live-preview of the video to the user, you can use this _stream_ and attach it to a `<video />` element. Please note that this is a **muted stream**. This is by design to get rid of internal microphone feedbacks on machines like laptop.\n\nFor example:\n\n```tsx\nconst VideoPreview = ({ stream }: { stream: MediaStream | null }) => {\n  const videoRef = useRef<HTMLVideoElement>(null);\n\n  useEffect(() => {\n    if (videoRef.current && stream) {\n      videoRef.current.srcObject = stream;\n    }\n  }, [stream]);\n  if (!stream) {\n    return null;\n  }\n  return <video ref={videoRef} width={500} height={500} autoPlay controls />;\n};\n\nconst App = () => (\n  <ReactMediaRecorder\n    video\n    render={({ previewStream }) => {\n      return <VideoPreview stream={previewStream} />;\n    }}\n  />\n);\n```\n\n#### previewAudioStream\n\nIf you want access to the live audio stream for use in sound visualisations, you can use this _stream_ as your audio source and extract data from it using the [AudioContext](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext) and [AnalyzerNode](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode) features of the Web Audio API. Some javascript examples of how to do this can be found [here](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API).\n\n## Contributing\n\nFeel free to submit a PR if you found a bug (I might've missed many! :grinning:) or if you want to enhance it further.\n\nThanks!. Happy Recording!\n","readmeFilename":"README.md"}