react-webcam - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/react-webcam.js

@@ -80,2 +80,8 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
+	  Webcam.prototype.getDefaultProps = function getDefaultProps() {
+	    return {
+	      screenshotFormat: 'image/webp'
+	    };
+	  };
+
 	  _createClass(Webcam, null, [{
@@ -93,4 +99,6 @@ key: 'defaultProps',
 	      audio: _react.PropTypes.bool,
+	      onUserMedia: _react.PropTypes.func,
 	      height: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
-	      width: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string])
+	      width: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
+	      screenshotFormat: _react.PropTypes.oneOf(['image/webp', 'image/png', 'image/jpeg'])
 	    },
@@ -151,3 +159,3 @@ enumerable: true
 	        Webcam.mountedInstances.forEach(function (instance) {
-	          return instance.handleUserMedia(error);
+	          return instance.handleUserMedia(e);
 	        });
@@ -160,11 +168,11 @@ });
 	    } else {
-	      MediaStreamTrack.getSources(function (sourceInfos) {
+	      navigator.mediaDevices.enumerateDevices().then(function (devices) {
 	        var audioSource = null;
 	        var videoSource = null;
 
-	        sourceInfos.forEach(function (sourceInfo) {
-	          if (sourceInfo.kind === 'audio') {
-	            audioSource = sourceInfo.id;
-	          } else if (sourceInfo.kind === 'video') {
-	            videoSource = sourceInfo.id;
+	        devices.forEach(function (device) {
+	          if (device.kind === 'audio') {
+	            audioSource = device.id;
+	          } else if (device.kind === 'video') {
+	            videoSource = device.id;
 	          }
@@ -175,2 +183,3 @@ });
 	      });
+	      // .catch((error) => console.log(error.name + ": " + error.message));
 	    }
@@ -192,2 +201,3 @@
 
+	    this.stream = stream;
 	    this.setState({
@@ -197,2 +207,6 @@ hasUserMedia: true,
 	    });
+
+	    if (this.props.onUserMedia) {
+	      this.props.onUserMedia();
+	    }
 	  };
@@ -205,2 +219,4 @@
 	    if (Webcam.mountedInstances.length === 0 && this.state.hasUserMedia) {
+	      this.stream.stop();
+	      Webcam.userMediaRequested = false;
 	      window.URL.revokeObjectURL(this.state.src);
@@ -211,14 +227,26 @@ }
 	  Webcam.prototype.getScreenshot = function getScreenshot() {
-	    if (!this.state.hasUserMedia) return;
+	    if (!this.state.hasUserMedia) return null;
 
-	    var canvas = document.createElement('canvas');
+	    var canvas = this.getCanvas();
+	    return canvas.toDataURL(this.props.screenshotFormat);
+	  };
+
+	  Webcam.prototype.getCanvas = function getCanvas() {
+	    if (!this.state.hasUserMedia) return null;
+
 	    var video = _react2['default'].findDOMNode(this);
-	    console.log(video);
-	    canvas.height = video.clientHeight;
-	    canvas.width = video.clientWidth;
+	    if (!this.ctx) {
+	      var _canvas = document.createElement('canvas');
+	      _canvas.height = video.clientHeight;
+	      _canvas.width = video.clientWidth;
+	      this.canvas = _canvas;
+	      this.ctx = _canvas.getContext('2d');
+	    }
 
-	    var ctx = canvas.getContext('2d');
+	    var ctx = this.ctx;
+	    var canvas = this.canvas;
+
 	    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
 
-	    return canvas.toDataURL('image/webp');
+	    return canvas;
 	  };
@@ -225,0 +253,0 @@

dist/react-webcam.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.Webcam=t(require("react")):e.Webcam=t(e.React)}(this,function(e){return function(e){function t(r){if(o[r])return o[r].exports;var n=o[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function a(){return!!(navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia)}t.__esModule=!0;var s=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),u=o(1),d=r(u),c=function(e){function t(){n(this,t),e.call(this),this.state={hasUserMedia:!1}}return i(t,e),s(t,null,[{key:"defaultProps",value:{audio:!0,height:480,width:640},enumerable:!0},{key:"propTypes",value:{audio:u.PropTypes.bool,height:u.PropTypes.oneOfType([u.PropTypes.number,u.PropTypes.string]),width:u.PropTypes.oneOfType([u.PropTypes.number,u.PropTypes.string])},enumerable:!0},{key:"mountedInstances",value:[],enumerable:!0},{key:"userMediaRequested",value:!1,enumerable:!0}]),t.prototype.componentDidMount=function(){a()&&(t.mountedInstances.push(this),this.state.hasUserMedia||t.userMediaRequested||this.requestUserMedia())},t.prototype.requestUserMedia=function(){var e=this;navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;var o=function(o,r){var n={video:{optional:[{sourceId:r}]}};e.props.audio&&(n.audio={optional:[{sourceId:o}]}),navigator.getUserMedia(n,function(e){t.mountedInstances.forEach(function(t){return t.handleUserMedia(null,e)})},function(e){t.mountedInstances.forEach(function(e){return e.handleUserMedia(error)})})};this.props.audioSource&&this.props.videoSource?o(this.props.audioSource,this.props.videoSource):MediaStreamTrack.getSources(function(e){var t=null,r=null;e.forEach(function(e){"audio"===e.kind?t=e.id:"video"===e.kind&&(r=e.id)}),o(t,r)}),t.userMediaRequested=!0},t.prototype.handleUserMedia=function(e,t){if(e)return void this.setState({hasUserMedia:!1});var o=window.URL.createObjectURL(t);this.setState({hasUserMedia:!0,src:o})},t.prototype.componentWillUnmount=function(){var e=t.mountedInstances.indexOf(this);t.mountedInstances.splice(e,1),0===t.mountedInstances.length&&this.state.hasUserMedia&&window.URL.revokeObjectURL(this.state.src)},t.prototype.getScreenshot=function(){if(this.state.hasUserMedia){var e=document.createElement("canvas"),t=d.default.findDOMNode(this);console.log(t),e.height=t.clientHeight,e.width=t.clientWidth;var o=e.getContext("2d");return o.drawImage(t,0,0,e.width,e.height),e.toDataURL("image/webp")}},t.prototype.render=function(){return d.default.createElement("video",{autoPlay:!0,width:this.props.width,height:this.props.height,src:this.state.src})},t}(u.Component);t.default=c,e.exports=t.default},function(t,o){t.exports=e}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.Webcam=t(require("react")):e.Webcam=t(e.React)}(this,function(e){return function(e){function t(o){if(r[o])return r[o].exports;var n=r[o]={exports:{},id:o,loaded:!1};return e[o].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function a(){return!!(navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia)}t.__esModule=!0;var s=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),u=r(1),p=o(u),c=function(e){function t(){n(this,t),e.call(this),this.state={hasUserMedia:!1}}return i(t,e),t.prototype.getDefaultProps=function(){return{screenshotFormat:"image/webp"}},s(t,null,[{key:"defaultProps",value:{audio:!0,height:480,width:640},enumerable:!0},{key:"propTypes",value:{audio:u.PropTypes.bool,onUserMedia:u.PropTypes.func,height:u.PropTypes.oneOfType([u.PropTypes.number,u.PropTypes.string]),width:u.PropTypes.oneOfType([u.PropTypes.number,u.PropTypes.string]),screenshotFormat:u.PropTypes.oneOf(["image/webp","image/png","image/jpeg"])},enumerable:!0},{key:"mountedInstances",value:[],enumerable:!0},{key:"userMediaRequested",value:!1,enumerable:!0}]),t.prototype.componentDidMount=function(){a()&&(t.mountedInstances.push(this),this.state.hasUserMedia||t.userMediaRequested||this.requestUserMedia())},t.prototype.requestUserMedia=function(){var e=this;navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;var r=function(r,o){var n={video:{optional:[{sourceId:o}]}};e.props.audio&&(n.audio={optional:[{sourceId:r}]}),navigator.getUserMedia(n,function(e){t.mountedInstances.forEach(function(t){return t.handleUserMedia(null,e)})},function(e){t.mountedInstances.forEach(function(t){return t.handleUserMedia(e)})})};this.props.audioSource&&this.props.videoSource?r(this.props.audioSource,this.props.videoSource):navigator.mediaDevices.enumerateDevices().then(function(e){var t=null,o=null;e.forEach(function(e){"audio"===e.kind?t=e.id:"video"===e.kind&&(o=e.id)}),r(t,o)}),t.userMediaRequested=!0},t.prototype.handleUserMedia=function(e,t){if(e)return void this.setState({hasUserMedia:!1});var r=window.URL.createObjectURL(t);this.stream=t,this.setState({hasUserMedia:!0,src:r}),this.props.onUserMedia&&this.props.onUserMedia()},t.prototype.componentWillUnmount=function(){var e=t.mountedInstances.indexOf(this);t.mountedInstances.splice(e,1),0===t.mountedInstances.length&&this.state.hasUserMedia&&(this.stream.stop(),t.userMediaRequested=!1,window.URL.revokeObjectURL(this.state.src))},t.prototype.getScreenshot=function(){if(!this.state.hasUserMedia)return null;var e=this.getCanvas();return e.toDataURL(this.props.screenshotFormat)},t.prototype.getCanvas=function(){if(!this.state.hasUserMedia)return null;var e=p.default.findDOMNode(this);if(!this.ctx){var t=document.createElement("canvas");t.height=e.clientHeight,t.width=e.clientWidth,this.canvas=t,this.ctx=t.getContext("2d")}var r=this.ctx,o=this.canvas;return r.drawImage(e,0,0,o.width,o.height),o},t.prototype.render=function(){return p.default.createElement("video",{autoPlay:!0,width:this.props.width,height:this.props.height,src:this.state.src})},t}(u.Component);t.default=c,e.exports=t.default},function(t,r){t.exports=e}])});

package.json

 {
   "name": "react-webcam",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "React webcam component",
@@ -8,4 +8,4 @@ "main": "dist/react-webcam.js",
     "prepublish": "npm run build:umd",
-    "build": "babel src --out-dir lib",
-    "build:umd": "webpack src/react-webcam.js dist/react-webcam.js && NODE_ENV=production webpack src/react-webcam.js dist/react-webcam.min.js",
+    "build": "webpack src/react-webcam.js dist/react-webcam.js",
+    "build:umd": "npm run build && NODE_ENV=production webpack src/react-webcam.js dist/react-webcam.min.js",
     "lint": "eslint src"
@@ -12,0 +12,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

22253

increased by57.6%

Number of package files

11

increased by10%

Lines of code

424

increased by85.15%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes