react-media-recorder - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1

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,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;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _regenerator=require("babel-runtime/regenerator"),_regenerator2=_interopRequireDefault(_regenerator),_asyncToGenerator2=require("babel-runtime/helpers/asyncToGenerator"),_asyncToGenerator3=_interopRequireDefault(_asyncToGenerator2),_classCallCheck2=require("babel-runtime/helpers/classCallCheck"),_classCallCheck3=_interopRequireDefault(_classCallCheck2),_possibleConstructorReturn2=require("babel-runtime/helpers/possibleConstructorReturn"),_possibleConstructorReturn3=_interopRequireDefault(_possibleConstructorReturn2),_inherits2=require("babel-runtime/helpers/inherits"),_inherits3=_interopRequireDefault(_inherits2),_typeof2=require("babel-runtime/helpers/typeof"),_typeof3=_interopRequireDefault(_typeof2),_react=require("react"),_react2=_interopRequireDefault(_react),_propTypes=require("prop-types"),_propTypes2=_interopRequireDefault(_propTypes);function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function checkMediaConstraint(a){var b=Object.keys(a)[0],c=a[b];if(c&&"boolean"!=typeof c&&"object"!==("undefined"==typeof c?"undefined":(0,_typeof3.default)(c)))return new Error("The "+b+" prop must be either a boolean or MediaTrackConstraints object. Please check your React Media Recorder component");if("object"===("undefined"==typeof c?"undefined":(0,_typeof3.default)(c))){var d=navigator.mediaDevices.getSupportedConstraints(),e=Object.keys(c).filter(function(a){return!d[a]});if(0<e.length)return new Error("The constraint(s) ["+e.join(",")+"] which you've supplied to the "+b+" prop are unsupported in this browser")}}var errors={AbortError:"media_aborted",NotAllowedError:"permission_denied",NotFoundError:"no_specified_media_found",NotReadableError:"media_in_use",OverconstrainedError:"invalid_media_constraints",TypeError:"no_constraints"},ReactMediaRecorder=function(a){function b(a){(0,_classCallCheck3.default)(this,b);var c=(0,_possibleConstructorReturn3.default)(this,(b.__proto__||Object.getPrototypeOf(b)).call(this,a));if(_initialiseProps.call(c),!window.MediaRecorder)throw new Error("React Media Recorder: Unsupported browser");var d=a.audio,e=a.video,f=a.blobPropertyBag,g=void 0===f?e?{type:"video/mp4"}:{type:"audio/wav"}:f;return Object.prototype.hasOwnProperty.call(a,"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."),a.muted&&(c.state.status+="_muted"),c.requiredMedia={audio:"boolean"==typeof d?!!d:d,video:"boolean"==typeof e?!!e:e},c.blobPropertyBag=g,c}return(0,_inherits3.default)(b,a),b}(_react2.default.Component);ReactMediaRecorder.propTypes={audio:function c(a){var b=a.audio;return checkMediaConstraint({audio:b})},video:function c(a){var b=a.video;return checkMediaConstraint({video:b},!0)},delay:_propTypes2.default.number,muted:function e(a){var b=a.muted,c=a.audio,d=a.video;return"boolean"==typeof b?b&&c&&!d?new Error("It looks like you tried to mute as well as record audio. Please check your react-media-recorder component declaration"):void 0:new Error("Invalid prop: muted should be a boolan value. Please check your react-media-recorder component declaration")},render:_propTypes2.default.func.isRequired,blobPropertyBag:_propTypes2.default.object,whenStopped:_propTypes2.default.func},ReactMediaRecorder.defaultProps={audio:!0,muted:!1,delay:0,render:function a(){return null},whenStopped:function a(){return null}};var _initialiseProps=function(){var a=this;this.state={status:"idle"},this.chunks=[],this.componentDidMount=(0,_asyncToGenerator3.default)(_regenerator2.default.mark(function b(){var c;return _regenerator2.default.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return b.next=2,a.getMediaStream();case 2:c=b.sent,c&&(c.getAudioTracks().forEach(function(b){return b.enabled=!a.props.muted}),a.stream=c);case 4:case"end":return b.stop();}},b,a)})),this.componentDidUpdate=function(b){if(b.muted!==a.props.muted&&a.stream.getAudioTracks().forEach(function(b){return b.enabled=!a.props.muted}),a.stream){var c=!a.stream.getAudioTracks().every(function(a){return a.enabled});c&&!a.state.status.includes("muted")&&a.setState(function(){return{status:a.state.status+"_muted"}}),!c&&a.state.status.includes("muted")&&a.setState(function(){return{status:a.state.status.replace("_muted","")}})}},this.componentWillUnmount=function(){a.flush()},this.flush=function(){a.stream&&a.stream.getTracks().forEach(function(a){return a.stop()}),a.mediaRecorder=null,a.stream=null,a.chunks=[]},this.muteAudio=function(b){a.stream&&a.stream.getAudioTracks().every(function(a){return a.enabled===b})&&(a.stream.getAudioTracks().forEach(function(a){return a.enabled=!b}),a.setState(a.state))},this.getMediaStream=(0,_asyncToGenerator3.default)(_regenerator2.default.mark(function b(){var c;return _regenerator2.default.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return b.prev=0,b.next=3,window.navigator.mediaDevices.getUserMedia(a.requiredMedia);case 3:return c=b.sent,b.abrupt("return",c);case 7:b.prev=7,b.t0=b["catch"](0),a.setState({status:errors[b.t0.name]});case 10:case"end":return b.stop();}},b,a,[[0,7]])})),this.onRecordingStop=function(){var b=new Blob(a.chunks,a.blobPropertyBag),c=URL.createObjectURL(b);a.props.whenStopped&&a.props.whenStopped(c),a.setState({mediaBlob:c,status:"stopped"})},this.onRecordingActive=function(b){var c=b.data;a.chunks.push(c)},this.initMediaRecorder=function(b){var c=new MediaRecorder(b);return c.ondataavailable=a.onRecordingActive,c.onstop=a.onRecordingStop,c.onerror=function(){return a.setState({status:"recorder_error"})},c},this.startRecording=(0,_asyncToGenerator3.default)(_regenerator2.default.mark(function b(){var c;return _regenerator2.default.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:if(a.stream&&(!a.stream||a.stream.active)){b.next=9;break}return b.next=3,a.getMediaStream();case 3:if(c=b.sent,!c){b.next=8;break}a.stream=c,b.next=9;break;case 8:return b.abrupt("return");case 9:a.mediaRecorder=a.initMediaRecorder(a.stream),a.chunks=[],a.setState({mediaBlob:null}),setTimeout(function(){a.mediaRecorder.start(),a.setState({status:"recording"})},a.props.delay),0<a.props.delay&&a.setState({status:"delayed_start"});case 14:case"end":return b.stop();}},b,a)})),this.pauseRecording=function(){a.mediaRecorder&&"recording"===a.mediaRecorder.state&&(a.setState({status:"paused"}),a.mediaRecorder.pause())},this.resumeRecording=function(){a.mediaRecorder&&"paused"===a.mediaRecorder.state&&(a.setState({status:"recording"}),a.mediaRecorder.resume())},this.stopRecording=function(){a.mediaRecorder&&"inactive"!==a.mediaRecorder.state&&(a.mediaRecorder.stop(),a.mediaRecorder=null)},this.render=function(){return a.props.render({status:a.state.status,startRecording:a.startRecording,stopRecording:a.stopRecording,pauseRecording:a.pauseRecording,resumeRecording:a.resumeRecording,muteAudio:function b(){return a.muteAudio(!0)},unmuteAudio:function b(){return a.muteAudio(!1)},mediaBlob:a.state.mediaBlob})}};exports.default=ReactMediaRecorder;

package.json

 {
   "name": "react-media-recorder",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description":
@@ -8,3 +8,3 @@ "A React component based on MediaRecorder() API to record audio/video streams",
   "scripts": {
-    "build": "rollup -c",
+    "build": "babel src -d ./lib",
     "prepublishOnly": "npm run build"
@@ -35,10 +35,9 @@ },
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.7.0",
+    "babel-preset-minify": "^0.4.3",
     "babel-preset-react": "^6.24.1",
     "prop-types": "^15.6.1",
-    "react": "^16.3.2",
-    "rollup": "^0.58.2",
-    "rollup-plugin-babel": "^3.0.4",
-    "rollup-plugin-uglify": "^3.0.0"
+    "react": "^16.3.2"
   }
 }

New alerts

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13628

increased by17.92%

Dev dependency count

10

decreased by-9.09%

Worsened metrics

Lines of code

1

decreased by-95.24%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes