react-webcam - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/react-webcam.js

@@ -105,2 +105,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	      screenshotFormat: _propTypes2['default'].oneOf(['image/webp', 'image/png', 'image/jpeg']),
+	      style: _propTypes2['default'].object,
 	      className: _propTypes2['default'].string
@@ -315,3 +316,4 @@ },
 	      muted: this.props.muted,
-	      className: this.props.className
+	      className: this.props.className,
+	      style: this.props.style
 	    });
@@ -318,0 +320,0 @@ };

dist/react-webcam.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):"object"==typeof exports?exports.Webcam=t(require("react"),require("react-dom")):e.Webcam=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(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 n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),u=r(5),c=n(u),d=r(4),f=n(d),p=r(6),l=function(e){function t(){o(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,screenshotFormat:"image/webp",onUserMedia:function(){}},enumerable:!0},{key:"propTypes",value:{audio:f.default.bool,muted:f.default.bool,onUserMedia:f.default.func,height:f.default.oneOfType([f.default.number,f.default.string]),width:f.default.oneOfType([f.default.number,f.default.string]),screenshotFormat:f.default.oneOf(["image/webp","image/png","image/jpeg"]),className:f.default.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 r=function(r,n){var o={video:{optional:[{sourceId:n}]}};e.props.audio&&(o.audio={optional:[{sourceId:r}]}),navigator.getUserMedia(o,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):"mediaDevices"in navigator?navigator.mediaDevices.enumerateDevices().then(function(e){var t=null,n=null;e.forEach(function(e){"audio"===e.kind?t=e.id:"video"===e.kind&&(n=e.id)}),r(t,n)}).catch(function(e){console.log(e.name+": "+e.message)}):MediaStreamTrack.getSources(function(e){var t=null,n=null;e.forEach(function(e){"audio"===e.kind?t=e.id:"video"===e.kind&&(n=e.id)}),r(t,n)}),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()},t.prototype.componentWillUnmount=function(){var e=t.mountedInstances.indexOf(this);if(t.mountedInstances.splice(e,1),0===t.mountedInstances.length&&this.state.hasUserMedia){if(this.stream.stop)this.stream.stop();else{if(this.stream.getVideoTracks)for(var r=this.stream.getVideoTracks(),n=Array.isArray(r),o=0,r=n?r:r[Symbol.iterator]();;){var i;if(n){if(o>=r.length)break;i=r[o++]}else{if(o=r.next(),o.done)break;i=o.value}var a=i;a.stop()}if(this.stream.getAudioTracks)for(var s=this.stream.getAudioTracks(),u=Array.isArray(s),c=0,s=u?s:s[Symbol.iterator]();;){var d;if(u){if(c>=s.length)break;d=s[c++]}else{if(c=s.next(),c.done)break;d=c.value}var a=d;a.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.findDOMNode(this);if(!this.ctx){var t=document.createElement("canvas"),r=e.videoWidth/e.videoHeight;t.width=e.clientWidth,t.height=e.clientWidth/r,this.canvas=t,this.ctx=t.getContext("2d")}var n=this.ctx,o=this.canvas;return n.drawImage(e,0,0,o.width,o.height),o},t.prototype.render=function(){return c.default.createElement("video",{autoPlay:!0,width:this.props.width,height:this.props.height,src:this.state.src,muted:this.props.muted,className:this.props.className})},t}(u.Component);t.default=l,e.exports=t.default},function(e,t){"use strict";function r(e){return function(){return e}}var n=function(){};n.thatReturns=r,n.thatReturnsFalse=r(!1),n.thatReturnsTrue=r(!0),n.thatReturnsNull=r(null),n.thatReturnsThis=function(){return this},n.thatReturnsArgument=function(e){return e},e.exports=n},function(e,t,r){"use strict";function n(e,t,r,n,i,a,s,u){if(o(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var d=[r,n,i,a,s,u],f=0;c=new Error(t.replace(/%s/g,function(){return d[f++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var o=function(e){};e.exports=n},function(e,t,r){"use strict";var n=r(1),o=r(2);e.exports=function(){function e(){o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return r.checkPropTypes=n,r.PropTypes=r,r}},function(e,t,r){"use strict";e.exports=r(3)()},function(t,r){t.exports=e},function(e,r){e.exports=t}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):"object"==typeof exports?exports.Webcam=t(require("react"),require("react-dom")):e.Webcam=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(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 n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),u=r(5),c=n(u),d=r(4),f=n(d),l=r(6),p=function(e){function t(){o(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,screenshotFormat:"image/webp",onUserMedia:function(){}},enumerable:!0},{key:"propTypes",value:{audio:f.default.bool,muted:f.default.bool,onUserMedia:f.default.func,height:f.default.oneOfType([f.default.number,f.default.string]),width:f.default.oneOfType([f.default.number,f.default.string]),screenshotFormat:f.default.oneOf(["image/webp","image/png","image/jpeg"]),style:f.default.object,className:f.default.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 r=function(r,n){var o={video:{optional:[{sourceId:n}]}};e.props.audio&&(o.audio={optional:[{sourceId:r}]}),navigator.getUserMedia(o,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):"mediaDevices"in navigator?navigator.mediaDevices.enumerateDevices().then(function(e){var t=null,n=null;e.forEach(function(e){"audio"===e.kind?t=e.id:"video"===e.kind&&(n=e.id)}),r(t,n)}).catch(function(e){console.log(e.name+": "+e.message)}):MediaStreamTrack.getSources(function(e){var t=null,n=null;e.forEach(function(e){"audio"===e.kind?t=e.id:"video"===e.kind&&(n=e.id)}),r(t,n)}),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()},t.prototype.componentWillUnmount=function(){var e=t.mountedInstances.indexOf(this);if(t.mountedInstances.splice(e,1),0===t.mountedInstances.length&&this.state.hasUserMedia){if(this.stream.stop)this.stream.stop();else{if(this.stream.getVideoTracks)for(var r=this.stream.getVideoTracks(),n=Array.isArray(r),o=0,r=n?r:r[Symbol.iterator]();;){var i;if(n){if(o>=r.length)break;i=r[o++]}else{if(o=r.next(),o.done)break;i=o.value}var a=i;a.stop()}if(this.stream.getAudioTracks)for(var s=this.stream.getAudioTracks(),u=Array.isArray(s),c=0,s=u?s:s[Symbol.iterator]();;){var d;if(u){if(c>=s.length)break;d=s[c++]}else{if(c=s.next(),c.done)break;d=c.value}var a=d;a.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=l.findDOMNode(this);if(!this.ctx){var t=document.createElement("canvas"),r=e.videoWidth/e.videoHeight;t.width=e.clientWidth,t.height=e.clientWidth/r,this.canvas=t,this.ctx=t.getContext("2d")}var n=this.ctx,o=this.canvas;return n.drawImage(e,0,0,o.width,o.height),o},t.prototype.render=function(){return c.default.createElement("video",{autoPlay:!0,width:this.props.width,height:this.props.height,src:this.state.src,muted:this.props.muted,className:this.props.className,style:this.props.style})},t}(u.Component);t.default=p,e.exports=t.default},function(e,t){"use strict";function r(e){return function(){return e}}var n=function(){};n.thatReturns=r,n.thatReturnsFalse=r(!1),n.thatReturnsTrue=r(!0),n.thatReturnsNull=r(null),n.thatReturnsThis=function(){return this},n.thatReturnsArgument=function(e){return e},e.exports=n},function(e,t,r){"use strict";function n(e,t,r,n,i,a,s,u){if(o(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var d=[r,n,i,a,s,u],f=0;c=new Error(t.replace(/%s/g,function(){return d[f++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var o=function(e){};e.exports=n},function(e,t,r){"use strict";var n=r(1),o=r(2);e.exports=function(){function e(){o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return r.checkPropTypes=n,r.PropTypes=r,r}},function(e,t,r){"use strict";e.exports=r(3)()},function(t,r){t.exports=e},function(e,r){e.exports=t}])});

package.json

 {
   "name": "react-webcam",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "React webcam component",
@@ -5,0 +5,0 @@ "main": "dist/react-webcam.js",

README.md

@@ -37,5 +37,39 @@ # react-webcam
 width            | number   | 640          | width of video element
+style            | object   |              | style prop passed to video element
 screenshotFormat | string   | 'image/webp' | format of screenshot
 onUserMedia      | function | noop         | callback when component receives a media stream
+audioSource      | string   |              | an array or single ConstrainDOMString(s) specifying the device id
+videoSource      | string   |              | an array or single ConstrainDOMString(s) specifying the device id
 
+### Methods
+
+`getScreenshot` - Returns a base64 encoded string of the current webcam image. Example:
+
+```javascript
+class WebcamCapture extends React.Component {
+  setRef = (webcam) => {
+    this.webcam = webcam;
+  }
+
+  capture = () => {
+    const imageSrc = this.webcam.getScreenshot();
+  };
+
+  render() {
+    return (
+      <div>
+        <Webcam
+          audio={false}
+          height={350}
+          ref={this.setRef}
+          screenshotFormat="image/jpeg"
+          width={350}
+        />
+        <button onClick={this.capture}>Capture photo</button>
+      </div>
+    );
+  }
+}
+```
+
 ## License
@@ -42,0 +76,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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50978

increased by2.03%

Lines of code

1029

increased by0.19%

Number of lines in readme file

81

increased by72.34%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes