Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-webcam

Package Overview
Dependencies
Maintainers
1
Versions
66
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-webcam - npm Package Compare versions

Comparing version 0.4.3 to 0.5.0

jest.config.js

3

dist/react-webcam.js

@@ -302,2 +302,3 @@ (function webpackUniversalModuleDefinition(root, factory) {

});
this.props.onUserMediaError(error);

@@ -353,2 +354,3 @@ return;

onUserMedia: function onUserMedia() {},
onUserMediaError: function onUserMediaError() {},
screenshotFormat: 'image/webp',

@@ -360,2 +362,3 @@ width: 640

onUserMedia: _propTypes2.default.func,
onUserMediaError: _propTypes2.default.func,
height: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),

@@ -362,0 +365,0 @@ width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),

2

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(r){if(i[r])return i[r].exports;var o=i[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var i={};return t.m=e,t.c=i,t.i=function(e){return e},t.d=function(e,i,r){t.o(e,i)||Object.defineProperty(e,i,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var i=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(i,"a",i),i},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}([function(t,i){t.exports=e},function(e,i){e.exports=t},function(e,t,i){"use strict";function r(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 a(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(){function e(e,t){for(var i=0;i<t.length;i++){var r=t[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,i,r){return i&&e(t.prototype,i),r&&e(t,r),t}}(),c=i(1),d=r(c),p=i(0),h=r(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 a(t,e),u(t,[{key:"componentDidMount",value:function(){s()&&(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)}},{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;e.width=this.video.clientWidth,e.height=this.video.clientWidth/t,this.canvas=e,this.ctx=e.getContext("2d")}var i=this.ctx,r=this.canvas;return i.drawImage(this.video,0,0,r.width,r.height),r}},{key:"requestUserMedia",value:function(){var e=this;navigator.getUserMedia=navigator.mediaDevices.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;var i=function(i,r){var o={video:{optional:[{sourceId:r}]}};e.props.audio&&(o.audio={optional:[{sourceId:i}]}),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?i(this.props.audioSource,this.props.videoSource):"mediaDevices"in navigator?navigator.mediaDevices.enumerateDevices().then(function(t){var r=null,o=null;t.forEach(function(e){"audioinput"===e.kind?r=e.id:"videoinput"===e.kind&&(o=e.id)}),e.props.audioSource&&(r=e.props.audioSource),e.props.videoSource&&(o=e.props.videoSource),i(r,o)}).catch(function(e){console.log(e.name+": "+e.message)}):MediaStreamTrack.getSources(function(t){var r=null,o=null;t.forEach(function(e){"audio"===e.kind?r=e.id:"video"===e.kind&&(o=e.id)}),e.props.audioSource&&(r=e.props.audioSource),e.props.videoSource&&(o=e.props.videoSource),i(r,o)}),t.userMediaRequested=!0}},{key:"handleUserMedia",value:function(e,t){if(e)return void this.setState({hasUserMedia:!1});try{var i=window.URL.createObjectURL(t);this.stream=t,this.setState({hasUserMedia:!0,src:i})}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(){},screenshotFormat:"image/webp",width:640},f.propTypes={audio:h.default.bool,onUserMedia: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},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(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),f=i(p),h=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)}},{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;e.width=this.video.clientWidth,e.height=this.video.clientWidth/t,this.canvas=e,this.ctx=e.getContext("2d")}var r=this.ctx,i=this.canvas;return r.drawImage(this.video,0,0,i.width,i.height),i}},{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);h.defaultProps={audio:!0,className:"",height:480,onUserMedia:function(){},onUserMediaError:function(){},screenshotFormat:"image/webp",width:640},h.propTypes={audio:f.default.bool,onUserMedia:f.default.func,onUserMediaError: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,audioSource:f.default.string,videoSource:f.default.string},h.mountedInstances=[],h.userMediaRequested=!1,t.default=h,e.exports=t.default}])});

2

package.json
{
"name": "react-webcam",
"version": "0.4.3",
"version": "0.5.0",
"description": "React webcam component",

@@ -5,0 +5,0 @@ "main": "dist/react-webcam.js",

1

README.md

@@ -40,2 +40,3 @@ # react-webcam

onUserMedia | function | noop | callback when component receives a media stream
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

@@ -42,0 +43,0 @@ videoSource | string | | an array or single ConstrainDOMString(s) specifying the device id

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc