react-media-recorder - npm Package Compare versions

Comparing version 0.6.1 to 0.7.0

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(s&&"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;
		"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(s&&"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,whenStopped:PropTypes.func},ReactMediaRecorder.defaultProps={audio:!0,muted:!1,delay:0,render:()=>null,whenStopped:()=>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.props.whenStopped&&this.props.whenStopped(t),this.setState({mediaBlob:t,status:"stopped"})}),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.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;

package.json

		{
		"name": "react-media-recorder",
		"version": "0.6.1",
		"version": "0.7.0",
		"description":
		@@ -5,0 +5,0 @@ "A React component based on MediaRecorder() API to record audio/video streams",

README.md

		@@ -152,2 +152,9 @@ # react-media-recorder :o2: :video_camera: :microphone:

		#### whenStopped(blobUrl)

		Will be invoked when the recording stops. This callback will be invoked with the blobUrl as its params.

		type: `function`
		default: `() => null`

		## Contributing
		@@ -154,0 +161,0 @@

react-media-recorder - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics