{"_id":"@dragan1810/use-media-recorder","_rev":"2-5da2d188575493f90778bebde6af635f","name":"@dragan1810/use-media-recorder","dist-tags":{"latest":"0.0.2"},"versions":{"1.0.0":{"name":"@dragan1810/use-media-recorder","version":"1.0.0","description":"A React hook based on MediaRecorder() API to record audio/video streams","main":"index.js","scripts":{"build":"tsc && jsmin -o ./lib/index.js ./lib/index.js","prepublishOnly":"npm run build"},"repository":{"type":"git"},"keywords":["react","recorder","voice recording","video recording","media recording","getusermedia","MediaRecorder","getDisplayMedia","screen recorder","video recorder","audio recorder"],"author":{"name":"Dragan Novakovic"},"license":"MIT","homepage":"https://github.com/Dragan1810/react-media-recorder","devDependencies":{"@types/dom-mediacapture-record":"^1.0.2","@types/node":"^12.12.11","@types/react":"^16.9.11","jsmin":"^1.0.1","typescript":"^3.8.3"},"types":"./lib/index.d.ts","gitHead":"8c7178d9b5a673e29fe9ddf36e85c11c7774b478","_id":"@dragan1810/use-media-recorder@1.0.0","_nodeVersion":"10.19.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-jVXQcYa6hz5yjG4uCB433OZt+ucKQ94BIUWnCqikKTpx6YrT4X781r2VcSArir45EEo1jdB/u74YRpLx2eFVtQ==","shasum":"8d34b5cc7f34b1ef3af45541105323166755e199","tarball":"https://registry.npmjs.org/@dragan1810/use-media-recorder/-/use-media-recorder-1.0.0.tgz","fileCount":6,"unpackedSize":16733,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemL02CRA9TVsSAnZWagAAaU0QAJwazFxHTP1t2WCHr3Fo\nZHLsFXgZfxyUdNu6ZeoZrwaulxOE/Kdwh5TY+lIScsD6sbiGDChqdW6kwQIz\nY5iyyt0rmkwZ/xBm3O+lmStqvCzNmwmnXsk1PYKn38VD72OMby8ujUNuNTrg\nTQjw7pGplp6PA8DtwxzFTVtNZd6XnpOmHFJFEvKgKABcGgC9VzXobsMjbFtV\n2cLpXeOSulLAqD+yOmalC06m1Oy4ptWUR32KI/sKpgmkSt0Z2YBeCH8mZT65\nzQDcX0z8N5k2+j6I92jQofoe8Sd4MLGe2+CfRXtaUlgQHqn3fvwoXb7S8WRh\nG0PBiG9A/BwfYWydalHfCssWYFO8DBchoziTESzOO3yRhtibLaliT3QanU7a\nQVNvbx/Dv2gxMnYqe9DbGQ/mwFIECp4EBKvVnmHGE0JVtu0Yvf0xP/oUKF/x\nfLGmaZMTmgsDq/559ssloS6f9CO1glaRl138QxJ0WLyas+EwbVfC9iLRR6y5\nft6DuVFagESopibXM1L1x+Qtt1GUmBk6QUjdYubXJXHgoUNhoodlcEwKt3NO\nUgQ/ZIpQEeiV7mrmt6FNBS/7AYJ1gS/k7VMpLjsiluU5hT7yX35gc8ShgPGU\ndRkNzQp7I7tc8X0GlS/bmfA/z1kMCAGSYGS+Rt2D+Hw2EK0Mg7W/XNz8d4aV\nlYLI\r\n=q48a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrzuByTCLB6oQwhYqMq6dMPad9E6Ibop2URGIEpnJR6gIhAK72F/E+B002DrWeVLlPTDggcrwJHIalX1Vu5YMrNTv0"}]},"maintainers":[{"name":"dragan1810","email":"d.novakovic1810@yahoo.com"}],"_npmUser":{"name":"dragan1810","email":"d.novakovic1810@yahoo.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-media-recorder_1.0.0_1587068213490_0.2771833847931642"},"_hasShrinkwrap":false},"0.0.2":{"name":"@dragan1810/use-media-recorder","version":"0.0.2","description":"A React hook based on MediaRecorder() API to record audio/video streams and Polyfill","main":"index.js","scripts":{"build":"tsc && jsmin -o ./lib/index.js ./lib/index.js","prepublishOnly":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/Dragan1810/react-media-recorder.git"},"keywords":["react","recorder","voice recording","video recording","media recording","getusermedia","MediaRecorder","getDisplayMedia","screen recorder","video recorder","audio recorder"],"author":{"name":"Dragan Novakovic"},"license":"MIT","bugs":{"url":"https://github.com/Dragan1810/react-media-recorder/issues"},"homepage":"https://github.com/Dragan1810/react-media-recorder#readme","devDependencies":{"@types/dom-mediacapture-record":"^1.0.2","@types/node":"^12.12.11","@types/react":"^16.9.11","jsmin":"^1.0.1","typescript":"^3.8.3"},"types":"./lib/index.d.ts","gitHead":"3994c26aa21e2b530ab8acbebcf689eba548ef8d","_id":"@dragan1810/use-media-recorder@0.0.2","_nodeVersion":"10.19.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-XS2DpdF6jsM4xL9t0hcaUebcZskqaR5OLeI+Ywu5bTloM8Fq12h0M3wwB8asTX5LEICxN7I+v5cYwd+PIOrvqQ==","shasum":"56c4bf87b253d3be8ccf61f9bcbdbd2dd7be2d24","tarball":"https://registry.npmjs.org/@dragan1810/use-media-recorder/-/use-media-recorder-0.0.2.tgz","fileCount":6,"unpackedSize":32644,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemXR6CRA9TVsSAnZWagAAYGgP/iqOWgVpO06YEx8oA0f9\n0aus13e13fRXXA7eVYQ4jIRoUrvrmg2Zmuo7omEMBRkRBsOOkwriIy2/JgK5\nxCjaaCrWFRzMsLAAaPeL4nDeQrLBnE85nif1Ho8tEgnkeoTK/41eY+Oz9AtB\nqPJf8wNQqeTYuTtFyNQUn+L2CXBy4XQwsoT8Bl5smUE32DBcFstJupdZLdvc\nAArfawVVXyr6rpmTSyph9kb8Va5SYvlKGs8y8NphfVSx7CpbJdVRw/zTkmiY\ng7LyAEV8//5BsSWKmI0KEkOwCdFjKQVJ1ShbGOORHZfEfP1jKAgC4jbcjx+n\nU58oAfK9tJCSRXJVK7s0bB67zBOMu7yXmxkTHKF+NshdAmyecsTZThzHPAVo\neRKTlW4rZ2EVxAqo6zugFCga8VmJREDNke2qRhR/GuOVgUiY8qcNlCmHRPLa\nPeV6PyZGdv/DUwgBabUJtJlvPXZjbb5+R+rOBFhXZcVK99n3WPIz66t51bq6\nMbqFTLWZF1JiqE8o4VeXVgzoaTeeTwR9v2mtj9o04GCVKl3FxP5vurgqEBpF\n7eOKHM/G/GsCmCUTpKnA6dn6erXGP2N4yEnDeCKwLOakXSKulL4iCP37Xyxi\nJL9KFMp3GNIDOcO+215FQ7dbJaGsg8RbPQNOh0+5Mpy6GwJV3YGNeHDxgqkB\nKlRt\r\n=hBjB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCf7Ld45wtszgGcuxCCWWi5QCMLK5gQy2N95wqnCSXtfwIgWIdsYu3y77G1PCV9caL5lDX2U9PyNZtcPM4NCiSHuhA="}]},"maintainers":[{"name":"dragan1810","email":"d.novakovic1810@yahoo.com"}],"_npmUser":{"name":"dragan1810","email":"d.novakovic1810@yahoo.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-media-recorder_0.0.2_1587115130197_0.9659697627481558"},"_hasShrinkwrap":false}},"time":{"created":"2020-04-16T20:16:53.458Z","1.0.0":"2020-04-16T20:16:53.663Z","modified":"2022-04-05T05:36:06.217Z","0.0.2":"2020-04-17T09:18:50.346Z"},"maintainers":[{"name":"dragan1810","email":"d.novakovic1810@yahoo.com"}],"description":"A React hook based on MediaRecorder() API to record audio/video streams and Polyfill","homepage":"https://github.com/Dragan1810/react-media-recorder#readme","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/Dragan1810/react-media-recorder.git"},"author":{"name":"Dragan Novakovic"},"license":"MIT","readme":"# react-media-recorder :o2: :video_camera: :microphone: :computer:\r\n\r\n`use-media-recorder` is a fully typed react hook that can be used to:\r\n\r\n- Record audio/video\r\n- Record screen\r\n- Polyfiled audio for Safari\r\n\r\nusing [MediaRecorder API](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder).\r\n* forked from react-media-recorder\r\n\r\n## Installation\r\n\r\n```\r\nnpm i @dragan1810/use-media-recorder\r\n```\r\n\r\n\r\n## Usage\r\n\r\n```javascript\r\nimport { useReactMediaRecorder } from \"@dragan1810/use-media-recorder\";\r\n\r\nconst RecordView = () => {\r\n    const {status, error, startRecording, stopRecording, mediaBlobUrl, mediaBlob} = useReactMediaRecorder({audio:true})\r\n\r\n  return (\r\n        <div>\r\n          <p>{status}</p>\r\n          <button onClick={startRecording}>Start Recording</button>\r\n          <button onClick={stopRecording}>Stop Recording</button>\r\n          <video src={mediaBlobUrl} controls autoplay loop />\r\n        </div>\r\n  )\r\n}\r\n```\r\n\r\n### Options / Props\r\n\r\n#### audio\r\n\r\nCan be either a boolean value or a [MediaTrackConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) object.\r\n\r\ntype: `boolean` or `object`  \r\ndefault: `true`\r\n\r\n#### blobPropertyBag\r\n\r\n[From MDN](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob):  \r\nAn optional `BlobPropertyBag` dictionary which may specify the following two attributes (for the `mediaBlob`):\r\n\r\n- `type`, that represents the MIME type of the content of the array that will be put in the blob.\r\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\r\n\r\ntype: `object`  \r\ndefault:  \r\nif `video` is enabled,\r\n\r\n```\r\n{\r\n   type: \"video/mp4\"\r\n}\r\n```\r\n\r\nif there's only `audio` is enabled,\r\n\r\n```\r\n{\r\n  type: \"audio/wav\"\r\n}\r\n```\r\n\r\n#### mediaRecorderOptions\r\n\r\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.\r\n\r\ntype: `object`  \r\ndefault: `{}`\r\n\r\n#### onStop\r\n\r\nA `function` that would get invoked when the MediaRecorder stops. It'll provide the blob url as its param.\r\n\r\ntype: `function(blobUrl: string)`  \r\ndefault: `() => null`\r\n\r\n#### render\r\n\r\nA `function` which accepts an object containing fields: `status`, `startRecording`, `stopRecording` and`mediaBlob`. This function would return a react element/component.\r\n\r\ntype: `function`  \r\ndefault: `() => null`\r\n\r\n#### screen\r\n\r\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..)\r\n\r\n#### video\r\n\r\nCan be either a boolean value or a [MediaTrackConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) object.\r\n\r\ntype: `boolean` or `object`  \r\ndefault: `false`\r\n\r\n### Props available in the `render` function\r\n\r\n#### error\r\n\r\nA string enum. Possible values:\r\n\r\n- `media_aborted`\r\n- `permission_denied`\r\n- `no_specified_media_found`\r\n- `media_in_use`\r\n- `invalid_media_constraints`\r\n- `no_constraints`\r\n- `recorder_error`\r\n\r\n#### status\r\n\r\nA string `enum`. Possible values:\r\n\r\n- `media_aborted`\r\n- `permission_denied`\r\n- `no_specified_media_found`\r\n- `media_in_use`\r\n- `invalid_media_constraints`\r\n- `no_constraints`\r\n- `recorder_error`\r\n- `idle`\r\n- `acquiring_media`\r\n- `recording`\r\n- `stopping`\r\n- `stopped`\r\n\r\n#### startRecording\r\n\r\nA `function`, which starts recording when invoked.\r\n\r\n#### pauseRecording\r\n\r\nA `function`, which pauses the recording when invoked.\r\n\r\n#### resumeRecording\r\n\r\nA `function`, which resumes the recording when invoked.\r\n\r\n#### stopRecording\r\n\r\nA `function`, which stops recording when invoked.\r\n\r\n#### muteAudio\r\n\r\nA `function`, which mutes the audio tracks when invoked.\r\n\r\n#### unmuteAudio\r\n\r\nA `function` which unmutes the audio tracks when invoked.\r\n\r\n#### mediaBlobUrl\r\n\r\nA `blob` url that can be wired to an `<audio />`, `<video />` or an `<a />` element.\r\n\r\n#### isMuted\r\n\r\nA boolean prop that tells whether the audio is muted or not.\r\n\r\n#### previewStream\r\n\r\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.","readmeFilename":"README.md","bugs":{"url":"https://github.com/Dragan1810/react-media-recorder/issues"}}