react-webcam - npm Package Compare versions

Comparing version 0.7.0 to 1.0.0

dist/react-webcam.js

@@ -102,2 +102,4 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -125,2 +127,45 @@
 
+var constrainStringType = _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string), _propTypes2.default.shape({
+  exact: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string)])
+}), _propTypes2.default.shape({
+  ideal: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string)])
+})]);
+
+var constrainBooleanType = _propTypes2.default.oneOfType([_propTypes2.default.shape({
+  exact: _propTypes2.default.bool
+}), _propTypes2.default.shape({
+  ideal: _propTypes2.default.bool
+})]);
+
+var constrainLongType = _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({
+  exact: _propTypes2.default.number,
+  ideal: _propTypes2.default.number,
+  min: _propTypes2.default.number,
+  max: _propTypes2.default.number
+})]);
+
+var constrainDoubleType = constrainLongType;
+
+var audioConstraintType = _propTypes2.default.shape({
+  deviceId: constrainStringType,
+  groupId: constrainStringType,
+  autoGainControl: constrainBooleanType,
+  channelCount: constrainLongType,
+  latency: constrainDoubleType,
+  noiseSuppression: constrainBooleanType,
+  sampleRate: constrainLongType,
+  sampleSize: constrainLongType,
+  volume: constrainDoubleType
+});
+
+var videoConstraintType = _propTypes2.default.shape({
+  deviceId: constrainStringType,
+  groupId: constrainStringType,
+  aspectRatio: constrainDoubleType,
+  facingMode: constrainStringType,
+  frameRate: constrainDoubleType,
+  height: constrainLongType,
+  width: constrainLongType
+});
+
 var Webcam = function (_Component) {
@@ -154,3 +199,3 @@ _inherits(Webcam, _Component);
     value: function componentWillUpdate(nextProps) {
-      if (nextProps.videoSource !== this.props.videoSource || nextProps.audioSource !== this.props.audioSource) {
+      if (JSON.stringify(nextProps.audioConstraints) !== JSON.stringify(this.props.audioConstraints) || JSON.stringify(nextProps.videoConstraints) !== JSON.stringify(this.props.videoConstraints)) {
         this.requestUserMedia();
@@ -224,13 +269,9 @@ }
 
-      var sourceSelected = function sourceSelected(audioSource, videoSource) {
+      var sourceSelected = function sourceSelected(audioConstraints, videoConstraints) {
         var constraints = {
-          video: {
-            optional: [{ sourceId: videoSource }]
-          }
+          video: videoConstraints || true
         };
 
         if (_this2.props.audio) {
-          constraints.audio = {
-            optional: [{ sourceId: audioSource }]
-          };
+          constraints.audio = audioConstraints || true;
         }
@@ -249,29 +290,23 @@
 
-      if (this.props.audioSource && this.props.videoSource) {
-        sourceSelected(this.props.audioSource, this.props.videoSource);
-      } else if ('mediaDevices' in navigator) {
-        navigator.mediaDevices.enumerateDevices().then(function (devices) {
-          var audioSource = null;
-          var videoSource = null;
+      if ('mediaDevices' in navigator) {
+        sourceSelected(this.props.audioConstraints, this.props.videoConstraints);
+      } else {
+        var optionalSource = function optionalSource(id) {
+          return { optional: [{ sourceId: id }] };
+        };
 
-          devices.forEach(function (device) {
-            if (device.kind === 'audioinput') {
-              audioSource = device.id;
-            } else if (device.kind === 'videoinput') {
-              videoSource = device.id;
-            }
-          });
+        var constraintToSourceId = function constraintToSourceId(constraint) {
+          var deviceId = (constraint || {}).deviceId;
 
-          if (_this2.props.audioSource) {
-            audioSource = _this2.props.audioSource;
+          if (typeof deviceId === 'string') {
+            return deviceId;
+          } else if (Array.isArray(deviceId) && deviceId.length > 0) {
+            return deviceId[0];
+          } else if ((typeof deviceId === 'undefined' ? 'undefined' : _typeof(deviceId)) === 'object' && deviceId.ideal) {
+            return deviceId.ideal;
           }
-          if (_this2.props.videoSource) {
-            videoSource = _this2.props.videoSource;
-          }
 
-          sourceSelected(audioSource, videoSource);
-        }).catch(function (error) {
-          console.log(error.name + ': ' + error.message); // eslint-disable-line no-console
-        });
-      } else {
+          return null;
+        };
+
         MediaStreamTrack.getSources(function (sources) {
@@ -289,10 +324,13 @@ var audioSource = null;
 
-          if (_this2.props.audioSource) {
-            audioSource = _this2.props.audioSource;
+          var audioSourceId = constraintToSourceId(_this2.props.audioConstraints);
+          if (audioSourceId) {
+            audioSource = audioSourceId;
           }
-          if (_this2.props.videoSource) {
-            videoSource = _this2.props.videoSource;
+
+          var videoSourceId = constraintToSourceId(_this2.props.videoConstraints);
+          if (videoSourceId) {
+            videoSource = videoSourceId;
           }
 
-          sourceSelected(audioSource, videoSource);
+          sourceSelected(optionalSource(audioSource), optionalSource(videoSource));
         });
@@ -375,6 +413,6 @@ }
   className: _propTypes2.default.string,
-  audioSource: _propTypes2.default.string,
-  videoSource: _propTypes2.default.string,
   screenshotQuality: _propTypes2.default.number,
-  screenshotWidth: _propTypes2.default.number
+  screenshotWidth: _propTypes2.default.number,
+  audioConstraints: audioConstraintType,
+  videoConstraints: videoConstraintType
 };
@@ -381,0 +419,0 @@ Webcam.mountedInstances = [];

dist/react-webcam.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("prop-types"),require("react")):"function"==typeof define&&define.amd?define(["prop-types","react"],t):"object"==typeof exports?exports.Webcam=t(require("prop-types"),require("react")):e.Webcam=t(e.PropTypes,e.React)}(this,function(e,t){return function(e){function t(i){if(r[i])return r[i].exports;var o=r[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=e,t.c=r,t.i=function(e){return e},t.d=function(e,r,i){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}([function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t,r){"use strict";function i(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 n(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(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.mediaDevices.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,r,i){return r&&e(t.prototype,r),i&&e(t,i),t}}(),c=r(1),d=i(c),p=r(0),h=i(p),f=function(e){function t(){o(this,t);var e=n(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.state={hasUserMedia:!1},e}return s(t,e),u(t,[{key:"componentDidMount",value:function(){a()&&(t.mountedInstances.push(this),this.state.hasUserMedia||t.userMediaRequested||this.requestUserMedia())}},{key:"componentWillUpdate",value:function(e){e.videoSource===this.props.videoSource&&e.audioSource===this.props.audioSource||this.requestUserMedia()}},{key:"componentWillUnmount",value:function(){var e=t.mountedInstances.indexOf(this);t.mountedInstances.splice(e,1),0===t.mountedInstances.length&&this.state.hasUserMedia&&(this.stream.stop?this.stream.stop():(this.stream.getVideoTracks&&this.stream.getVideoTracks().map(function(e){return e.stop()}),this.stream.getAudioTracks&&this.stream.getAudioTracks().map(function(e){return e.stop()})),t.userMediaRequested=!1,window.URL.revokeObjectURL(this.state.src))}},{key:"getScreenshot",value:function(){if(!this.state.hasUserMedia)return null;var e=this.getCanvas();return e&&e.toDataURL(this.props.screenshotFormat,this.props.screenshotQuality)}},{key:"getCanvas",value:function(){if(!this.state.hasUserMedia||!this.video.videoHeight)return null;if(!this.ctx){var e=document.createElement("canvas"),t=this.video.videoWidth/this.video.videoHeight,r=this.props.screenshotWidth||this.video.clientWidth;e.width=r,e.height=r/t,this.canvas=e,this.ctx=e.getContext("2d")}var i=this.ctx,o=this.canvas;return i.drawImage(this.video,0,0,o.width,o.height),o}},{key:"requestUserMedia",value:function(){var e=this;navigator.getUserMedia=navigator.mediaDevices.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;var r=function(r,i){var o={video:{optional:[{sourceId:i}]}};e.props.audio&&(o.audio={optional:[{sourceId:r}]}),navigator.mediaDevices.getUserMedia(o).then(function(e){t.mountedInstances.forEach(function(t){return t.handleUserMedia(null,e)})}).catch(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(t){var i=null,o=null;t.forEach(function(e){"audioinput"===e.kind?i=e.id:"videoinput"===e.kind&&(o=e.id)}),e.props.audioSource&&(i=e.props.audioSource),e.props.videoSource&&(o=e.props.videoSource),r(i,o)}).catch(function(e){console.log(e.name+": "+e.message)}):MediaStreamTrack.getSources(function(t){var i=null,o=null;t.forEach(function(e){"audio"===e.kind?i=e.id:"video"===e.kind&&(o=e.id)}),e.props.audioSource&&(i=e.props.audioSource),e.props.videoSource&&(o=e.props.videoSource),r(i,o)}),t.userMediaRequested=!0}},{key:"handleUserMedia",value:function(e,t){if(e)return this.setState({hasUserMedia:!1}),void this.props.onUserMediaError(e);try{var r=window.URL.createObjectURL(t);this.stream=t,this.setState({hasUserMedia:!0,src:r})}catch(e){this.stream=t,this.video.srcObject=t,this.setState({hasUserMedia:!0})}this.props.onUserMedia()}},{key:"render",value:function(){var e=this;return d.default.createElement("video",{autoPlay:!0,width:this.props.width,height:this.props.height,src:this.state.src,muted:this.props.audio,className:this.props.className,playsInline:!0,style:this.props.style,ref:function(t){e.video=t}})}}]),t}(c.Component);f.defaultProps={audio:!0,className:"",height:480,onUserMedia:function(){},onUserMediaError:function(){},screenshotFormat:"image/webp",width:640,screenshotQuality:.92},f.propTypes={audio:h.default.bool,onUserMedia:h.default.func,onUserMediaError:h.default.func,height:h.default.oneOfType([h.default.number,h.default.string]),width:h.default.oneOfType([h.default.number,h.default.string]),screenshotFormat:h.default.oneOf(["image/webp","image/png","image/jpeg"]),style:h.default.object,className:h.default.string,audioSource:h.default.string,videoSource:h.default.string,screenshotQuality:h.default.number,screenshotWidth:h.default.number},f.mountedInstances=[],f.userMediaRequested=!1,t.default=f,e.exports=t.default}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("prop-types"),require("react")):"function"==typeof define&&define.amd?define(["prop-types","react"],t):"object"==typeof exports?exports.Webcam=t(require("prop-types"),require("react")):e.Webcam=t(e.PropTypes,e.React)}(this,function(e,t){return function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={i:n,l:!1,exports:{}};return e[n].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var r={};return t.m=e,t.c=r,t.i=function(e){return e},t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}([function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function o(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 s(){return!!(navigator.mediaDevices.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia)}Object.defineProperty(t,"__esModule",{value:!0});var u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},d=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}}(),c=r(1),f=n(c),l=r(0),p=n(l),h=p.default.oneOfType([p.default.string,p.default.arrayOf(p.default.string),p.default.shape({exact:p.default.oneOfType([p.default.string,p.default.arrayOf(p.default.string)])}),p.default.shape({ideal:p.default.oneOfType([p.default.string,p.default.arrayOf(p.default.string)])})]),m=p.default.oneOfType([p.default.shape({exact:p.default.bool}),p.default.shape({ideal:p.default.bool})]),v=p.default.oneOfType([p.default.number,p.default.shape({exact:p.default.number,ideal:p.default.number,min:p.default.number,max:p.default.number})]),y=v,g=p.default.shape({deviceId:h,groupId:h,autoGainControl:m,channelCount:v,latency:y,noiseSuppression:m,sampleRate:v,sampleSize:v,volume:y}),b=p.default.shape({deviceId:h,groupId:h,aspectRatio:y,facingMode:h,frameRate:y,height:v,width:v}),M=function(e){function t(){a(this,t);var e=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.state={hasUserMedia:!1},e}return o(t,e),d(t,[{key:"componentDidMount",value:function(){s()&&(t.mountedInstances.push(this),this.state.hasUserMedia||t.userMediaRequested||this.requestUserMedia())}},{key:"componentWillUpdate",value:function(e){JSON.stringify(e.audioConstraints)===JSON.stringify(this.props.audioConstraints)&&JSON.stringify(e.videoConstraints)===JSON.stringify(this.props.videoConstraints)||this.requestUserMedia()}},{key:"componentWillUnmount",value:function(){var e=t.mountedInstances.indexOf(this);t.mountedInstances.splice(e,1),0===t.mountedInstances.length&&this.state.hasUserMedia&&(this.stream.stop?this.stream.stop():(this.stream.getVideoTracks&&this.stream.getVideoTracks().map(function(e){return e.stop()}),this.stream.getAudioTracks&&this.stream.getAudioTracks().map(function(e){return e.stop()})),t.userMediaRequested=!1,window.URL.revokeObjectURL(this.state.src))}},{key:"getScreenshot",value:function(){if(!this.state.hasUserMedia)return null;var e=this.getCanvas();return e&&e.toDataURL(this.props.screenshotFormat,this.props.screenshotQuality)}},{key:"getCanvas",value:function(){if(!this.state.hasUserMedia||!this.video.videoHeight)return null;if(!this.ctx){var e=document.createElement("canvas"),t=this.video.videoWidth/this.video.videoHeight,r=this.props.screenshotWidth||this.video.clientWidth;e.width=r,e.height=r/t,this.canvas=e,this.ctx=e.getContext("2d")}var n=this.ctx,a=this.canvas;return n.drawImage(this.video,0,0,a.width,a.height),a}},{key:"requestUserMedia",value:function(){var e=this;navigator.getUserMedia=navigator.mediaDevices.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;var r=function(r,n){var a={video:n||!0};e.props.audio&&(a.audio=r||!0),navigator.mediaDevices.getUserMedia(a).then(function(e){t.mountedInstances.forEach(function(t){return t.handleUserMedia(null,e)})}).catch(function(e){t.mountedInstances.forEach(function(t){return t.handleUserMedia(e)})})};if("mediaDevices"in navigator)r(this.props.audioConstraints,this.props.videoConstraints);else{var n=function(e){return{optional:[{sourceId:e}]}},a=function(e){var t=(e||{}).deviceId;return"string"==typeof t?t:Array.isArray(t)&&t.length>0?t[0]:"object"===(void 0===t?"undefined":u(t))&&t.ideal?t.ideal:null};MediaStreamTrack.getSources(function(t){var i=null,o=null;t.forEach(function(e){"audio"===e.kind?i=e.id:"video"===e.kind&&(o=e.id)});var s=a(e.props.audioConstraints);s&&(i=s);var u=a(e.props.videoConstraints);u&&(o=u),r(n(i),n(o))})}t.userMediaRequested=!0}},{key:"handleUserMedia",value:function(e,t){if(e)return this.setState({hasUserMedia:!1}),void this.props.onUserMediaError(e);try{var r=window.URL.createObjectURL(t);this.stream=t,this.setState({hasUserMedia:!0,src:r})}catch(e){this.stream=t,this.video.srcObject=t,this.setState({hasUserMedia:!0})}this.props.onUserMedia()}},{key:"render",value:function(){var e=this;return f.default.createElement("video",{autoPlay:!0,width:this.props.width,height:this.props.height,src:this.state.src,muted:this.props.audio,className:this.props.className,playsInline:!0,style:this.props.style,ref:function(t){e.video=t}})}}]),t}(c.Component);M.defaultProps={audio:!0,className:"",height:480,onUserMedia:function(){},onUserMediaError:function(){},screenshotFormat:"image/webp",width:640,screenshotQuality:.92},M.propTypes={audio:p.default.bool,onUserMedia:p.default.func,onUserMediaError:p.default.func,height:p.default.oneOfType([p.default.number,p.default.string]),width:p.default.oneOfType([p.default.number,p.default.string]),screenshotFormat:p.default.oneOf(["image/webp","image/png","image/jpeg"]),style:p.default.object,className:p.default.string,screenshotQuality:p.default.number,screenshotWidth:p.default.number,audioConstraints:g,videoConstraints:b},M.mountedInstances=[],M.userMediaRequested=!1,t.default=M,e.exports=t.default}])});

package.json

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

README.md

@@ -42,5 +42,5 @@ # react-webcam
 onUserMediaError | function | noop         | callback when component cannot receives any media stream width error param
-audioSource      | string   |              | an array or single ConstrainDOMString(s) specifying the device id
-videoSource      | string   |              | an array or single ConstrainDOMString(s) specifying the device id
 screenshotQuality      | number   |        0.92      | quality of screenshot(0 to 1)
+audioConstraints | object   |              | MediaStreamConstraint(s) for the audio
+videoConstraints | object   |              | MediaStreamConstraints(s) for the video
 
@@ -62,2 +62,8 @@ ### Methods
   render() {
+    const videoConstraints = {
+      width: 1280,
+      height: 720,
+      facingMode: 'user',
+    };
+
     return (
@@ -71,2 +77,3 @@ <div>
           width={350}
+          videoConstraints={videoConstraints}
         />
@@ -73,0 +80,0 @@ <button onClick={this.capture}>Capture photo</button>

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

149427

increased by1.91%

Lines of code

419

increased by7.44%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

91

increased by8.33%

No dependency changes