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 3.1.0 to 3.1.1

2

dist/react-webcam.js

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

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return Webcam; });\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\nvar __rest = (undefined && undefined.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\n\nfunction hasGetUserMedia() {\n return !!((navigator.mediaDevices && navigator.mediaDevices.getUserMedia) ||\n navigator.webkitGetUserMedia ||\n navigator.mozGetUserMedia ||\n navigator.msGetUserMedia);\n}\nclass Webcam extends react__WEBPACK_IMPORTED_MODULE_0__[\"Component\"] {\n constructor(props) {\n super(props);\n this.ctx = null;\n this.state = {\n hasUserMedia: false\n };\n }\n componentDidMount() {\n if (!hasGetUserMedia())\n return;\n const { state } = this;\n Webcam.mountedInstances.push(this);\n if (!state.hasUserMedia && !Webcam.userMediaRequested) {\n this.requestUserMedia();\n }\n }\n componentDidUpdate(nextProps) {\n const { props } = this;\n if (JSON.stringify(nextProps.audioConstraints) !==\n JSON.stringify(props.audioConstraints) ||\n JSON.stringify(nextProps.videoConstraints) !==\n JSON.stringify(props.videoConstraints)) {\n this.requestUserMedia();\n }\n }\n componentWillUnmount() {\n const { state } = this;\n const index = Webcam.mountedInstances.indexOf(this);\n Webcam.mountedInstances.splice(index, 1);\n Webcam.userMediaRequested = false;\n if (Webcam.mountedInstances.length === 0 && state.hasUserMedia) {\n if (this.stream.getVideoTracks && this.stream.getAudioTracks) {\n this.stream.getVideoTracks().map(track => track.stop());\n this.stream.getAudioTracks().map(track => track.stop());\n }\n else {\n this.stream.stop();\n }\n if (state.src) {\n window.URL.revokeObjectURL(state.src);\n }\n }\n }\n getScreenshot() {\n const { state, props } = this;\n if (!state.hasUserMedia)\n return null;\n const canvas = this.getCanvas();\n return (canvas &&\n canvas.toDataURL(props.screenshotFormat, props.screenshotQuality));\n }\n getCanvas() {\n const { state, props } = this;\n if (!this.video) {\n return null;\n }\n if (!state.hasUserMedia || !this.video.videoHeight)\n return null;\n if (!this.ctx) {\n const canvas = document.createElement(\"canvas\");\n const aspectRatio = this.video.videoWidth / this.video.videoHeight;\n let canvasWidth = props.minScreenshotWidth || this.video.clientWidth;\n let canvasHeight = canvasWidth / aspectRatio;\n if (props.minScreenshotHeight &&\n canvasHeight < props.minScreenshotHeight) {\n canvasHeight = props.minScreenshotHeight;\n canvasWidth = canvasHeight * aspectRatio;\n }\n canvas.width = canvasWidth;\n canvas.height = canvasHeight;\n this.canvas = canvas;\n this.ctx = canvas.getContext(\"2d\");\n }\n const { ctx, canvas } = this;\n if (ctx) {\n if (props.mirrored) {\n ctx.translate(canvas.width, 0);\n ctx.scale(-1, 1);\n }\n else {\n ctx.translate(0, 0);\n ctx.scale(1, 1);\n }\n ctx.imageSmoothingEnabled = props.imageSmoothing;\n ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height);\n }\n return canvas;\n }\n requestUserMedia() {\n const { props } = this;\n navigator.getUserMedia =\n navigator.mediaDevices.getUserMedia ||\n navigator.webkitGetUserMedia ||\n navigator.mozGetUserMedia ||\n navigator.msGetUserMedia;\n const sourceSelected = (audioConstraints, videoConstraints) => {\n const constraints = {\n video: typeof videoConstraints !== \"undefined\" ? videoConstraints : true\n };\n if (props.audio) {\n constraints.audio =\n typeof audioConstraints !== \"undefined\" ? audioConstraints : true;\n }\n navigator.mediaDevices\n .getUserMedia(constraints)\n .then(stream => {\n Webcam.mountedInstances.forEach(instance => instance.handleUserMedia(null, stream));\n })\n .catch(e => {\n Webcam.mountedInstances.forEach(instance => instance.handleUserMedia(e));\n });\n };\n if (\"mediaDevices\" in navigator) {\n sourceSelected(props.audioConstraints, props.videoConstraints);\n }\n else {\n const optionalSource = id => ({ optional: [{ sourceId: id }] });\n const constraintToSourceId = constraint => {\n const { deviceId } = constraint;\n if (typeof deviceId === \"string\") {\n return deviceId;\n }\n if (Array.isArray(deviceId) && deviceId.length > 0) {\n return deviceId[0];\n }\n if (typeof deviceId === \"object\" && deviceId.ideal) {\n return deviceId.ideal;\n }\n return null;\n };\n // @ts-ignore: deprecated api\n MediaStreamTrack.getSources(sources => {\n let audioSource = null;\n let videoSource = null;\n sources.forEach(source => {\n if (source.kind === \"audio\") {\n audioSource = source.id;\n }\n else if (source.kind === \"video\") {\n videoSource = source.id;\n }\n });\n const audioSourceId = constraintToSourceId(props.audioConstraints);\n if (audioSourceId) {\n audioSource = audioSourceId;\n }\n const videoSourceId = constraintToSourceId(props.videoConstraints);\n if (videoSourceId) {\n videoSource = videoSourceId;\n }\n sourceSelected(optionalSource(audioSource), optionalSource(videoSource));\n });\n }\n Webcam.userMediaRequested = true;\n }\n handleUserMedia(err, stream) {\n const { props } = this;\n if (err || !stream) {\n this.setState({ hasUserMedia: false });\n props.onUserMediaError(err);\n return;\n }\n this.stream = stream;\n try {\n if (this.video) {\n this.video.srcObject = stream;\n }\n this.setState({ hasUserMedia: true });\n }\n catch (error) {\n this.setState({\n hasUserMedia: true,\n src: window.URL.createObjectURL(stream)\n });\n }\n props.onUserMedia();\n }\n render() {\n const { state, props } = this;\n const { audio, onUserMedia, onUserMediaError, screenshotFormat, screenshotQuality, minScreenshotWidth, minScreenshotHeight, audioConstraints, videoConstraints, imageSmoothing, mirrored, style = {} } = props, rest = __rest(props, [\"audio\", \"onUserMedia\", \"onUserMediaError\", \"screenshotFormat\", \"screenshotQuality\", \"minScreenshotWidth\", \"minScreenshotHeight\", \"audioConstraints\", \"videoConstraints\", \"imageSmoothing\", \"mirrored\", \"style\"]);\n const videoStyle = mirrored ? Object.assign(Object.assign({}, style), { transform: `${style.transform || \"\"} scaleX(-1)` }) : style;\n return (react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"video\", Object.assign({ autoPlay: true, src: state.src, muted: audio, playsInline: true, ref: ref => {\n this.video = ref;\n }, style: videoStyle }, rest)));\n }\n}\nWebcam.defaultProps = {\n audio: true,\n imageSmoothing: true,\n mirrored: false,\n onUserMedia: () => { },\n onUserMediaError: () => { },\n screenshotFormat: \"image/webp\",\n screenshotQuality: 0.92,\n};\nWebcam.mountedInstances = [];\nWebcam.userMediaRequested = false;\n\n\n//# sourceURL=webpack://Webcam/./src/react-webcam.tsx?");
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"react\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\nvar __extends = (undefined && undefined.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __assign = (undefined && undefined.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nvar __rest = (undefined && undefined.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\n\nfunction hasGetUserMedia() {\n return !!((navigator.mediaDevices && navigator.mediaDevices.getUserMedia) ||\n navigator.webkitGetUserMedia ||\n navigator.mozGetUserMedia ||\n navigator.msGetUserMedia);\n}\nvar Webcam = /** @class */ (function (_super) {\n __extends(Webcam, _super);\n function Webcam(props) {\n var _this = _super.call(this, props) || this;\n _this.ctx = null;\n _this.state = {\n hasUserMedia: false\n };\n return _this;\n }\n Webcam.prototype.componentDidMount = function () {\n if (!hasGetUserMedia())\n return;\n var state = this.state;\n Webcam.mountedInstances.push(this);\n if (!state.hasUserMedia && !Webcam.userMediaRequested) {\n this.requestUserMedia();\n }\n };\n Webcam.prototype.componentDidUpdate = function (nextProps) {\n var props = this.props;\n if (JSON.stringify(nextProps.audioConstraints) !==\n JSON.stringify(props.audioConstraints) ||\n JSON.stringify(nextProps.videoConstraints) !==\n JSON.stringify(props.videoConstraints)) {\n this.requestUserMedia();\n }\n };\n Webcam.prototype.componentWillUnmount = function () {\n var state = this.state;\n var index = Webcam.mountedInstances.indexOf(this);\n Webcam.mountedInstances.splice(index, 1);\n Webcam.userMediaRequested = false;\n if (Webcam.mountedInstances.length === 0 && state.hasUserMedia) {\n if (this.stream.getVideoTracks && this.stream.getAudioTracks) {\n this.stream.getVideoTracks().map(function (track) { return track.stop(); });\n this.stream.getAudioTracks().map(function (track) { return track.stop(); });\n }\n else {\n this.stream.stop();\n }\n if (state.src) {\n window.URL.revokeObjectURL(state.src);\n }\n }\n };\n Webcam.prototype.getScreenshot = function () {\n var _a = this, state = _a.state, props = _a.props;\n if (!state.hasUserMedia)\n return null;\n var canvas = this.getCanvas();\n return (canvas &&\n canvas.toDataURL(props.screenshotFormat, props.screenshotQuality));\n };\n Webcam.prototype.getCanvas = function () {\n var _a = this, state = _a.state, props = _a.props;\n if (!this.video) {\n return null;\n }\n if (!state.hasUserMedia || !this.video.videoHeight)\n return null;\n if (!this.ctx) {\n var canvas_1 = document.createElement(\"canvas\");\n var aspectRatio = this.video.videoWidth / this.video.videoHeight;\n var canvasWidth = props.minScreenshotWidth || this.video.clientWidth;\n var canvasHeight = canvasWidth / aspectRatio;\n if (props.minScreenshotHeight &&\n canvasHeight < props.minScreenshotHeight) {\n canvasHeight = props.minScreenshotHeight;\n canvasWidth = canvasHeight * aspectRatio;\n }\n canvas_1.width = canvasWidth;\n canvas_1.height = canvasHeight;\n this.canvas = canvas_1;\n this.ctx = canvas_1.getContext(\"2d\");\n }\n var _b = this, ctx = _b.ctx, canvas = _b.canvas;\n if (ctx) {\n if (props.mirrored) {\n ctx.translate(canvas.width, 0);\n ctx.scale(-1, 1);\n }\n else {\n ctx.translate(0, 0);\n ctx.scale(1, 1);\n }\n ctx.imageSmoothingEnabled = props.imageSmoothing;\n ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height);\n }\n return canvas;\n };\n Webcam.prototype.requestUserMedia = function () {\n var props = this.props;\n navigator.getUserMedia =\n navigator.mediaDevices.getUserMedia ||\n navigator.webkitGetUserMedia ||\n navigator.mozGetUserMedia ||\n navigator.msGetUserMedia;\n var sourceSelected = function (audioConstraints, videoConstraints) {\n var constraints = {\n video: typeof videoConstraints !== \"undefined\" ? videoConstraints : true\n };\n if (props.audio) {\n constraints.audio =\n typeof audioConstraints !== \"undefined\" ? audioConstraints : true;\n }\n navigator.mediaDevices\n .getUserMedia(constraints)\n .then(function (stream) {\n Webcam.mountedInstances.forEach(function (instance) {\n return instance.handleUserMedia(null, stream);\n });\n })\n .catch(function (e) {\n Webcam.mountedInstances.forEach(function (instance) {\n return instance.handleUserMedia(e);\n });\n });\n };\n if (\"mediaDevices\" in navigator) {\n sourceSelected(props.audioConstraints, props.videoConstraints);\n }\n else {\n var optionalSource_1 = function (id) { return ({ optional: [{ sourceId: id }] }); };\n var constraintToSourceId_1 = function (constraint) {\n var deviceId = constraint.deviceId;\n if (typeof deviceId === \"string\") {\n return deviceId;\n }\n if (Array.isArray(deviceId) && deviceId.length > 0) {\n return deviceId[0];\n }\n if (typeof deviceId === \"object\" && deviceId.ideal) {\n return deviceId.ideal;\n }\n return null;\n };\n // @ts-ignore: deprecated api\n MediaStreamTrack.getSources(function (sources) {\n var audioSource = null;\n var videoSource = null;\n sources.forEach(function (source) {\n if (source.kind === \"audio\") {\n audioSource = source.id;\n }\n else if (source.kind === \"video\") {\n videoSource = source.id;\n }\n });\n var audioSourceId = constraintToSourceId_1(props.audioConstraints);\n if (audioSourceId) {\n audioSource = audioSourceId;\n }\n var videoSourceId = constraintToSourceId_1(props.videoConstraints);\n if (videoSourceId) {\n videoSource = videoSourceId;\n }\n sourceSelected(optionalSource_1(audioSource), optionalSource_1(videoSource));\n });\n }\n Webcam.userMediaRequested = true;\n };\n Webcam.prototype.handleUserMedia = function (err, stream) {\n var props = this.props;\n if (err || !stream) {\n this.setState({ hasUserMedia: false });\n props.onUserMediaError(err);\n return;\n }\n this.stream = stream;\n try {\n if (this.video) {\n this.video.srcObject = stream;\n }\n this.setState({ hasUserMedia: true });\n }\n catch (error) {\n this.setState({\n hasUserMedia: true,\n src: window.URL.createObjectURL(stream)\n });\n }\n props.onUserMedia();\n };\n Webcam.prototype.render = function () {\n var _this = this;\n var _a = this, state = _a.state, props = _a.props;\n var audio = props.audio, onUserMedia = props.onUserMedia, onUserMediaError = props.onUserMediaError, screenshotFormat = props.screenshotFormat, screenshotQuality = props.screenshotQuality, minScreenshotWidth = props.minScreenshotWidth, minScreenshotHeight = props.minScreenshotHeight, audioConstraints = props.audioConstraints, videoConstraints = props.videoConstraints, imageSmoothing = props.imageSmoothing, mirrored = props.mirrored, _b = props.style, style = _b === void 0 ? {} : _b, rest = __rest(props, [\"audio\", \"onUserMedia\", \"onUserMediaError\", \"screenshotFormat\", \"screenshotQuality\", \"minScreenshotWidth\", \"minScreenshotHeight\", \"audioConstraints\", \"videoConstraints\", \"imageSmoothing\", \"mirrored\", \"style\"]);\n var videoStyle = mirrored ? __assign(__assign({}, style), { transform: (style.transform || \"\") + \" scaleX(-1)\" }) : style;\n return (react__WEBPACK_IMPORTED_MODULE_0__[\"createElement\"](\"video\", __assign({ autoPlay: true, src: state.src, muted: audio, playsInline: true, ref: function (ref) {\n _this.video = ref;\n }, style: videoStyle }, rest)));\n };\n Webcam.defaultProps = {\n audio: true,\n imageSmoothing: true,\n mirrored: false,\n onUserMedia: function () { },\n onUserMediaError: function () { },\n screenshotFormat: \"image/webp\",\n screenshotQuality: 0.92,\n };\n Webcam.mountedInstances = [];\n Webcam.userMediaRequested = false;\n return Webcam;\n}(react__WEBPACK_IMPORTED_MODULE_0__[\"Component\"]));\n/* harmony default export */ __webpack_exports__[\"default\"] = (Webcam);\n\n\n//# sourceURL=webpack://Webcam/./src/react-webcam.tsx?");

@@ -110,0 +110,0 @@ /***/ }),

2

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){var t={};function i(r){if(t[r])return t[r].exports;var s=t[r]={i:r,l:!1,exports:{}};return e[r].call(s.exports,s,s.exports,i),s.l=!0,s.exports}return i.m=e,i.c=t,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)i.d(r,s,function(t){return e[t]}.bind(null,s));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=1)}([function(t,i){t.exports=e},function(e,t,i){"use strict";i.r(t),i.d(t,"default",function(){return n});var r=i(0),s=function(e,t){var i={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(i[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(r=Object.getOwnPropertySymbols(e);s<r.length;s++)t.indexOf(r[s])<0&&Object.prototype.propertyIsEnumerable.call(e,r[s])&&(i[r[s]]=e[r[s]])}return i};class n extends r.Component{constructor(e){super(e),this.ctx=null,this.state={hasUserMedia:!1}}componentDidMount(){if(!(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia))return;const{state:e}=this;n.mountedInstances.push(this),e.hasUserMedia||n.userMediaRequested||this.requestUserMedia()}componentDidUpdate(e){const{props:t}=this;JSON.stringify(e.audioConstraints)===JSON.stringify(t.audioConstraints)&&JSON.stringify(e.videoConstraints)===JSON.stringify(t.videoConstraints)||this.requestUserMedia()}componentWillUnmount(){const{state:e}=this,t=n.mountedInstances.indexOf(this);n.mountedInstances.splice(t,1),n.userMediaRequested=!1,0===n.mountedInstances.length&&e.hasUserMedia&&(this.stream.getVideoTracks&&this.stream.getAudioTracks?(this.stream.getVideoTracks().map(e=>e.stop()),this.stream.getAudioTracks().map(e=>e.stop())):this.stream.stop(),e.src&&window.URL.revokeObjectURL(e.src))}getScreenshot(){const{state:e,props:t}=this;if(!e.hasUserMedia)return null;const i=this.getCanvas();return i&&i.toDataURL(t.screenshotFormat,t.screenshotQuality)}getCanvas(){const{state:e,props:t}=this;if(!this.video)return null;if(!e.hasUserMedia||!this.video.videoHeight)return null;if(!this.ctx){const e=document.createElement("canvas"),i=this.video.videoWidth/this.video.videoHeight;let r=t.minScreenshotWidth||this.video.clientWidth,s=r/i;t.minScreenshotHeight&&s<t.minScreenshotHeight&&(r=(s=t.minScreenshotHeight)*i),e.width=r,e.height=s,this.canvas=e,this.ctx=e.getContext("2d")}const{ctx:i,canvas:r}=this;return i&&(t.mirrored?(i.translate(r.width,0),i.scale(-1,1)):(i.translate(0,0),i.scale(1,1)),i.imageSmoothingEnabled=t.imageSmoothing,i.drawImage(this.video,0,0,r.width,r.height)),r}requestUserMedia(){const{props:e}=this;navigator.getUserMedia=navigator.mediaDevices.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;const t=(t,i)=>{const r={video:void 0===i||i};e.audio&&(r.audio=void 0===t||t),navigator.mediaDevices.getUserMedia(r).then(e=>{n.mountedInstances.forEach(t=>t.handleUserMedia(null,e))}).catch(e=>{n.mountedInstances.forEach(t=>t.handleUserMedia(e))})};if("mediaDevices"in navigator)t(e.audioConstraints,e.videoConstraints);else{const i=e=>({optional:[{sourceId:e}]}),r=e=>{const{deviceId:t}=e;return"string"==typeof t?t:Array.isArray(t)&&t.length>0?t[0]:"object"==typeof t&&t.ideal?t.ideal:null};MediaStreamTrack.getSources(s=>{let n=null,o=null;s.forEach(e=>{"audio"===e.kind?n=e.id:"video"===e.kind&&(o=e.id)});const a=r(e.audioConstraints);a&&(n=a);const d=r(e.videoConstraints);d&&(o=d),t(i(n),i(o))})}n.userMediaRequested=!0}handleUserMedia(e,t){const{props:i}=this;if(e||!t)return this.setState({hasUserMedia:!1}),void i.onUserMediaError(e);this.stream=t;try{this.video&&(this.video.srcObject=t),this.setState({hasUserMedia:!0})}catch(e){this.setState({hasUserMedia:!0,src:window.URL.createObjectURL(t)})}i.onUserMedia()}render(){const{state:e,props:t}=this,{audio:i,onUserMedia:n,onUserMediaError:o,screenshotFormat:a,screenshotQuality:d,minScreenshotWidth:c,minScreenshotHeight:u,audioConstraints:h,videoConstraints:l,imageSmoothing:m,mirrored:f,style:p={}}=t,g=s(t,["audio","onUserMedia","onUserMediaError","screenshotFormat","screenshotQuality","minScreenshotWidth","minScreenshotHeight","audioConstraints","videoConstraints","imageSmoothing","mirrored","style"]),v=f?Object.assign(Object.assign({},p),{transform:`${p.transform||""} scaleX(-1)`}):p;return r.createElement("video",Object.assign({autoPlay:!0,src:e.src,muted:i,playsInline:!0,ref:e=>{this.video=e},style:v},g))}}n.defaultProps={audio:!0,imageSmoothing:!0,mirrored:!1,onUserMedia:()=>{},onUserMediaError:()=>{},screenshotFormat:"image/webp",screenshotQuality:.92},n.mountedInstances=[],n.userMediaRequested=!1}]).default});
!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){var t={};function r(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,r),i.l=!0,i.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)r.d(n,i,function(t){return e[t]}.bind(null,i));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(t,r){t.exports=e},function(e,t,r){"use strict";r.r(t);var n,i=r(0),o=(n=function(e,t){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(e,t)},function(e,t){function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}),s=function(){return(s=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)},a=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(e);i<n.length;i++)t.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(e,n[i])&&(r[n[i]]=e[n[i]])}return r};var c=function(e){function t(t){var r=e.call(this,t)||this;return r.ctx=null,r.state={hasUserMedia:!1},r}return o(t,e),t.prototype.componentDidMount=function(){if(navigator.mediaDevices&&navigator.mediaDevices.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia){var e=this.state;t.mountedInstances.push(this),e.hasUserMedia||t.userMediaRequested||this.requestUserMedia()}},t.prototype.componentDidUpdate=function(e){var t=this.props;JSON.stringify(e.audioConstraints)===JSON.stringify(t.audioConstraints)&&JSON.stringify(e.videoConstraints)===JSON.stringify(t.videoConstraints)||this.requestUserMedia()},t.prototype.componentWillUnmount=function(){var e=this.state,r=t.mountedInstances.indexOf(this);t.mountedInstances.splice(r,1),t.userMediaRequested=!1,0===t.mountedInstances.length&&e.hasUserMedia&&(this.stream.getVideoTracks&&this.stream.getAudioTracks?(this.stream.getVideoTracks().map(function(e){return e.stop()}),this.stream.getAudioTracks().map(function(e){return e.stop()})):this.stream.stop(),e.src&&window.URL.revokeObjectURL(e.src))},t.prototype.getScreenshot=function(){var e=this.state,t=this.props;if(!e.hasUserMedia)return null;var r=this.getCanvas();return r&&r.toDataURL(t.screenshotFormat,t.screenshotQuality)},t.prototype.getCanvas=function(){var e=this.state,t=this.props;if(!this.video)return null;if(!e.hasUserMedia||!this.video.videoHeight)return null;if(!this.ctx){var r=document.createElement("canvas"),n=this.video.videoWidth/this.video.videoHeight,i=t.minScreenshotWidth||this.video.clientWidth,o=i/n;t.minScreenshotHeight&&o<t.minScreenshotHeight&&(i=(o=t.minScreenshotHeight)*n),r.width=i,r.height=o,this.canvas=r,this.ctx=r.getContext("2d")}var s=this.ctx,a=this.canvas;return s&&(t.mirrored?(s.translate(a.width,0),s.scale(-1,1)):(s.translate(0,0),s.scale(1,1)),s.imageSmoothingEnabled=t.imageSmoothing,s.drawImage(this.video,0,0,a.width,a.height)),a},t.prototype.requestUserMedia=function(){var e=this.props;navigator.getUserMedia=navigator.mediaDevices.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;var r=function(r,n){var i={video:void 0===n||n};e.audio&&(i.audio=void 0===r||r),navigator.mediaDevices.getUserMedia(i).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(e.audioConstraints,e.videoConstraints);else{var n=function(e){return{optional:[{sourceId:e}]}},i=function(e){var t=e.deviceId;return"string"==typeof t?t:Array.isArray(t)&&t.length>0?t[0]:"object"==typeof t&&t.ideal?t.ideal:null};MediaStreamTrack.getSources(function(t){var o=null,s=null;t.forEach(function(e){"audio"===e.kind?o=e.id:"video"===e.kind&&(s=e.id)});var a=i(e.audioConstraints);a&&(o=a);var c=i(e.videoConstraints);c&&(s=c),r(n(o),n(s))})}t.userMediaRequested=!0},t.prototype.handleUserMedia=function(e,t){var r=this.props;if(e||!t)return this.setState({hasUserMedia:!1}),void r.onUserMediaError(e);this.stream=t;try{this.video&&(this.video.srcObject=t),this.setState({hasUserMedia:!0})}catch(e){this.setState({hasUserMedia:!0,src:window.URL.createObjectURL(t)})}r.onUserMedia()},t.prototype.render=function(){var e=this,t=this.state,r=this.props,n=r.audio,o=(r.onUserMedia,r.onUserMediaError,r.screenshotFormat,r.screenshotQuality,r.minScreenshotWidth,r.minScreenshotHeight,r.audioConstraints,r.videoConstraints,r.imageSmoothing,r.mirrored),c=r.style,d=void 0===c?{}:c,u=a(r,["audio","onUserMedia","onUserMediaError","screenshotFormat","screenshotQuality","minScreenshotWidth","minScreenshotHeight","audioConstraints","videoConstraints","imageSmoothing","mirrored","style"]),h=o?s(s({},d),{transform:(d.transform||"")+" scaleX(-1)"}):d;return i.createElement("video",s({autoPlay:!0,src:t.src,muted:n,playsInline:!0,ref:function(t){e.video=t},style:h},u))},t.defaultProps={audio:!0,imageSmoothing:!0,mirrored:!1,onUserMedia:function(){},onUserMediaError:function(){},screenshotFormat:"image/webp",screenshotQuality:.92},t.mountedInstances=[],t.userMediaRequested=!1,t}(i.Component);t.default=c}]).default});

2

package.json
{
"name": "react-webcam",
"version": "3.1.0",
"version": "3.1.1",
"description": "React webcam component",

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

5

tsconfig.json

@@ -8,6 +8,7 @@ {

"jsx": "react",
"target": "es2017",
"target": "es5",
"allowJs": false,
"moduleResolution": "node",
"declaration": true
"declaration": true,
"lib": ["dom", "es5", "scripthost", "es6"]
},

@@ -14,0 +15,0 @@ "include": [

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