react-webcam - npm Package Compare versions

Comparing version 3.1.1 to 4.0.0-beta.0

dist/react-webcam.js

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

dist/react-webcam.min.js

@@ -1,1 +0,2 @@
-!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});
+!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});
+//# sourceMappingURL=react-webcam.min.js.map

package.json

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

webpack.config.js

 module.exports = {
   mode: process.env.NODE_ENV,
+  devtool: 'source-map',
   externals: [
@@ -4,0 +5,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

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

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

145318

increased by35.03%

Number of package files

16

increased by14.29%

Lines of code

632

increased by64.58%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes