react-webcam - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

dist/react-webcam.js

@@ -1,172 +0,157 @@
-(function webpackUniversalModuleDefinition(root, factory) {
-	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("React"));
-	else if(typeof define === 'function' && define.amd)
-		define(["React"], factory);
-	else if(typeof exports === 'object')
-		exports["Webcam"] = factory(require("React"));
-	else
-		root["Webcam"] = factory(root["React"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_2__) {
-return /******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId])
-/******/ 			return installedModules[moduleId].exports;
-/******/
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			exports: {},
-/******/ 			id: moduleId,
-/******/ 			loaded: false
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.loaded = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(0);
-/******/ })
-/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ function(module, exports, __webpack_require__) {
+'use strict';
 
-	module.exports = __webpack_require__(1);
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
 
+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; }; })();
 
-/***/ },
-/* 1 */
-/***/ function(module, exports, __webpack_require__) {
+var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
-	var React = __webpack_require__(2);
-	
-	function hasGetUserMedia() {
-	  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
-	            navigator.mozGetUserMedia || navigator.msGetUserMedia);
-	}
-	
-	module.exports = React.createClass({
-	  displayName: 'Webcam',
-	
-	  getInitialState: function() {
-	    return {
-	      on: false
-	    };
-	  },
-	
-	  render: function () {
-	    return (
-	      React.createElement("video", {autoPlay: true, ref: "video"})
-	    );
-	  },
-	
-	  componentDidMount: function() {
-	    self = this;
-	    var video = this.refs.video.getDOMNode();
-	
-	    if (!hasGetUserMedia()) return;
-	
-	    navigator.getUserMedia = navigator.getUserMedia ||
-	                          navigator.webkitGetUserMedia ||
-	                          navigator.mozGetUserMedia ||
-	                          navigator.msGetUserMedia;
-	
-	    if (this.props.audioSource && this.props.videoSource) {
-	      sourceSelected(this.props.audioSource, this.props.videoSource);
-	    } else {
-	      MediaStreamTrack.getSources(function(sourceInfos) {
-	        var audioSource = null;
-	        var videoSource = null;
-	
-	        sourceInfos.forEach(function(sourceInfo) {
-	          if (sourceInfo.kind === 'audio') {
-	            console.log(sourceInfo.id, sourceInfo.label || 'microphone');
-	
-	            audioSource = sourceInfo.id;
-	          } else if (sourceInfo.kind === 'video') {
-	            console.log(sourceInfo.id, sourceInfo.label || 'camera');
-	
-	            videoSource = sourceInfo.id;
-	          } else {
-	            console.log('Some other kind of source: ', sourceInfo);
-	          }
-	        });
-	
-	        sourceSelected(audioSource, videoSource);
-	      });
-	    }
-	
-	    function sourceSelected(audioSource, videoSource) {
-	      var constraints = {
-	        audio: {
-	          optional: [{sourceId: audioSource}]
-	        },
-	        video: {
-	          optional: [{sourceId: videoSource}]
-	        }
-	      };
-	
-	      navigator.getUserMedia(constraints, successCallback, errorCallback);
-	    }
-	
-	    function successCallback(stream) {
-	      self.setState({on:true});
-	      video.src = window.URL.createObjectURL(stream);
-	    };
-	
-	    function errorCallback(e) {
-	      video.src = self.props.fallbackURL;
-	    };
-	  },
-	
-	  getScreenshot: function() {
-	    if (!this.state.on) return;
-	
-	    var video = this.refs.video.getDOMNode();
-	
-	    var canvas = document.createElement('canvas');
-	    canvas.height = video.clientHeight;
-	    canvas.width = video.clientWidth;
-	
-	    var ctx = canvas.getContext('2d');
-	    ctx.drawImage(video, 0, 0);
-	
-	    return canvas.toDataURL('image/webp');
-	  }
-	});
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
 
-/***/ },
-/* 2 */
-/***/ function(module, exports, __webpack_require__) {
+function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) subClass.__proto__ = superClass; }
 
-	module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
+var _react = require('react');
 
-/***/ }
-/******/ ])
-});
+var _react2 = _interopRequireDefault(_react);
 
-//# sourceMappingURL=react-webcam.map
+function hasGetUserMedia() {
+  return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
+}
+
+var Webcam = (function (_Component) {
+  function Webcam() {
+    _classCallCheck(this, Webcam);
+
+    _get(Object.getPrototypeOf(Webcam.prototype), 'constructor', this).call(this);
+    this.state = {
+      on: false
+    };
+  }
+
+  _inherits(Webcam, _Component);
+
+  _createClass(Webcam, [{
+    key: 'componentWillMount',
+    value: function componentWillMount() {
+      Webcam.mountedInstances.push(this);
+    }
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      self = this;
+
+      if (!hasGetUserMedia()) return;
+      if (Webcam.userMediaRequested) return;
+
+      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
+
+      if (this.props.audioSource && this.props.videoSource) {
+        sourceSelected(this.props.audioSource, this.props.videoSource);
+      } else {
+        MediaStreamTrack.getSources(function (sourceInfos) {
+          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;
+            }
+          });
+
+          sourceSelected(audioSource, videoSource);
+        });
+      }
+
+      function sourceSelected(audioSource, videoSource) {
+        var constraints = {
+          video: {
+            optional: [{ sourceId: videoSource }]
+          }
+        };
+
+        if (self.props.audio) constraints.audio = {
+          optional: [{ sourceId: audioSource }]
+        };
+
+        navigator.getUserMedia(constraints, function (stream) {
+          Webcam.mountedInstances.forEach(function (instance) {
+            instance._successCallback(stream);
+          });
+        }, function (e) {
+          Webcam.mountedInstances.forEach(function (instance) {
+            instance._errorCallback(e);
+          });
+        });
+      }
+
+      Webcam.userMediaRequested = true;
+    }
+  }, {
+    key: '_successCallback',
+    value: function _successCallback(stream) {
+      var src = window.URL.createObjectURL(stream);
+
+      this.setState({
+        hasUserMedia: true,
+        src: src
+      });
+    }
+  }, {
+    key: '_errorCallback',
+    value: function _errorCallback(e) {
+      this.setState({
+        src: this.state.src
+      });
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      if (this.state.hasUserMedia) {
+        window.URL.revokeObjectUrl(this.state.src);
+      }
+    }
+  }, {
+    key: 'getScreenshot',
+    value: function getScreenshot() {
+      if (!this.state.hasUserMedia) return;
+
+      var canvas = document.createElement('canvas');
+      canvas.height = video.clientHeight;
+      canvas.width = video.clientWidth;
+
+      var ctx = canvas.getContext('2d');
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+      return canvas.toDataURL('image/webp');
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return _react2['default'].createElement('video', {
+        autoPlay: true,
+        width: this.props.width,
+        height: this.props.height,
+        src: this.state.src
+      });
+    }
+  }]);
+
+  return Webcam;
+})(_react.Component);
+
+Webcam.defaultProps = {
+  audio: true,
+  height: 480,
+  width: 640
+};
+Webcam.mountedInstances = [];
+Webcam.userMediaRequested = false;
+
+exports['default'] = Webcam;
+module.exports = exports['default'];

lib/react-webcam.js

@@ -1,2 +0,2 @@
-var React = require('react');
+import React, { Component } from 'react';
 
@@ -8,22 +8,21 @@ function hasGetUserMedia() {
 
-module.exports = React.createClass({
-  displayName: 'Webcam',
+class Webcam extends Component {
+  displayName: 'Webcam'
 
-  getInitialState: function() {
-    return {
+  constructor() {
+    super();
+    this.state = {
       on: false
     };
-  },
+  }
 
-  render: function () {
-    return (
-      <video autoPlay ref='video'></video>
-    );
-  },
+  componentWillMount() {
+    Webcam.mountedInstances.push(this);
+  }
 
-  componentDidMount: function() {
+  componentDidMount() {
     self = this;
-    var video = this.refs.video.getDOMNode();
 
     if (!hasGetUserMedia()) return;
+    if (Webcam.userMediaRequested) return;
 
@@ -44,11 +43,5 @@ navigator.getUserMedia = navigator.getUserMedia ||
           if (sourceInfo.kind === 'audio') {
-            console.log(sourceInfo.id, sourceInfo.label || 'microphone');
-
             audioSource = sourceInfo.id;
           } else if (sourceInfo.kind === 'video') {
-            console.log(sourceInfo.id, sourceInfo.label || 'camera');
-
             videoSource = sourceInfo.id;
-          } else {
-            console.log('Some other kind of source: ', sourceInfo);
           }
@@ -63,5 +56,2 @@ });
       var constraints = {
-        audio: {
-          optional: [{sourceId: audioSource}]
-        },
         video: {
@@ -72,20 +62,45 @@ optional: [{sourceId: videoSource}]
 
-      navigator.getUserMedia(constraints, successCallback, errorCallback);
+      if (self.props.audio)
+        constraints.audio = {
+          optional: [{sourceId: audioSource}]
+        }
+
+      navigator.getUserMedia(constraints, function(stream) {
+        Webcam.mountedInstances.forEach(function(instance) {
+          instance._successCallback(stream);
+        });
+      }, function(e) {
+        Webcam.mountedInstances.forEach(function(instance) {
+          instance._errorCallback(e);
+        });
+      });
     }
 
-    function successCallback(stream) {
-      self.setState({on:true});
-      video.src = window.URL.createObjectURL(stream);
-    };
+    Webcam.userMediaRequested = true;
+  }
 
-    function errorCallback(e) {
-      video.src = self.props.fallbackURL;
-    };
-  },
+  _successCallback(stream) {
+    let src = window.URL.createObjectURL(stream);
 
-  getScreenshot: function() {
-    if (!this.state.on) return;
+    this.setState({
+      hasUserMedia: true,
+      src
+    });
+  }
 
-    var video = this.refs.video.getDOMNode();
+  _errorCallback(e) {
+    this.setState({
+      src: this.state.src
+    });
+  }
 
+  componentWillUnmount() {
+    if (this.state.hasUserMedia) {
+      window.URL.revokeObjectUrl(this.state.src);
+    }
+  }
+
+  getScreenshot() {
+    if (!this.state.hasUserMedia) return;
+
     var canvas = document.createElement('canvas');
@@ -96,6 +111,27 @@ canvas.height = video.clientHeight;
     var ctx = canvas.getContext('2d');
-    ctx.drawImage(video, 0, 0);
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
 
     return canvas.toDataURL('image/webp');
   }
-});
+
+  render() {
+    return (
+      <video
+        autoPlay
+        width={this.props.width}
+        height={this.props.height}
+        src={this.state.src}
+      ></video>
+    );
+  }
+}
+Webcam.defaultProps = {
+  audio: true,
+  height: 480,
+  width: 640
+};
+Webcam.mountedInstances = [];
+Webcam.userMediaRequested = false;
+
+
+export default Webcam;

package.json

 {
   "name": "react-webcam",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React webcam component",
-  "main": "lib/react-webcam.js",
+  "main": "dist/react-webcam.js",
   "scripts": {
-    "test": "script/test --browsers Firefox --single-run",
-    "start": "script/build"
+    "build": "./node_modules/.bin/babel lib --out-dir dist"
   },
@@ -31,17 +30,7 @@ "browserify": {
   "peerDependencies": {
-    "react": "^0.12.1"
+    "react": ">=0.13.0"
   },
   "devDependencies": {
-    "jsx-loader": "^0.12.2",
-    "karma": "^0.12.19",
-    "karma-chrome-launcher": "^0.1.4",
-    "karma-cli": "0.0.4",
-    "karma-firefox-launcher": "^0.1.3",
-    "karma-jasmine": "^0.1.5",
-    "karma-webpack": "^1.2.1",
-    "reactify": "^0.17.1",
-    "uglify-js": "^2.4.15",
-    "webpack": "^1.4.13",
-    "webpack-dev-server": "^1.6.6"
+    "babel": "^5.6.7"
   }
 }

README.md

@@ -1,71 +0,32 @@
-# react-component-boilerplate
+# react-webcam
 
-Boilerplate for creating React components
+Webcam component for React
 
-## Installing
+## Installation
 
-```bash
-$ git clone https://github.com/mzabriskie/react-component-boilerplate.git
-$ npm install
 ```
-
-## Building
-
-Start webpack
-
-```bash
-$ npm start
-# or
-$ ./script/build
+npm install react-webcam
 ```
 
-## Testing
+## Demo
 
-Start karma
+http://cezary.github.io/react-webcam/
 
-```bash
-$ npm test
-# or
-$ ./script/test --auto-watch
-```
+## Example
 
-## Running
+```javascript
+var React = require('react');
+var Webcam = require('react-webcam');
 
-A simple example is setup to run out of the box
-
-```bash
-$ npm start
-$ open example/index.html
+var Component = React.createClass({
+  render: function() {
+    return (
+      <Webcam/>
+    );
+  }
+});
 ```
 
+### License
 
-## Setup
-
-You'll need to change a few things
-
-```bash
-# Delete .git
-$ cd react-component-boilerplate
-$ rm -rf .git
-
-# Update package.json and bower.json
-# name, version, description, repository, keywords, author, license, bugs, homepage
-$ vim package.json
-$ vim bower.json
-
-# Update webpack.config.js
-$ vim webpack.config.js
-
-# Update build script
-$ vim script/build
-
-# Rename lib/example.js
-$ mv lib/example.js lib/whatever.js
-$ vim index.js
-$ vim example/index.html
-$ vim specs/example.spec.js
-
-# Rename specs/example.spec.js
-$ mv specs/example.spec.js specs/whatever.spec.js
-$ vim specs/main.js
-```
+MIT

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

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

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

1

decreased by-90.91%

Lines of code

238

increased by4.39%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

9889

decreased by-57.15%

Number of package files

4

decreased by-50%

Number of lines in readme file

33

decreased by-53.52%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes