diff --git a/dist/react-webcam.js b/dist/react-webcam.js
index 5ff568c7..d185a0ee 100644
--- a/dist/react-webcam.js
+++ b/dist/react-webcam.js
@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("prop-types"), require("react"));
+		module.exports = factory(require("react"));
 	else if(typeof define === 'function' && define.amd)
-		define(["prop-types", "react"], factory);
+		define(["react"], factory);
 	else if(typeof exports === 'object')
-		exports["Webcam"] = factory(require("prop-types"), require("react"));
+		exports["Webcam"] = factory(require("react"));
 	else
-		root["Webcam"] = factory(root["PropTypes"], root["React"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_1__) {
+		root["Webcam"] = factory(root["React"]);
+})(this, function(__WEBPACK_EXTERNAL_MODULE_react__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -43,20 +43,37 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// expose the module cache
 /******/ 	__webpack_require__.c = installedModules;
 /******/
-/******/ 	// identity function for calling harmony imports with the correct context
-/******/ 	__webpack_require__.i = function(value) { return value; };
-/******/
 /******/ 	// define getter function for harmony exports
 /******/ 	__webpack_require__.d = function(exports, name, getter) {
 /******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, {
-/******/ 				configurable: false,
-/******/ 				enumerable: true,
-/******/ 				get: getter
-/******/ 			});
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 /******/ 		}
 /******/ 	};
 /******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
 /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 /******/ 	__webpack_require__.n = function(module) {
 /******/ 		var getter = module && module.__esModule ?
@@ -72,348 +89,361 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
 /******/
+/******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 2);
+/******/ 	return __webpack_require__(__webpack_require__.s = "./src/react-webcam.tsx");
 /******/ })
 /************************************************************************/
-/******/ ([
-/* 0 */
-/***/ (function(module, exports) {
-
-module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
+/******/ ({
 
-/***/ }),
-/* 1 */
-/***/ (function(module, exports) {
-
-module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
-
-/***/ }),
-/* 2 */
-/***/ (function(module, exports, __webpack_require__) {
+/***/ "./src/react-webcam.tsx":
+/*!******************************!*\
+  !*** ./src/react-webcam.tsx ***!
+  \******************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _react = __webpack_require__(1);
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = __webpack_require__(0);
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-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"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-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) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function hasGetUserMedia() {
-  return !!(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
-}
-
-var constrainStringType = _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string), _propTypes2.default.shape({
-  exact: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string)])
-}), _propTypes2.default.shape({
-  ideal: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string)])
-})]);
-
-var constrainBooleanType = _propTypes2.default.oneOfType([_propTypes2.default.shape({
-  exact: _propTypes2.default.bool
-}), _propTypes2.default.shape({
-  ideal: _propTypes2.default.bool
-})]);
-
-var constrainLongType = _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({
-  exact: _propTypes2.default.number,
-  ideal: _propTypes2.default.number,
-  min: _propTypes2.default.number,
-  max: _propTypes2.default.number
-})]);
-
-var constrainDoubleType = constrainLongType;
-
-var audioConstraintType = _propTypes2.default.shape({
-  deviceId: constrainStringType,
-  groupId: constrainStringType,
-  autoGainControl: constrainBooleanType,
-  channelCount: constrainLongType,
-  latency: constrainDoubleType,
-  noiseSuppression: constrainBooleanType,
-  sampleRate: constrainLongType,
-  sampleSize: constrainLongType,
-  volume: constrainDoubleType
-});
-
-var videoConstraintType = _propTypes2.default.shape({
-  deviceId: constrainStringType,
-  groupId: constrainStringType,
-  aspectRatio: constrainDoubleType,
-  facingMode: constrainStringType,
-  frameRate: constrainDoubleType,
-  height: constrainLongType,
-  width: constrainLongType
-});
-
-var Webcam = function (_Component) {
-  _inherits(Webcam, _Component);
-
-  function Webcam() {
-    _classCallCheck(this, Webcam);
-
-    var _this = _possibleConstructorReturn(this, (Webcam.__proto__ || Object.getPrototypeOf(Webcam)).call(this));
-
-    _this.state = {
-      hasUserMedia: false
+__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 _this;
-  }
-
-  _createClass(Webcam, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      if (!hasGetUserMedia()) return;
-
-      Webcam.mountedInstances.push(this);
+    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;
+};
 
-      if (!this.state.hasUserMedia && !Webcam.userMediaRequested) {
-        this.requestUserMedia();
-      }
+// polyfill based on https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
+(function polyfillGetUserMedia() {
+    if (typeof window === 'undefined') {
+        return;
     }
-  }, {
-    key: 'componentWillUpdate',
-    value: function componentWillUpdate(nextProps) {
-      if (JSON.stringify(nextProps.audioConstraints) !== JSON.stringify(this.props.audioConstraints) || JSON.stringify(nextProps.videoConstraints) !== JSON.stringify(this.props.videoConstraints)) {
-        this.requestUserMedia();
-      }
+    // Older browsers might not implement mediaDevices at all, so we set an empty object first
+    if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {};
     }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      var index = Webcam.mountedInstances.indexOf(this);
-      Webcam.mountedInstances.splice(index, 1);
-
-      if (Webcam.mountedInstances.length === 0 && this.state.hasUserMedia) {
-        if (this.stream.stop) {
-          this.stream.stop();
-        } else {
-          if (this.stream.getVideoTracks) {
-            this.stream.getVideoTracks().map(function (track) {
-              return track.stop();
-            });
-          }
-          if (this.stream.getAudioTracks) {
-            this.stream.getAudioTracks().map(function (track) {
-              return track.stop();
+    // Some browsers partially implement mediaDevices. We can't just assign an object
+    // with getUserMedia as it would overwrite existing properties.
+    // Here, we will just add the getUserMedia property if it's missing.
+    if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function (constraints) {
+            // First get ahold of the legacy getUserMedia, if present
+            var getUserMedia = navigator.getUserMedia ||
+                navigator.webkitGetUserMedia ||
+                navigator.mozGetUserMedia ||
+                navigator.msGetUserMedia;
+            // Some browsers just don't implement it - return a rejected promise with an error
+            // to keep a consistent interface
+            if (!getUserMedia) {
+                return Promise.reject(new Error("getUserMedia is not implemented in this browser"));
+            }
+            // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
+            return new Promise(function (resolve, reject) {
+                getUserMedia.call(navigator, constraints, resolve, reject);
             });
-          }
-        }
-        Webcam.userMediaRequested = false;
-        window.URL.revokeObjectURL(this.state.src);
-      }
-    }
-  }, {
-    key: 'getScreenshot',
-    value: function getScreenshot() {
-      if (!this.state.hasUserMedia) return null;
-
-      var canvas = this.getCanvas();
-      return canvas && canvas.toDataURL(this.props.screenshotFormat, this.props.screenshotQuality);
-    }
-  }, {
-    key: 'getCanvas',
-    value: function getCanvas() {
-      if (!this.state.hasUserMedia || !this.video.videoHeight) return null;
-
-      if (!this.ctx) {
-        var _canvas = document.createElement('canvas');
-        var aspectRatio = this.video.videoWidth / this.video.videoHeight;
-
-        var canvasWidth = this.props.screenshotWidth || this.video.clientWidth;
-
-        _canvas.width = canvasWidth;
-        _canvas.height = canvasWidth / aspectRatio;
-
-        this.canvas = _canvas;
-        this.ctx = _canvas.getContext('2d');
-      }
-
-      var ctx = this.ctx,
-          canvas = this.canvas;
-
-      ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height);
-
-      return canvas;
+        };
     }
-  }, {
-    key: 'requestUserMedia',
-    value: function requestUserMedia() {
-      var _this2 = this;
-
-      navigator.getUserMedia = navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
-
-      var sourceSelected = function sourceSelected(audioConstraints, videoConstraints) {
-        var constraints = {
-          video: videoConstraints || true
+})();
+function hasGetUserMedia() {
+    return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
+}
+var Webcam = /** @class */ (function (_super) {
+    __extends(Webcam, _super);
+    function Webcam(props) {
+        var _this = _super.call(this, props) || this;
+        _this.canvas = null;
+        _this.ctx = null;
+        _this.requestUserMediaId = 0;
+        _this.unmounted = false;
+        _this.state = {
+            hasUserMedia: false
         };
-
-        if (_this2.props.audio) {
-          constraints.audio = audioConstraints || true;
+        return _this;
+    }
+    Webcam.prototype.componentDidMount = function () {
+        var _a = this, state = _a.state, props = _a.props;
+        this.unmounted = false;
+        if (!hasGetUserMedia()) {
+            props.onUserMediaError("getUserMedia not supported");
+            return;
         }
-
-        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(this.props.audioConstraints, this.props.videoConstraints);
-      } else {
-        var optionalSource = function optionalSource(id) {
-          return { optional: [{ sourceId: id }] };
-        };
-
-        var constraintToSourceId = function constraintToSourceId(constraint) {
-          var deviceId = (constraint || {}).deviceId;
-
-          if (typeof deviceId === 'string') {
-            return deviceId;
-          } else if (Array.isArray(deviceId) && deviceId.length > 0) {
-            return deviceId[0];
-          } else if ((typeof deviceId === 'undefined' ? 'undefined' : _typeof(deviceId)) === 'object' && deviceId.ideal) {
-            return deviceId.ideal;
-          }
-
-          return null;
-        };
-
-        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;
+        if (!state.hasUserMedia) {
+            this.requestUserMedia();
+        }
+        if (props.children && typeof props.children != 'function') {
+            console.warn("children must be a function");
+        }
+    };
+    Webcam.prototype.componentDidUpdate = function (nextProps) {
+        var props = this.props;
+        if (!hasGetUserMedia()) {
+            props.onUserMediaError("getUserMedia not supported");
+            return;
+        }
+        var audioConstraintsChanged = JSON.stringify(nextProps.audioConstraints) !==
+            JSON.stringify(props.audioConstraints);
+        var videoConstraintsChanged = JSON.stringify(nextProps.videoConstraints) !==
+            JSON.stringify(props.videoConstraints);
+        var minScreenshotWidthChanged = nextProps.minScreenshotWidth !== props.minScreenshotWidth;
+        var minScreenshotHeightChanged = nextProps.minScreenshotHeight !== props.minScreenshotHeight;
+        if (videoConstraintsChanged ||
+            minScreenshotWidthChanged ||
+            minScreenshotHeightChanged) {
+            this.canvas = null;
+            this.ctx = null;
+        }
+        if (audioConstraintsChanged || videoConstraintsChanged) {
+            this.stopAndCleanup();
+            this.requestUserMedia();
+        }
+    };
+    Webcam.prototype.componentWillUnmount = function () {
+        this.unmounted = true;
+        this.stopAndCleanup();
+    };
+    Webcam.stopMediaStream = function (stream) {
+        if (stream) {
+            if (stream.getVideoTracks && stream.getAudioTracks) {
+                stream.getVideoTracks().map(function (track) {
+                    stream.removeTrack(track);
+                    track.stop();
+                });
+                stream.getAudioTracks().map(function (track) {
+                    stream.removeTrack(track);
+                    track.stop();
+                });
             }
-          });
-
-          var audioSourceId = constraintToSourceId(_this2.props.audioConstraints);
-          if (audioSourceId) {
-            audioSource = audioSourceId;
-          }
-
-          var videoSourceId = constraintToSourceId(_this2.props.videoConstraints);
-          if (videoSourceId) {
-            videoSource = videoSourceId;
-          }
-
-          sourceSelected(optionalSource(audioSource), optionalSource(videoSource));
-        });
-      }
-
-      Webcam.userMediaRequested = true;
-    }
-  }, {
-    key: 'handleUserMedia',
-    value: function handleUserMedia(error, stream) {
-      if (error) {
-        this.setState({
-          hasUserMedia: false
-        });
-        this.props.onUserMediaError(error);
-
-        return;
-      }
-      try {
-        var src = window.URL.createObjectURL(stream);
-
-        this.stream = stream;
-        this.setState({
-          hasUserMedia: true,
-          src: src
-        });
-      } catch (err) {
+            else {
+                stream.stop();
+            }
+        }
+    };
+    Webcam.prototype.stopAndCleanup = function () {
+        var state = this.state;
+        if (state.hasUserMedia) {
+            Webcam.stopMediaStream(this.stream);
+            if (state.src) {
+                window.URL.revokeObjectURL(state.src);
+            }
+        }
+    };
+    Webcam.prototype.getScreenshot = function (screenshotDimensions) {
+        var _a = this, state = _a.state, props = _a.props;
+        if (!state.hasUserMedia)
+            return null;
+        var canvas = this.getCanvas(screenshotDimensions);
+        return (canvas &&
+            canvas.toDataURL(props.screenshotFormat, props.screenshotQuality));
+    };
+    Webcam.prototype.getCanvas = function (screenshotDimensions) {
+        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 canvasWidth = this.video.videoWidth;
+            var canvasHeight = this.video.videoHeight;
+            if (!this.props.forceScreenshotSourceSize) {
+                var aspectRatio = canvasWidth / canvasHeight;
+                canvasWidth = props.minScreenshotWidth || this.video.clientWidth;
+                canvasHeight = canvasWidth / aspectRatio;
+                if (props.minScreenshotHeight &&
+                    canvasHeight < props.minScreenshotHeight) {
+                    canvasHeight = props.minScreenshotHeight;
+                    canvasWidth = canvasHeight * aspectRatio;
+                }
+            }
+            this.canvas = document.createElement("canvas");
+            this.canvas.width = (screenshotDimensions === null || screenshotDimensions === void 0 ? void 0 : screenshotDimensions.width) || canvasWidth;
+            this.canvas.height = (screenshotDimensions === null || screenshotDimensions === void 0 ? void 0 : screenshotDimensions.height) || canvasHeight;
+            this.ctx = this.canvas.getContext("2d");
+        }
+        var _b = this, ctx = _b.ctx, canvas = _b.canvas;
+        if (ctx && canvas) {
+            // adjust the height and width of the canvas to the given dimensions
+            canvas.width = (screenshotDimensions === null || screenshotDimensions === void 0 ? void 0 : screenshotDimensions.width) || canvas.width;
+            canvas.height = (screenshotDimensions === null || screenshotDimensions === void 0 ? void 0 : screenshotDimensions.height) || canvas.height;
+            // mirror the screenshot
+            if (props.mirrored) {
+                ctx.translate(canvas.width, 0);
+                ctx.scale(-1, 1);
+            }
+            ctx.imageSmoothingEnabled = props.imageSmoothing;
+            ctx.drawImage(this.video, 0, 0, (screenshotDimensions === null || screenshotDimensions === void 0 ? void 0 : screenshotDimensions.width) || canvas.width, (screenshotDimensions === null || screenshotDimensions === void 0 ? void 0 : screenshotDimensions.height) || canvas.height);
+            // invert mirroring
+            if (props.mirrored) {
+                ctx.scale(-1, 1);
+                ctx.translate(-canvas.width, 0);
+            }
+        }
+        return canvas;
+    };
+    Webcam.prototype.requestUserMedia = function () {
+        var _this = this;
+        var props = this.props;
+        var sourceSelected = function (audioConstraints, videoConstraints) {
+            var constraints = {
+                video: typeof videoConstraints !== "undefined" ? videoConstraints : true
+            };
+            if (props.audio) {
+                constraints.audio =
+                    typeof audioConstraints !== "undefined" ? audioConstraints : true;
+            }
+            _this.requestUserMediaId++;
+            var myRequestUserMediaId = _this.requestUserMediaId;
+            navigator.mediaDevices
+                .getUserMedia(constraints)
+                .then(function (stream) {
+                if (_this.unmounted || myRequestUserMediaId !== _this.requestUserMediaId) {
+                    Webcam.stopMediaStream(stream);
+                }
+                else {
+                    _this.handleUserMedia(null, stream);
+                }
+            })
+                .catch(function (e) {
+                _this.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.prototype.handleUserMedia = function (err, stream) {
+        var props = this.props;
+        if (err || !stream) {
+            this.setState({ hasUserMedia: false });
+            props.onUserMediaError(err);
+            return;
+        }
         this.stream = stream;
-        this.video.srcObject = stream;
-        this.setState({
-          hasUserMedia: true
-        });
-      }
+        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(stream);
+    };
+    Webcam.prototype.render = function () {
+        var _this = this;
+        var _a = this, state = _a.state, props = _a.props;
+        var audio = props.audio, forceScreenshotSourceSize = props.forceScreenshotSourceSize, disablePictureInPicture = props.disablePictureInPicture, 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, children = props.children, rest = __rest(props, ["audio", "forceScreenshotSourceSize", "disablePictureInPicture", "onUserMedia", "onUserMediaError", "screenshotFormat", "screenshotQuality", "minScreenshotWidth", "minScreenshotHeight", "audioConstraints", "videoConstraints", "imageSmoothing", "mirrored", "style", "children"]);
+        var videoStyle = mirrored ? __assign(__assign({}, style), { transform: (style.transform || "") + " scaleX(-1)" }) : style;
+        var childrenProps = {
+            getScreenshot: this.getScreenshot.bind(this),
+        };
+        return (react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
+            react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("video", __assign({ autoPlay: true, disablePictureInPicture: disablePictureInPicture, src: state.src, muted: !audio, playsInline: true, ref: function (ref) {
+                    _this.video = ref;
+                }, style: videoStyle }, rest)),
+            children && children(childrenProps)));
+    };
+    Webcam.defaultProps = {
+        audio: false,
+        disablePictureInPicture: false,
+        forceScreenshotSourceSize: false,
+        imageSmoothing: true,
+        mirrored: false,
+        onUserMedia: function () { return undefined; },
+        onUserMediaError: function () { return undefined; },
+        screenshotFormat: "image/webp",
+        screenshotQuality: 0.92,
+    };
+    return Webcam;
+}(react__WEBPACK_IMPORTED_MODULE_0__["Component"]));
+/* harmony default export */ __webpack_exports__["default"] = (Webcam);
 
-      this.props.onUserMedia();
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this3 = this;
 
-      return _react2.default.createElement('video', {
-        autoPlay: true,
-        width: this.props.width,
-        height: this.props.height,
-        src: this.state.src,
-        muted: this.props.audio,
-        className: this.props.className,
-        playsInline: true,
-        style: this.props.style,
-        ref: function ref(_ref) {
-          _this3.video = _ref;
-        }
-      });
-    }
-  }]);
+/***/ }),
 
-  return Webcam;
-}(_react.Component);
+/***/ "react":
+/*!**************************************************************************************!*\
+  !*** external {"root":"React","commonjs2":"react","commonjs":"react","amd":"react"} ***!
+  \**************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
 
-Webcam.defaultProps = {
-  audio: true,
-  className: '',
-  height: 480,
-  onUserMedia: function onUserMedia() {},
-  onUserMediaError: function onUserMediaError() {},
-  screenshotFormat: 'image/webp',
-  width: 640,
-  screenshotQuality: 0.92
-};
-Webcam.propTypes = {
-  audio: _propTypes2.default.bool,
-  onUserMedia: _propTypes2.default.func,
-  onUserMediaError: _propTypes2.default.func,
-  height: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
-  width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
-  screenshotFormat: _propTypes2.default.oneOf(['image/webp', 'image/png', 'image/jpeg']),
-  style: _propTypes2.default.object,
-  className: _propTypes2.default.string,
-  screenshotQuality: _propTypes2.default.number,
-  screenshotWidth: _propTypes2.default.number,
-  audioConstraints: audioConstraintType,
-  videoConstraints: videoConstraintType
-};
-Webcam.mountedInstances = [];
-Webcam.userMediaRequested = false;
-exports.default = Webcam;
-module.exports = exports['default'];
+module.exports = __WEBPACK_EXTERNAL_MODULE_react__;
 
 /***/ })
-/******/ ]);
-});
\ No newline at end of file
+
+/******/ })["default"];
+});
+//# sourceMappingURL=react-webcam.js.map
\ No newline at end of file
diff --git a/dist/react-webcam.min.js b/dist/react-webcam.min.js
index 0d0db85e..832da40e 100644
--- a/dist/react-webcam.min.js
+++ b/dist/react-webcam.min.js
@@ -1 +1,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){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"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 i(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.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia)}t.__esModule=!0;var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),u=n(1),c=r(u),d=function(e){function t(){o(this,t),e.call(this),this.state={hasUserMedia:!1}}return i(t,e),s(t,null,[{key:"defaultProps",value:{audio:!0,height:480,width:640,screenshotFormat:"image/webp",onUserMedia:function(){}},enumerable:!0},{key:"propTypes",value:{audio:u.PropTypes.bool,onUserMedia:u.PropTypes.func,height:u.PropTypes.oneOfType([u.PropTypes.number,u.PropTypes.string]),width:u.PropTypes.oneOfType([u.PropTypes.number,u.PropTypes.string]),screenshotFormat:u.PropTypes.oneOf(["image/webp","image/png","image/jpeg"]),className:u.PropTypes.string},enumerable:!0},{key:"mountedInstances",value:[],enumerable:!0},{key:"userMediaRequested",value:!1,enumerable:!0}]),t.prototype.componentDidMount=function(){a()&&(t.mountedInstances.push(this),this.state.hasUserMedia||t.userMediaRequested||this.requestUserMedia())},t.prototype.requestUserMedia=function(){var e=this;navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;var n=function(n,r){var o={video:{optional:[{sourceId:r}]}};e.props.audio&&(o.audio={optional:[{sourceId:n}]}),navigator.getUserMedia(o,function(e){t.mountedInstances.forEach(function(t){return t.handleUserMedia(null,e)})},function(e){t.mountedInstances.forEach(function(t){return t.handleUserMedia(e)})})};this.props.audioSource&&this.props.videoSource?n(this.props.audioSource,this.props.videoSource):"mediaDevices"in navigator?navigator.mediaDevices.enumerateDevices().then(function(e){var t=null,r=null;e.forEach(function(e){"audio"===e.kind?t=e.id:"video"===e.kind&&(r=e.id)}),n(t,r)}).catch(function(e){console.log(e.name+": "+e.message)}):MediaStreamTrack.getSources(function(e){var t=null,r=null;e.forEach(function(e){"audio"===e.kind?t=e.id:"video"===e.kind&&(r=e.id)}),n(t,r)}),t.userMediaRequested=!0},t.prototype.handleUserMedia=function(e,t){if(e)return void this.setState({hasUserMedia:!1});var n=window.URL.createObjectURL(t);this.stream=t,this.setState({hasUserMedia:!0,src:n}),this.props.onUserMedia()},t.prototype.componentWillUnmount=function(){var e=t.mountedInstances.indexOf(this);t.mountedInstances.splice(e,1),0===t.mountedInstances.length&&this.state.hasUserMedia&&(this.stream.stop(),t.userMediaRequested=!1,window.URL.revokeObjectURL(this.state.src))},t.prototype.getScreenshot=function(){if(!this.state.hasUserMedia)return null;var e=this.getCanvas();return e.toDataURL(this.props.screenshotFormat)},t.prototype.getCanvas=function(){if(!this.state.hasUserMedia)return null;var e=c.default.findDOMNode(this);if(!this.ctx){var t=document.createElement("canvas");t.height=e.clientHeight,t.width=e.clientWidth,this.canvas=t,this.ctx=t.getContext("2d")}var n=this.ctx,r=this.canvas;return n.drawImage(e,0,0,r.width,r.height),r},t.prototype.render=function(){return c.default.createElement("video",{autoPlay:!0,width:this.props.width,height:this.props.height,src:this.state.src,className:this.props.className})},t}(u.Component);t.default=d,e.exports=t.default},function(t,n){t.exports=e}])});
\ No newline at end of file
+!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(i){if(t[i])return t[i].exports;var n=t[i]={i:i,l:!1,exports:{}};return e[i].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=e,r.c=t,r.d=function(e,t,i){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},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 i=Object.create(null);if(r.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(i,n,function(t){return e[t]}.bind(null,n));return i},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 i,n=r(0),o=(i=function(e,t){return(i=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}i(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,i=arguments.length;r<i;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}).apply(this,arguments)},a=function(e,t){var r={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(r[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(i=Object.getOwnPropertySymbols(e);n<i.length;n++)t.indexOf(i[n])<0&&Object.prototype.propertyIsEnumerable.call(e,i[n])&&(r[i[n]]=e[i[n]])}return r};function c(){return!(!navigator.mediaDevices||!navigator.mediaDevices.getUserMedia)}"undefined"!=typeof window&&(void 0===navigator.mediaDevices&&(navigator.mediaDevices={}),void 0===navigator.mediaDevices.getUserMedia&&(navigator.mediaDevices.getUserMedia=function(e){var t=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;return t?new Promise((function(r,i){t.call(navigator,e,r,i)})):Promise.reject(new Error("getUserMedia is not implemented in this browser"))}));var d=function(e){function t(t){var r=e.call(this,t)||this;return r.canvas=null,r.ctx=null,r.requestUserMediaId=0,r.unmounted=!1,r.state={hasUserMedia:!1},r}return o(t,e),t.prototype.componentDidMount=function(){var e=this.state,t=this.props;this.unmounted=!1,c()?(e.hasUserMedia||this.requestUserMedia(),t.children&&"function"!=typeof t.children&&console.warn("children must be a function")):t.onUserMediaError("getUserMedia not supported")},t.prototype.componentDidUpdate=function(e){var t=this.props;if(c()){var r=JSON.stringify(e.audioConstraints)!==JSON.stringify(t.audioConstraints),i=JSON.stringify(e.videoConstraints)!==JSON.stringify(t.videoConstraints),n=e.minScreenshotWidth!==t.minScreenshotWidth,o=e.minScreenshotHeight!==t.minScreenshotHeight;(i||n||o)&&(this.canvas=null,this.ctx=null),(r||i)&&(this.stopAndCleanup(),this.requestUserMedia())}else t.onUserMediaError("getUserMedia not supported")},t.prototype.componentWillUnmount=function(){this.unmounted=!0,this.stopAndCleanup()},t.stopMediaStream=function(e){e&&(e.getVideoTracks&&e.getAudioTracks?(e.getVideoTracks().map((function(t){e.removeTrack(t),t.stop()})),e.getAudioTracks().map((function(t){e.removeTrack(t),t.stop()}))):e.stop())},t.prototype.stopAndCleanup=function(){var e=this.state;e.hasUserMedia&&(t.stopMediaStream(this.stream),e.src&&window.URL.revokeObjectURL(e.src))},t.prototype.getScreenshot=function(e){var t=this.state,r=this.props;if(!t.hasUserMedia)return null;var i=this.getCanvas(e);return i&&i.toDataURL(r.screenshotFormat,r.screenshotQuality)},t.prototype.getCanvas=function(e){var t=this.state,r=this.props;if(!this.video)return null;if(!t.hasUserMedia||!this.video.videoHeight)return null;if(!this.ctx){var i=this.video.videoWidth,n=this.video.videoHeight;if(!this.props.forceScreenshotSourceSize){var o=i/n;n=(i=r.minScreenshotWidth||this.video.clientWidth)/o,r.minScreenshotHeight&&n<r.minScreenshotHeight&&(i=(n=r.minScreenshotHeight)*o)}this.canvas=document.createElement("canvas"),this.canvas.width=(null==e?void 0:e.width)||i,this.canvas.height=(null==e?void 0:e.height)||n,this.ctx=this.canvas.getContext("2d")}var s=this.ctx,a=this.canvas;return s&&a&&(a.width=(null==e?void 0:e.width)||a.width,a.height=(null==e?void 0:e.height)||a.height,r.mirrored&&(s.translate(a.width,0),s.scale(-1,1)),s.imageSmoothingEnabled=r.imageSmoothing,s.drawImage(this.video,0,0,(null==e?void 0:e.width)||a.width,(null==e?void 0:e.height)||a.height),r.mirrored&&(s.scale(-1,1),s.translate(-a.width,0))),a},t.prototype.requestUserMedia=function(){var e=this,r=this.props,i=function(i,n){var o={video:void 0===n||n};r.audio&&(o.audio=void 0===i||i),e.requestUserMediaId++;var s=e.requestUserMediaId;navigator.mediaDevices.getUserMedia(o).then((function(r){e.unmounted||s!==e.requestUserMediaId?t.stopMediaStream(r):e.handleUserMedia(null,r)})).catch((function(t){e.handleUserMedia(t)}))};if("mediaDevices"in navigator)i(r.audioConstraints,r.videoConstraints);else{var n=function(e){return{optional:[{sourceId:e}]}},o=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(e){var t=null,s=null;e.forEach((function(e){"audio"===e.kind?t=e.id:"video"===e.kind&&(s=e.id)}));var a=o(r.audioConstraints);a&&(t=a);var c=o(r.videoConstraints);c&&(s=c),i(n(t),n(s))}))}},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)},t.prototype.render=function(){var e=this,t=this.state,r=this.props,i=r.audio,o=(r.forceScreenshotSourceSize,r.disablePictureInPicture),c=(r.onUserMedia,r.onUserMediaError,r.screenshotFormat,r.screenshotQuality,r.minScreenshotWidth,r.minScreenshotHeight,r.audioConstraints,r.videoConstraints,r.imageSmoothing,r.mirrored),d=r.style,u=void 0===d?{}:d,h=r.children,l=a(r,["audio","forceScreenshotSourceSize","disablePictureInPicture","onUserMedia","onUserMediaError","screenshotFormat","screenshotQuality","minScreenshotWidth","minScreenshotHeight","audioConstraints","videoConstraints","imageSmoothing","mirrored","style","children"]),p=c?s(s({},u),{transform:(u.transform||"")+" scaleX(-1)"}):u,f={getScreenshot:this.getScreenshot.bind(this)};return n.createElement(n.Fragment,null,n.createElement("video",s({autoPlay:!0,disablePictureInPicture:o,src:t.src,muted:!i,playsInline:!0,ref:function(t){e.video=t},style:p},l)),h&&h(f))},t.defaultProps={audio:!1,disablePictureInPicture:!1,forceScreenshotSourceSize:!1,imageSmoothing:!0,mirrored:!1,onUserMedia:function(){},onUserMediaError:function(){},screenshotFormat:"image/webp",screenshotQuality:.92},t}(n.Component);t.default=d}]).default}));
+//# sourceMappingURL=react-webcam.min.js.map
\ No newline at end of file