Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-media-recorder

Package Overview
Dependencies
Maintainers
1
Versions
38
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-media-recorder - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

2

lib/index.js

@@ -1,1 +0,1 @@

"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=_interopDefault(require("react")),PropTypes=_interopDefault(require("prop-types"));function checkMediaConstraint(e){let t=Object.keys(e)[0],s=e[t];if(constraintl&&"boolean"!=typeof s&&"object"!=typeof s)return new Error(`The ${t} prop must be either a boolean or MediaTrackConstraints object. Please check your React Media Recorder component`);if("object"==typeof s){let e=navigator.mediaDevices.getSupportedConstraints(),i=Object.keys(s).filter(t=>!e[t]);if(i.length>0)return new Error(`The constraint(s) [${i.join(",")}] which you've supplied to the ${t} prop are unsupported in this browser`)}}class ReactMediaRecorder extends React.Component{constructor(e){if(super(e),_initialiseProps.call(this),!window.MediaRecorder)throw new Error("React Media Recorder: Unsupported browser");let{audio:t,video:s,blobPropertyBag:i=(s?{type:"video/mp4"}:{type:"audio/wav"})}=e;Object.prototype.hasOwnProperty.call(e,"muted")&&console.warn("React Media Recorder: Please use mute() and unmute() functions available in the render method for muting/unmuting audio. mute prop will be deprecated soon."),e.muted&&(this.state.status+="_muted"),this.requiredMedia={audio:"boolean"==typeof t?!!t:t,video:"boolean"==typeof s?!!s:s},this.blobPropertyBag=i}}ReactMediaRecorder.propTypes={audio:({audio:e})=>checkMediaConstraint({audio:e}),video:({video:e})=>checkMediaConstraint({video:e},!0),delay:PropTypes.number,muted:({muted:e,audio:t,video:s})=>"boolean"!=typeof e?new Error("Invalid prop: muted should be a boolan value. Please check your react-media-recorder component declaration"):e&&t&&!s?new Error("It looks like you tried to mute as well as record audio. Please check your react-media-recorder component declaration"):void 0,render:PropTypes.func.isRequired,blobPropertyBag:PropTypes.object},ReactMediaRecorder.defaultProps={audio:!0,muted:!1,delay:0,render:()=>null};var _initialiseProps=function(){this.state={status:"idle"},this.chunks=[],this.componentDidMount=(async()=>{const e=await this.getMediaStream();e?(e.getAudioTracks().forEach(e=>e.enabled=!this.props.muted),this.stream=e):this.setState({status:"permission_denied"})}),this.componentDidUpdate=(e=>{if(e.muted!==this.props.muted&&this.stream.getAudioTracks().forEach(e=>e.enabled=!this.props.muted),this.stream){const e=!this.stream.getAudioTracks().every(e=>e.enabled);e&&!this.state.status.includes("muted")&&this.setState(e=>({status:`${this.state.status}_muted`})),!e&&this.state.status.includes("muted")&&this.setState(e=>({status:this.state.status.replace("_muted","")}))}}),this.componentWillUnmount=(()=>{this.flush()}),this.flush=(()=>{this.stream&&this.stream.getTracks().forEach(e=>e.stop()),this.mediaRecorder=null,this.stream=null,this.chunks=[]}),this.muteAudio=(e=>{this.stream&&this.stream.getAudioTracks().every(t=>t.enabled===e)&&(this.stream.getAudioTracks().forEach(t=>t.enabled=!e),this.setState(this.state))}),this.getMediaStream=(async()=>{try{return await window.navigator.mediaDevices.getUserMedia(this.requiredMedia)}catch(e){return!1}}),this.onRecordingStop=(()=>{const e=new Blob(this.chunks,this.blobPropertyBag),t=URL.createObjectURL(e);this.setState({mediaBlob:t})}),this.onRecordingActive=(({data:e})=>{this.chunks.push(e)}),this.initMediaRecorder=(e=>{const t=new MediaRecorder(e);return t.ondataavailable=this.onRecordingActive,t.onstop=this.onRecordingStop,t.onerror=(()=>this.setState({status:"recorder_error"})),t}),this.startRecording=(async()=>{if(!this.stream||this.stream&&!this.stream.active){const e=await this.getMediaStream();if(!e)return void this.setState({status:"permission_denied"});this.stream=e}this.mediaRecorder=this.initMediaRecorder(this.stream),this.chunks=[],this.setState({mediaBlob:null}),setTimeout(()=>{this.mediaRecorder.start(),this.setState({status:"recording"})},this.props.delay),this.props.delay>0&&this.setState({status:"delayed_start"})}),this.pauseRecording=(()=>{this.mediaRecorder&&"recording"===this.mediaRecorder.state&&(this.setState({status:"paused"}),this.mediaRecorder.pause())}),this.resumeRecording=(()=>{this.mediaRecorder&&"paused"===this.mediaRecorder.state&&(this.setState({status:"recording"}),this.mediaRecorder.resume())}),this.stopRecording=(()=>{this.mediaRecorder&&"inactive"!==this.mediaRecorder.state&&(this.mediaRecorder.stop(),this.mediaRecorder=null,this.setState({status:"stopped"}))}),this.render=(()=>this.props.render({status:this.state.status,startRecording:this.startRecording,stopRecording:this.stopRecording,pauseRecording:this.pauseRecording,resumeRecording:this.resumeRecording,muteAudio:()=>this.muteAudio(!0),unmuteAudio:()=>this.muteAudio(!1),mediaBlob:this.state.mediaBlob}))};module.exports=ReactMediaRecorder;
"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=_interopDefault(require("react")),PropTypes=_interopDefault(require("prop-types"));function checkMediaConstraint(e){let t=Object.keys(e)[0],s=e[t];if(constraintl&&"boolean"!=typeof s&&"object"!=typeof s)return new Error(`The ${t} prop must be either a boolean or MediaTrackConstraints object. Please check your React Media Recorder component`);if("object"==typeof s){let e=navigator.mediaDevices.getSupportedConstraints(),r=Object.keys(s).filter(t=>!e[t]);if(r.length>0)return new Error(`The constraint(s) [${r.join(",")}] which you've supplied to the ${t} prop are unsupported in this browser`)}}let errors={AbortError:"media_aborted",NotAllowedError:"permission_denied",NotFoundError:"no_specified_media_found",NotReadableError:"media_in_use",OverconstrainedError:"invalid_media_constraints",TypeError:"no_constraints"};class ReactMediaRecorder extends React.Component{constructor(e){if(super(e),_initialiseProps.call(this),!window.MediaRecorder)throw new Error("React Media Recorder: Unsupported browser");let{audio:t,video:s,blobPropertyBag:r=(s?{type:"video/mp4"}:{type:"audio/wav"})}=e;Object.prototype.hasOwnProperty.call(e,"muted")&&console.warn("React Media Recorder: Please use mute() and unmute() functions available in the render method for muting/unmuting audio. mute prop will be deprecated soon."),e.muted&&(this.state.status+="_muted"),this.requiredMedia={audio:"boolean"==typeof t?!!t:t,video:"boolean"==typeof s?!!s:s},this.blobPropertyBag=r}}ReactMediaRecorder.propTypes={audio:({audio:e})=>checkMediaConstraint({audio:e}),video:({video:e})=>checkMediaConstraint({video:e},!0),delay:PropTypes.number,muted:({muted:e,audio:t,video:s})=>"boolean"!=typeof e?new Error("Invalid prop: muted should be a boolan value. Please check your react-media-recorder component declaration"):e&&t&&!s?new Error("It looks like you tried to mute as well as record audio. Please check your react-media-recorder component declaration"):void 0,render:PropTypes.func.isRequired,blobPropertyBag:PropTypes.object},ReactMediaRecorder.defaultProps={audio:!0,muted:!1,delay:0,render:()=>null};var _initialiseProps=function(){this.state={status:"idle"},this.chunks=[],this.componentDidMount=(async()=>{const e=await this.getMediaStream();e&&(e.getAudioTracks().forEach(e=>e.enabled=!this.props.muted),this.stream=e)}),this.componentDidUpdate=(e=>{if(e.muted!==this.props.muted&&this.stream.getAudioTracks().forEach(e=>e.enabled=!this.props.muted),this.stream){const e=!this.stream.getAudioTracks().every(e=>e.enabled);e&&!this.state.status.includes("muted")&&this.setState(e=>({status:`${this.state.status}_muted`})),!e&&this.state.status.includes("muted")&&this.setState(e=>({status:this.state.status.replace("_muted","")}))}}),this.componentWillUnmount=(()=>{this.flush()}),this.flush=(()=>{this.stream&&this.stream.getTracks().forEach(e=>e.stop()),this.mediaRecorder=null,this.stream=null,this.chunks=[]}),this.muteAudio=(e=>{this.stream&&this.stream.getAudioTracks().every(t=>t.enabled===e)&&(this.stream.getAudioTracks().forEach(t=>t.enabled=!e),this.setState(this.state))}),this.getMediaStream=(async()=>{try{return await window.navigator.mediaDevices.getUserMedia(this.requiredMedia)}catch(e){this.setState({status:errors[e.name]})}}),this.onRecordingStop=(()=>{const e=new Blob(this.chunks,this.blobPropertyBag),t=URL.createObjectURL(e);this.setState({mediaBlob:t})}),this.onRecordingActive=(({data:e})=>{this.chunks.push(e)}),this.initMediaRecorder=(e=>{const t=new MediaRecorder(e);return t.ondataavailable=this.onRecordingActive,t.onstop=this.onRecordingStop,t.onerror=(()=>this.setState({status:"recorder_error"})),t}),this.startRecording=(async()=>{if(!this.stream||this.stream&&!this.stream.active){const e=await this.getMediaStream();if(!e)return;this.stream=e}this.mediaRecorder=this.initMediaRecorder(this.stream),this.chunks=[],this.setState({mediaBlob:null}),setTimeout(()=>{this.mediaRecorder.start(),this.setState({status:"recording"})},this.props.delay),this.props.delay>0&&this.setState({status:"delayed_start"})}),this.pauseRecording=(()=>{this.mediaRecorder&&"recording"===this.mediaRecorder.state&&(this.setState({status:"paused"}),this.mediaRecorder.pause())}),this.resumeRecording=(()=>{this.mediaRecorder&&"paused"===this.mediaRecorder.state&&(this.setState({status:"recording"}),this.mediaRecorder.resume())}),this.stopRecording=(()=>{this.mediaRecorder&&"inactive"!==this.mediaRecorder.state&&(this.mediaRecorder.stop(),this.mediaRecorder=null,this.setState({status:"stopped"}))}),this.render=(()=>this.props.render({status:this.state.status,startRecording:this.startRecording,stopRecording:this.stopRecording,pauseRecording:this.pauseRecording,resumeRecording:this.resumeRecording,muteAudio:()=>this.muteAudio(!0),unmuteAudio:()=>this.muteAudio(!1),mediaBlob:this.state.mediaBlob}))};module.exports=ReactMediaRecorder;
{
"name": "react-media-recorder",
"version": "0.5.0",
"version": "0.6.0",
"description":

@@ -5,0 +5,0 @@ "A React component based on MediaRecorder() API to record audio/video streams",

@@ -48,6 +48,11 @@ # react-media-recorder :o2: :video_camera: :microphone:

* `idle`
* `permission_denied`
* `recording`
* `paused`
* `stopped`
* `no_constraints`
* `invalid_media_constraints`
* `no_specified_media_found`
* `media_in_use`
* `media_aborted`
* `permission_denied`
* `delayed_start` (_only if a `delay` has been set_) [_deprecating soon_]

@@ -54,0 +59,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc