videomail-client 16.1.1 → 16.4.0

package/dist/cjs/index.cjs

@@ -5948,7 +5948,8 @@ var __webpack_modules__ = {
         var percentTwenties = /%20/g;
         var Format = {
             RFC1738: 'RFC1738',
-            RFC3986: 'RFC3986'
+            RFC3986: 'RFC3986',
+            WHATWG: 'WHATWG'
         };
         module.exports = {
             default: Format.RFC3986,
@@ -5958,10 +5959,14 @@ var __webpack_modules__ = {
                 },
                 RFC3986: function(value) {
                     return String(value);
+                },
+                WHATWG: function(value) {
+                    return replace.call(value, percentTwenties, '+');
                 }
             },
             RFC1738: Format.RFC1738,
-            RFC3986: Format.RFC3986
+            RFC3986: Format.RFC3986,
+            WHATWG: Format.WHATWG
         };
     },
     b (module, __unused_rspack_exports, __webpack_require__) {
@@ -6022,8 +6027,8 @@ var __webpack_modules__ = {
                                 target: copy
                             };
                         }
-                        target[keys[j]] = copies.get(value);
-                    } else target[keys[j]] = value;
+                        utils.setProperty(target, keys[j], copies.get(value));
+                    } else utils.setProperty(target, keys[j], value);
                 }
             }
             return result;
@@ -6070,7 +6075,7 @@ var __webpack_modules__ = {
                 }
                 return val.split(',');
             }
-            if (options.throwOnLimitExceeded && currentArrayLength >= options.arrayLimit) throw new RangeError('Array limit exceeded. Only ' + options.arrayLimit + ' element' + (1 === options.arrayLimit ? '' : 's') + ' allowed in an array.');
+            if (options.throwOnLimitExceeded && currentArrayLength >= options.arrayLimit && currentArrayLength > 0) throw new RangeError('Array limit exceeded. Only ' + options.arrayLimit + ' element' + (1 === options.arrayLimit ? '' : 's') + ' allowed in an array.');
             return val;
         };
         var isoSentinel = 'utf8=%26%2310003%3B';
@@ -6107,11 +6112,13 @@ var __webpack_modules__ = {
                     val = options.strictNullHandling ? null : '';
                 } else {
                     key = options.decoder(part.slice(0, pos), defaults.decoder, charset, 'key');
-                    if (null !== key) val = utils.maybeMap(parseArrayValue(part.slice(pos + 1), options, isArray(obj[key]) ? obj[key].length : 0), function(encodedVal) {
+                    if (null !== key) val = utils.maybeMap(parseArrayValue(part.slice(pos + 1), options, isArray(obj[key]) && ('combine' === options.duplicates || isEmptyBracketKey) ? obj[key].length : 0), function(encodedVal) {
                         return options.decoder(encodedVal, defaults.decoder, charset, 'value');
                     });
                 }
-                if (val && options.interpretNumericEntities && 'iso-8859-1' === charset) val = interpretNumericEntities(String(val));
+                if (val && options.interpretNumericEntities && 'iso-8859-1' === charset) val = utils.maybeMap(val, function(value) {
+                    return value ? interpretNumericEntities(String(value)) : value;
+                });
                 if (isEmptyBracketKey) val = isArray(val) ? [
                     val
                 ] : val;
@@ -6140,7 +6147,7 @@ var __webpack_modules__ = {
                         __proto__: null
                     } : {};
                     var cleanRoot = '[' === root.charAt(0) && ']' === root.charAt(root.length - 1) ? root.slice(1, -1) : root;
-                    var decodedRoot = options.decodeDotInKeys ? cleanRoot.replace(/%2E/g, '.') : cleanRoot;
+                    var decodedRoot = options.decodeDotInKeys ? cleanRoot.replace(/%2E/gi, '.') : cleanRoot;
                     var index = parseInt(decodedRoot, 10);
                     var isValidArrayIndex = !isNaN(index) && root !== decodedRoot && String(index) === decodedRoot && index >= 0 && options.parseArrays;
                     if (options.parseArrays || '' !== decodedRoot) {
@@ -6402,7 +6409,7 @@ var __webpack_modules__ = {
             }
             var encodedPrefix = String(prefix);
             var adjustedPrefix = commaRoundTrip && isArray(obj) && 1 === obj.length ? encodedPrefix + '[]' : encodedPrefix;
-            if (allowEmptyArrays && isArray(obj) && 0 === obj.length && 0 === Object.keys(obj).length) return adjustedPrefix + '[]';
+            if (allowEmptyArrays && isArray(obj) && 0 === obj.length && 0 === Object.keys(obj).length) return formatter(encoder && !encodeValuesOnly ? encoder(adjustedPrefix, defaults.encoder, charset, 'key', format) : adjustedPrefix) + '[]';
             for(var j = 0; j < objKeys.length; ++j){
                 var key = objKeys[j];
                 var value = 'object' == typeof key && key && void 0 !== key.value ? key.value : obj[key];
@@ -6468,7 +6475,7 @@ var __webpack_modules__ = {
                 filter = options.filter;
                 obj = filter('', obj);
             } else if (isArray(options.filter)) {
-                filter = options.filter;
+                filter = options.filter.slice();
                 objKeys = filter;
             }
             var keys = [];
@@ -6484,7 +6491,7 @@ var __webpack_modules__ = {
                     var value = obj[key];
                     if (!options.skipNulls || null !== value) {
                         var encodedKey = options.encodeDotInKeys ? String(key).replace(/\./g, '%2E') : String(key);
-                        pushToArray(keys, stringify(value, encodedKey, generateArrayPrefix, commaRoundTrip, options.allowEmptyArrays, options.strictNullHandling, options.skipNulls, options.encodeDotInKeys, options.encode ? options.encoder : null, options.filter, options.sort, options.allowDots, options.serializeDate, options.format, options.formatter, options.encodeValuesOnly, options.charset, sideChannel, options.depth, 0));
+                        pushToArray(keys, stringify(value, encodedKey, generateArrayPrefix, commaRoundTrip, options.allowEmptyArrays, options.strictNullHandling, options.skipNulls, options.encodeDotInKeys, options.encode ? options.encoder : null, filter, options.sort, options.allowDots, options.serializeDate, options.format, options.formatter, options.encodeValuesOnly, options.charset, sideChannel, options.depth, 0));
                     }
                 }
             }
@@ -6733,7 +6740,7 @@ var __webpack_modules__ = {
                 var arr = [];
                 for(var i = 0; i < segment.length; ++i){
                     var c = segment.charCodeAt(i);
-                    if (0x2D === c || 0x2E === c || 0x5F === c || 0x7E === c || c >= 0x30 && c <= 0x39 || c >= 0x41 && c <= 0x5A || c >= 0x61 && c <= 0x7A || format === formats.RFC1738 && (0x28 === c || 0x29 === c)) {
+                    if (0x2D === c || 0x2E === c || 0x5F === c || 0x7E === c && format !== formats.WHATWG || c >= 0x30 && c <= 0x39 || c >= 0x41 && c <= 0x5A || c >= 0x61 && c <= 0x7A || format === formats.RFC1738 && (0x28 === c || 0x29 === c) || format === formats.WHATWG && 0x2A === c) {
                         arr[arr.length] = segment.charAt(i);
                         continue;
                     }
@@ -6749,9 +6756,12 @@ var __webpack_modules__ = {
                         arr[arr.length] = hexTable[0xE0 | c >> 12] + hexTable[0x80 | c >> 6 & 0x3F] + hexTable[0x80 | 0x3F & c];
                         continue;
                     }
-                    i += 1;
-                    c = 0x10000 + ((0x3FF & c) << 10 | 0x3FF & segment.charCodeAt(i));
-                    arr[arr.length] = hexTable[0xF0 | c >> 18] + hexTable[0x80 | c >> 12 & 0x3F] + hexTable[0x80 | c >> 6 & 0x3F] + hexTable[0x80 | 0x3F & c];
+                    var next = segment.charCodeAt(i + 1);
+                    if (c <= 0xDBFF && next >= 0xDC00 && next <= 0xDFFF) {
+                        i += 1;
+                        c = 0x10000 + ((0x3FF & c) << 10 | 0x3FF & next);
+                        arr[arr.length] = hexTable[0xF0 | c >> 18] + hexTable[0x80 | c >> 12 & 0x3F] + hexTable[0x80 | c >> 6 & 0x3F] + hexTable[0x80 | 0x3F & c];
+                    } else arr[arr.length] = '%EF%BF%BD';
                 }
                 out += arr.join('');
             }
@@ -6837,6 +6847,7 @@ var __webpack_modules__ = {
             markOverflow: markOverflow,
             maybeMap: maybeMap,
             merge: merge,
+            setProperty: setProperty,
             toCoercible: toCoercible
         };
     },
@@ -7189,7 +7200,7 @@ var __webpack_modules__ = {
         const qs = __webpack_require__("b");
         const RequestBase = __webpack_require__("d");
         const { isObject, mixin, hasOwn, isSafeKey } = __webpack_require__("Dp");
-        const ResponseBase = __webpack_require__("e");
+        const ResponseBase = __webpack_require__("es");
         const Agent = __webpack_require__("pf");
         function noop() {}
         module.exports = function(method, url) {
@@ -7903,7 +7914,7 @@ var __webpack_modules__ = {
             }, this._responseTimeout);
         };
     },
-    e (module, __unused_rspack_exports, __webpack_require__) {
+    es (module, __unused_rspack_exports, __webpack_require__) {
         "use strict";
         const utils = __webpack_require__("Dp");
         module.exports = ResponseBase;
@@ -8248,7 +8259,7 @@ var __webpack_modules__ = {
             });
         });
     },
-    Sy (__unused_rspack_module, exports1, __webpack_require__) {
+    S (__unused_rspack_module, exports1, __webpack_require__) {
         var process = __webpack_require__("zT");
         var getOwnPropertyDescriptors = Object.getOwnPropertyDescriptors || function(obj) {
             var keys = Object.keys(obj);
@@ -11115,7 +11126,7 @@ var __webpack_exports__ = {};
     var client = __webpack_require__("Q");
     var client_default = /*#__PURE__*/ __webpack_require__.n(client);
     var package_namespaceObject = {
-        rE: "16.1.1"
+        rE: "16.4.0"
     };
     function isAudioEnabled(options) {
         return Boolean(options.audio.enabled);
@@ -11127,7 +11138,7 @@ var __webpack_exports__ = {};
     function isAutoPauseEnabled(options) {
         return options.enableAutoPause && options.enablePause;
     }
-    var util = __webpack_require__("Sy");
+    var util = __webpack_require__("S");
     var util_default = /*#__PURE__*/ __webpack_require__.n(util);
     function getEventDetails(event) {
         const eventWithErrorDetails = event;
@@ -15017,6 +15028,14 @@ var __webpack_exports__ = {};
     }
     Despot_define_property(Despot, "emitters", new WeakMap());
     const util_Despot = Despot;
+    const EMAIL_SEPARATOR_REGEX = /[ ,]+/gu;
+    function trimEmail(email) {
+        return email.replace(EMAIL_SEPARATOR_REGEX, "");
+    }
+    function trimEmails(emails) {
+        const trimmedEmails = emails.split(EMAIL_SEPARATOR_REGEX).map((item)=>item.trim()).filter(Boolean);
+        return trimmedEmails;
+    }
     function getValidity(element) {
         const validity = "validity" in element ? element.validity : void 0;
         return validity;
@@ -15036,14 +15055,6 @@ var __webpack_exports__ = {};
         element.style.removeProperty("display");
     }
     const html_showElement = showElement;
-    const EMAIL_SEPARATOR_REGEX = /[ ,]+/gu;
-    function trimEmail(email) {
-        return email.replace(EMAIL_SEPARATOR_REGEX, "");
-    }
-    function trimEmails(emails) {
-        const trimmedEmails = emails.split(EMAIL_SEPARATOR_REGEX).map((item)=>item.trim()).filter(Boolean);
-        return trimmedEmails;
-    }
     function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
         try {
             var info = gen[key](arg);
@@ -16837,11 +16848,11 @@ var __webpack_exports__ = {};
         const originalDocument = document1;
         const currentScript = originalDocument.currentScript;
         window1.DocumentFragment;
-        const HTMLTemplateElement = window1.HTMLTemplateElement, Node = window1.Node, Element = window1.Element, NodeFilter = window1.NodeFilter;
+        const HTMLTemplateElement = window1.HTMLTemplateElement, Node = window1.Node, Element1 = window1.Element, NodeFilter = window1.NodeFilter;
         void 0 === window1.NamedNodeMap && (window1.NamedNodeMap || window1.MozNamedAttrMap);
         window1.HTMLFormElement;
         const DOMParser = window1.DOMParser, trustedTypes = window1.trustedTypes;
-        const ElementPrototype = Element.prototype;
+        const ElementPrototype = Element1.prototype;
         const cloneNode = lookupGetter(ElementPrototype, "cloneNode");
         const remove = lookupGetter(ElementPrototype, "remove");
         const removeAttributeNode = lookupGetter(ElementPrototype, "removeAttributeNode");
@@ -17924,6 +17935,20 @@ var __webpack_exports__ = {};
         return DOMPurify;
     }
     var purify_default = createDOMPurify();
+    function isRecipientSelectionValid(recipients) {
+        var _recipients_to, _recipients_cc, _recipients_bcc;
+        const hasTo = Boolean(null == (_recipients_to = recipients.to) ? void 0 : _recipients_to.length);
+        const hasCc = Boolean(null == (_recipients_cc = recipients.cc) ? void 0 : _recipients_cc.length);
+        const hasBcc = Boolean(null == (_recipients_bcc = recipients.bcc) ? void 0 : _recipients_bcc.length);
+        const hasConfiguredTo = "to" in recipients;
+        const hasConfiguredCc = "cc" in recipients;
+        const hasConfiguredBcc = "bcc" in recipients;
+        let isValid = true;
+        if (hasConfiguredTo) isValid = hasTo || hasConfiguredCc && hasCc || hasConfiguredBcc && hasBcc;
+        else if (hasConfiguredCc) isValid = hasCc || !hasConfiguredBcc || hasBcc;
+        return isValid;
+    }
+    const email_isRecipientSelectionValid = isRecipientSelectionValid;
     function limitHeight(height, options, calledFrom) {
         const dimension = {
             unit: "px"
@@ -18557,7 +18582,7 @@ var __webpack_exports__ = {};
             this.visuals = visuals;
         }
     }
-    const facingMode = FacingMode;
+    const recorder_facingMode = FacingMode;
     function pausedNote_define_property(obj, key, value) {
         if (key in obj) Object.defineProperty(obj, key, {
             value: value,
@@ -18924,7 +18949,7 @@ var __webpack_exports__ = {};
             this.recordTimer = new recordTimer(visuals, this.recordNote, options);
             const browser = util_getBrowser(options);
             if (options.video.countdown) this.countdown = new countdown(visuals, options);
-            if (options.video.facingModeButton && browser.isMobile()) this.facingMode = new facingMode(visuals, options);
+            if (options.video.facingModeButton && browser.isMobile()) this.facingMode = new recorder_facingMode(visuals, options);
             if (options.enablePause) this.pausedNote = new pausedNote(visuals, options);
         }
     }
@@ -19175,6 +19200,18 @@ var __webpack_exports__ = {};
         }
     }
     const notifier = Notifier;
+    function summarize(title, contents) {
+        const lines = Object.entries(contents).sort(([keyA], [keyB])=>keyA.localeCompare(keyB)).map(([key, value])=>{
+            const formattedValue = void 0 === value ? "undefined" : "object" == typeof value ? string_pretty(value) : value;
+            return `  • ${key}: ${formattedValue}`;
+        });
+        const line = [
+            `🔎 ${title}`,
+            ...lines
+        ].join("\n");
+        return line;
+    }
+    const string_summarize = summarize;
     var animitter = __webpack_require__("b6");
     var animitter_default = /*#__PURE__*/ __webpack_require__.n(animitter);
     var typedarray_to_buffer = __webpack_require__("E");
@@ -19238,46 +19275,6 @@ var __webpack_exports__ = {};
     canvas_to_buffer_modern_r.atob = void 0;
     var websocket_stream_stream = __webpack_require__("U");
     var stream_default = /*#__PURE__*/ __webpack_require__.n(websocket_stream_stream);
-    function boundedWriteQueue_define_property(obj, key, value) {
-        if (key in obj) Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-        else obj[key] = value;
-        return obj;
-    }
-    const DEFAULT_MAX_QUEUED_BYTES = 1048576;
-    class BoundedWriteQueue {
-        enqueue(buffer, params) {
-            if (this.queuedBytes + buffer.length > this.maxBytes) return false;
-            this.writes.push({
-                buffer,
-                params
-            });
-            this.queuedBytes += buffer.length;
-            return true;
-        }
-        dequeue() {
-            const write = this.writes.shift();
-            if (write) this.queuedBytes -= write.buffer.length;
-            return write;
-        }
-        clear() {
-            this.writes.length = 0;
-            this.queuedBytes = 0;
-        }
-        constructor(maxBytes = DEFAULT_MAX_QUEUED_BYTES){
-            boundedWriteQueue_define_property(this, "maxBytes", void 0);
-            boundedWriteQueue_define_property(this, "writes", void 0);
-            boundedWriteQueue_define_property(this, "queuedBytes", void 0);
-            this.maxBytes = maxBytes;
-            this.writes = [];
-            this.queuedBytes = 0;
-        }
-    }
-    const boundedWriteQueue = BoundedWriteQueue;
     function getEdgeCodes(value, amount, fromEnd) {
         const chars = fromEnd ? value.slice(-amount) : value.slice(0, amount);
         const codes = Array.from(chars, (char)=>String(char.codePointAt(0))).join(".");
@@ -19357,117 +19354,11 @@ var __webpack_exports__ = {};
         };
     }
     const error_getWebSocketDiagnostic = getWebSocketDiagnostic;
-    function figureMinHeight(height, options) {
-        let minHeight;
-        if (options.video.height) {
-            minHeight = height ? Math.min(options.video.height, height) : options.video.height;
-            if (minHeight < 1) throw error_createError({
-                message: `Got a min height less than 1 (${minHeight})!`,
-                options
-            });
-        } else minHeight = height;
-        return minHeight;
-    }
-    const dimensions_figureMinHeight = figureMinHeight;
-    function getRatio(options, videoHeight, videoWidth) {
-        let ratio = 1;
-        const hasVideoDimensions = videoHeight && videoWidth;
-        const desiredHeight = options.video.height;
-        const desiredWidth = options.video.width;
-        const hasDesiredDimensions = desiredHeight && desiredWidth;
-        if (hasDesiredDimensions) ratio = hasVideoDimensions ? videoHeight < desiredHeight || videoWidth < desiredWidth ? videoHeight / videoWidth : desiredHeight / desiredWidth : desiredHeight / desiredWidth;
-        else if (hasVideoDimensions) ratio = videoHeight / videoWidth;
-        return ratio;
-    }
-    const dimensions_getRatio = getRatio;
-    function calculateHeight(responsive, videoWidth, options, ratio, element) {
-        const dimension = {
-            unit: "px"
-        };
-        let width = videoWidth;
-        if (responsive && element) {
-            const limitedDimension = dimensions_limitWidth(element, options, width);
-            width = limitedDimension.value;
-        }
-        const chosenRatio = null != ratio ? ratio : dimensions_getRatio(options, void 0, videoWidth);
-        const height = width ? Math.round(width * chosenRatio) : void 0;
-        if (height && Number.isInteger(height) && height < 1) throw error_createError({
-            message: "Just calculated a height less than 1 which is wrong.",
-            options
-        });
-        const minHeight = dimensions_figureMinHeight(height, options);
-        dimension.value = minHeight;
-        return dimension;
-    }
-    const dimensions_calculateHeight = calculateHeight;
-    function calculateWidth(responsive, options, videoHeight, ratio) {
-        const dimension = {
-            unit: "px"
-        };
-        let height = dimensions_figureMinHeight(videoHeight, options);
-        if (responsive) {
-            const limitedDimension = dimensions_limitHeight(height, options, "calculateWidth");
-            height = limitedDimension.value;
-        }
-        if (!height || height < 1) throw error_createError({
-            message: `Height ${height} cannot be smaller than 1 when calculating width.`,
-            options
-        });
-        const chosenRatio = null != ratio ? ratio : dimensions_getRatio(options, videoHeight);
-        const calculatedWidth = Math.round(height / chosenRatio);
-        if (calculatedWidth < 1) throw error_createError({
-            message: "Calculated width cannot be smaller than 1!",
-            options
-        });
-        dimension.value = calculatedWidth;
-        return dimension;
-    }
-    const dimensions_calculateWidth = calculateWidth;
     function isAutomatedUserAgent(userAgent = navigator.userAgent) {
         return /bot|crawler|spider|headlesschrome|phantomjs|puppeteer|playwright/iu.test(userAgent);
     }
     const util_isAutomatedUserAgent = isAutomatedUserAgent;
-    function summarize(title, contents) {
-        const lines = Object.entries(contents).sort(([keyA], [keyB])=>keyA.localeCompare(keyB)).map(([key, value])=>{
-            const formattedValue = void 0 === value ? "undefined" : "object" == typeof value ? string_pretty(value) : value;
-            return `  • ${key}: ${formattedValue}`;
-        });
-        const line = [
-            `🔎 ${title}`,
-            ...lines
-        ].join("\n");
-        return line;
-    }
-    const string_summarize = summarize;
-    function getFirstVideoTrack(localMediaStream) {
-        const videoTracks = localMediaStream.getVideoTracks();
-        let videoTrack;
-        if (videoTracks[0]) videoTrack = videoTracks[0];
-        return videoTrack;
-    }
-    const media_getFirstVideoTrack = getFirstVideoTrack;
-    const MEDIA_EVENTS = [
-        "loadstart",
-        "suspend",
-        "progress",
-        "abort",
-        "emptied",
-        "stalled",
-        "pause",
-        "loadeddata",
-        "waiting",
-        "playing",
-        "canplay",
-        "canplaythrough",
-        "seeking",
-        "seeked",
-        "ended",
-        "ratechange",
-        "durationchange",
-        "volumechange"
-    ];
-    const mediaEvents = MEDIA_EVENTS;
-    function esm_define_property(obj, key, value) {
+    function boundedWriteQueue_define_property(obj, key, value) {
         if (key in obj) Object.defineProperty(obj, key, {
             value: value,
             enumerable: true,
@@ -19477,52 +19368,37 @@ var __webpack_exports__ = {};
         else obj[key] = value;
         return obj;
     }
-    class AudioSample {
-        toBuffer() {
-            const l = this.float32Array.length;
-            const arr = new Int16Array(l);
-            this.float32Array.forEach((sample, i)=>{
-                const clampedSample = Number.isFinite(sample) ? Math.max(-1, sample) : sample;
-                arr[i] = 0x7fff * Math.min(1, clampedSample);
+    const DEFAULT_MAX_QUEUED_BYTES = 1048576;
+    class BoundedWriteQueue {
+        enqueue(buffer, params) {
+            if (this.queuedBytes + buffer.length > this.maxBytes) return false;
+            this.writes.push({
+                buffer,
+                params
             });
-            return typedarray_to_buffer(arr);
+            this.queuedBytes += buffer.length;
+            return true;
         }
-        constructor(float32Array){
-            esm_define_property(this, "float32Array", void 0);
-            this.float32Array = float32Array;
+        dequeue() {
+            const write = this.writes.shift();
+            if (write) this.queuedBytes -= write.buffer.length;
+            return write;
         }
-    }
-    const esm_src = AudioSample;
-    const esm = esm_src;
-    var is_power_of_two = __webpack_require__("dZ");
-    var is_power_of_two_default = /*#__PURE__*/ __webpack_require__.n(is_power_of_two);
-    function AudioRecorder_asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-        try {
-            var info = gen[key](arg);
-            var value = info.value;
-        } catch (error) {
-            reject(error);
-            return;
+        clear() {
+            this.writes.length = 0;
+            this.queuedBytes = 0;
+        }
+        constructor(maxBytes = DEFAULT_MAX_QUEUED_BYTES){
+            boundedWriteQueue_define_property(this, "maxBytes", void 0);
+            boundedWriteQueue_define_property(this, "writes", void 0);
+            boundedWriteQueue_define_property(this, "queuedBytes", void 0);
+            this.maxBytes = maxBytes;
+            this.writes = [];
+            this.queuedBytes = 0;
         }
-        if (info.done) resolve(value);
-        else Promise.resolve(value).then(_next, _throw);
-    }
-    function AudioRecorder_async_to_generator(fn) {
-        return function() {
-            var self1 = this, args = arguments;
-            return new Promise(function(resolve, reject) {
-                var gen = fn.apply(self1, args);
-                function _next(value) {
-                    AudioRecorder_asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-                }
-                function _throw(err) {
-                    AudioRecorder_asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-                }
-                _next(void 0);
-            });
-        };
     }
-    function AudioRecorder_define_property(obj, key, value) {
+    const boundedWriteQueue = BoundedWriteQueue;
+    function streamWriter_define_property(obj, key, value) {
         if (key in obj) Object.defineProperty(obj, key, {
             value: value,
             enumerable: true,
@@ -19532,149 +19408,183 @@ var __webpack_exports__ = {};
         else obj[key] = value;
         return obj;
     }
-    const CHANNELS = 1;
-    function getAudioContextClass() {
-        return window.AudioContext;
-    }
-    class AudioRecorder {
-        hasAudioContext() {
-            return Boolean(getAudioContextClass()) && Boolean(this.getAudioContext());
+    const PIPE_SYMBOL = "°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°`°º¤ø,¸ ";
+    class RecorderStreamWriter extends util_Despot {
+        hasExceededWebSocketSendBuffer(buffer, opts) {
+            return buffer.length > 0 && !this.pendingWrites.enqueue(buffer, opts);
         }
-        getAudioContext() {
-            if (!this.vcAudioContext) {
-                const AudioContext = getAudioContextClass();
-                this.vcAudioContext = new AudioContext();
-            }
-            return this.vcAudioContext;
-        }
-        onAudioProcess(e, cb) {
-            if (!this.userMedia.isRecording() || this.userMedia.isPaused()) return;
-            const float32Array = e.inputBuffer.getChannelData(0);
-            cb(new esm(float32Array));
-        }
-        disconnect() {
-            var _this_audioInput, _this_volume;
-            if (this.scriptProcessor) {
-                this.scriptProcessor.onaudioprocess = null;
-                this.scriptProcessor.disconnect();
-            }
-            null == (_this_audioInput = this.audioInput) || _this_audioInput.disconnect();
-            null == (_this_volume = this.volume) || _this_volume.disconnect();
+        writeStream(buffer, opts) {
+            if (this.stream) if (this.stream.destroyed) {
+                this.stopPings();
+                const err = error_createError({
+                    message: "Already disconnected",
+                    explanation: "Sorry, connection to the server has been destroyed. Please reload.",
+                    options: this.options
+                });
+                this.handleWriteFailure(err);
+            } else if (this.streamBackpressured) {
+                if (this.hasExceededWebSocketSendBuffer(buffer, opts)) this.failMediaTransmission(error_createError({
+                    message: "WebSocket send buffer limit exceeded",
+                    explanation: "The connection to the server is too slow to keep up with this recording. The recording has been stopped; please start a new one.",
+                    options: this.options
+                }));
+            } else this.writeToStream(this.stream, buffer, opts);
         }
-        init(localMediaStream) {
-            this.options.logger.debug("AudioRecorder: init()");
-            this.disconnect();
-            const volume = this.getAudioContext().createGain();
-            this.volume = volume;
+        writeToStream(stream, buffer, opts) {
+            const onFlushedCallback = null == opts ? void 0 : opts.onFlushedCallback;
             try {
-                this.audioInput = this.getAudioContext().createMediaStreamSource(localMediaStream);
+                const canContinue = stream.write(buffer, ()=>{
+                    if (!onFlushedCallback) return;
+                    try {
+                        onFlushedCallback(opts);
+                    } catch (exc) {
+                        const err = error_createError({
+                            message: "Failed to write stream buffer",
+                            explanation: `stream.write() failed because of ${string_pretty(exc)}`,
+                            options: this.options,
+                            exc
+                        });
+                        this.emit("ERROR", {
+                            err
+                        });
+                    }
+                });
+                if (!canContinue) {
+                    this.streamBackpressured = true;
+                    this.startBackpressureTimeout();
+                    this.pauseForBackpressure();
+                    return false;
+                }
+                return true;
             } catch (exc) {
-                throw error_createError({
-                    message: "Webcam has no audio",
-                    exc,
-                    options: this.options
+                const err = error_createError({
+                    message: "Failed writing to server",
+                    explanation: `stream.write() failed because of ${string_pretty(exc)}`,
+                    options: this.options,
+                    exc
                 });
+                this.handleWriteFailure(err);
+                return false;
             }
-            let { bufferSize } = this.options.audio;
-            if ("auto" === bufferSize) bufferSize = util_getBrowser(this.options).isFirefox() ? 512 : 2048;
-            if (void 0 === bufferSize || !is_power_of_two_default()(bufferSize)) throw error_createError({
-                message: `Audio buffer size must be a power of two. The current buffer size is ${bufferSize}.`,
-                options: this.options
-            });
-            if (!Number.isFinite(this.options.audio.volume) || this.options.audio.volume < 0 || this.options.audio.volume > 1) throw error_createError({
-                message: `Audio volume must be between zero and one. The current volume is ${this.options.audio.volume}.`,
-                options: this.options
-            });
-            volume.gain.value = this.options.audio.volume;
-            this.scriptProcessor = this.getAudioContext().createScriptProcessor(bufferSize, CHANNELS, CHANNELS);
-            this.audioInput.connect(volume);
-            volume.connect(this.scriptProcessor);
-            this.scriptProcessor.connect(this.getAudioContext().destination);
         }
-        record(cb) {
-            this.options.logger.debug("AudioRecorder: record()");
-            if (this.scriptProcessor) this.scriptProcessor.onaudioprocess = (e)=>{
-                this.onAudioProcess(e, cb);
-            };
+        flushPendingWrites(stream) {
+            if (this.isStaleStream(stream)) return;
+            this.streamBackpressured = false;
+            this.clearBackpressureTimeout();
+            let pendingWrite = this.pendingWrites.dequeue();
+            while(pendingWrite){
+                if (!this.writeToStream(stream, pendingWrite.buffer, pendingWrite.params)) return;
+                pendingWrite = this.pendingWrites.dequeue();
+            }
+            this.resumeRecordingAfterDrain();
         }
-        resume() {
-            return AudioRecorder_async_to_generator(function*() {
-                const context = this.getAudioContext();
-                if ("running" !== context.state) yield context.resume();
-            }).call(this);
+        isStaleStream(stream) {
+            return this.stream !== stream || stream.destroyed;
         }
-        stop() {
-            this.options.logger.debug("AudioRecorder: stop()");
-            this.disconnect();
-            if (this.hasAudioContext()) this.getAudioContext().close().then(()=>{
-                this.options.logger.debug("AudioRecorder: audio context is closed");
-                this.vcAudioContext = void 0;
-            }).catch((err)=>{
-                if (err instanceof Error) return void this.options.logger.error(error_createError({
-                    err,
-                    options: this.options
-                }));
-                this.options.logger.error(err);
+        canPauseForBackpressure() {
+            return this.recordingActive && !this.isUserMediaPaused() && this.isCaptureLoopRunning();
+        }
+        pauseForBackpressure() {
+            if (!this.canPauseForBackpressure()) return;
+            this.resumeAfterDrain = true;
+            this.stopCaptureLoop();
+        }
+        resumeRecordingAfterDrain() {
+            if (!this.resumeAfterDrain) return;
+            this.resumeAfterDrain = false;
+            if (this.canResumeAfterDrain()) this.startCaptureLoop();
+        }
+        canResumeAfterDrain() {
+            return this.recordingActive && !this.isUserMediaPaused();
+        }
+        handleWriteFailure(err) {
+            if (this.mediaTransmissionStarted) return void this.failMediaTransmission(err);
+            this.emit("ERROR", {
+                err
             });
         }
-        getSampleRate() {
-            if (this.hasAudioContext()) return this.getAudioContext().sampleRate;
-            return -1;
+        failMediaTransmission(err) {
+            if (this.recordingTransportFailed) return;
+            this.recordingTransportFailed = true;
+            this.recordingActive = false;
+            this.mediaTransmissionStarted = false;
+            this.streamBackpressured = false;
+            this.resumeAfterDrain = false;
+            this.pendingWrites.clear();
+            this.connected = false;
+            this.connecting = false;
+            this.reconnecting = false;
+            this.clearReconnectTimeout();
+            this.clearBackpressureTimeout();
+            this.discardSocket();
+            this.reset();
+            this.framesCount = this.samplesCount = 0;
+            this.confirmedFrameNumber = this.confirmedSampleNumber = 0;
+            delete this.recordingStats;
+            this.recordingDimensions = void 0;
+            this.emit("ERROR", {
+                err
+            });
         }
-        constructor(userMedia, options){
-            AudioRecorder_define_property(this, "scriptProcessor", void 0);
-            AudioRecorder_define_property(this, "audioInput", void 0);
-            AudioRecorder_define_property(this, "volume", void 0);
-            AudioRecorder_define_property(this, "vcAudioContext", void 0);
-            AudioRecorder_define_property(this, "userMedia", void 0);
-            AudioRecorder_define_property(this, "options", void 0);
-            this.options = options;
-            this.userMedia = userMedia;
+        startBackpressureTimeout() {
+            if (!this.shouldStartBackpressureTimeout()) return;
+            this.backpressureTimeout = window.setTimeout(()=>{
+                this.backpressureTimeout = void 0;
+                if (this.shouldIgnoreBackpressureTimeout()) return;
+                const err = error_createError({
+                    message: "WebSocket write timed out",
+                    explanation: "The server stopped accepting recording data. The recording has been stopped; please check your connection and start a new one.",
+                    options: this.options
+                });
+                this.failMediaTransmission(err);
+            }, this.options.timeouts.connection);
         }
-    }
-    const media_AudioRecorder = AudioRecorder;
-    const VIRTUAL_KEYWORDS = [
-        "obs",
-        "virtual",
-        "manycam",
-        "vcam",
-        "splitcam",
-        "droidcam"
-    ];
-    function isVirtualCamera(videoTrack) {
-        const capabilities = videoTrack.getCapabilities();
-        if (!capabilities.frameRate) return true;
-        const isVirtual = VIRTUAL_KEYWORDS.some((keyword)=>videoTrack.label.toLowerCase().includes(keyword));
-        return isVirtual;
-    }
-    const util_isVirtualCamera = isVirtualCamera;
-    function userMedia_asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-        try {
-            var info = gen[key](arg);
-            var value = info.value;
-        } catch (error) {
-            reject(error);
-            return;
+        shouldStartBackpressureTimeout() {
+            return void 0 === this.backpressureTimeout && this.mediaTransmissionStarted;
         }
-        if (info.done) resolve(value);
-        else Promise.resolve(value).then(_next, _throw);
-    }
-    function userMedia_async_to_generator(fn) {
-        return function() {
-            var self1 = this, args = arguments;
-            return new Promise(function(resolve, reject) {
-                var gen = fn.apply(self1, args);
-                function _next(value) {
-                    userMedia_asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-                }
-                function _throw(err) {
-                    userMedia_asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+        shouldIgnoreBackpressureTimeout() {
+            return !this.streamBackpressured || this.recordingTransportFailed;
+        }
+        failInterruptedRecording() {
+            const unconfirmedFrames = Math.max(0, this.framesCount - this.confirmedFrameNumber);
+            const unconfirmedSamples = Math.max(0, this.samplesCount - this.confirmedSampleNumber);
+            const err = error_createError({
+                message: "Recording interrupted",
+                explanation: "The server connection closed before this recording completed. It cannot be safely resumed, so it has been stopped. Please start a new recording.",
+                options: this.options,
+                cause: {
+                    unconfirmedFrames,
+                    unconfirmedSamples
                 }
-                _next(void 0);
             });
-        };
+            this.failMediaTransmission(err);
+        }
+        handleStreamDrain(stream) {
+            this.options.logger.debug(`${PIPE_SYMBOL}Stream *drain* event emitted`);
+            this.flushPendingWrites(stream);
+        }
+        clearBackpressureTimeout() {
+            if (void 0 === this.backpressureTimeout) return;
+            window.clearTimeout(this.backpressureTimeout);
+            this.backpressureTimeout = void 0;
+        }
+        discardSocket() {
+            this.options.logger.debug("Recorder: discarding socket stream ...");
+            this.clearBackpressureTimeout();
+            this.pendingWrites.clear();
+            this.streamBackpressured = false;
+            this.resumeAfterDrain = false;
+            const stream = this.stream;
+            this.stream = void 0;
+            if (stream && !stream.destroyed) stream.destroy();
+        }
+        constructor(options){
+            super("Recorder", options), streamWriter_define_property(this, "pendingWrites", new boundedWriteQueue()), streamWriter_define_property(this, "samplesCount", 0), streamWriter_define_property(this, "framesCount", 0), streamWriter_define_property(this, "recordingStats", void 0), streamWriter_define_property(this, "confirmedFrameNumber", 0), streamWriter_define_property(this, "confirmedSampleNumber", 0), streamWriter_define_property(this, "backpressureTimeout", void 0), streamWriter_define_property(this, "recordingDimensions", void 0), streamWriter_define_property(this, "stream", void 0), streamWriter_define_property(this, "streamBackpressured", false), streamWriter_define_property(this, "resumeAfterDrain", false), streamWriter_define_property(this, "mediaTransmissionStarted", false), streamWriter_define_property(this, "recordingActive", false), streamWriter_define_property(this, "recordingTransportFailed", false), streamWriter_define_property(this, "connecting", false), streamWriter_define_property(this, "connected", false), streamWriter_define_property(this, "reconnecting", false);
+        }
     }
-    function userMedia_define_property(obj, key, value) {
+    const streamWriter = RecorderStreamWriter;
+    var Buffer = __webpack_require__("dY").Buffer;
+    function connection_define_property(obj, key, value) {
         if (key in obj) Object.defineProperty(obj, key, {
             value: value,
             enumerable: true,
@@ -19684,368 +19594,403 @@ var __webpack_exports__ = {};
         else obj[key] = value;
         return obj;
     }
-    const EVENT_ASCII = "|—O—|";
-    class UserMedia extends util_Despot {
-        attachMediaStream(stream) {
-            if (this.rawVisualUserMedia) {
-                this.rawVisualUserMedia.srcObject = stream;
-                const previousStream = this.currentVisualStream;
-                this.currentVisualStream = stream;
-                if (previousStream && previousStream !== stream) previousStream.getTracks().forEach((track)=>{
-                    track.stop();
-                });
-            } else throw error_createError({
-                message: "Error attaching stream to element.",
-                explanation: "Contact the developer about this",
-                options: this.options
-            });
-        }
-        setVisualStream(localMediaStream) {
-            if (localMediaStream) this.attachMediaStream(localMediaStream);
-            else {
-                if (this.rawVisualUserMedia) {
-                    this.rawVisualUserMedia.srcObject = null;
-                    this.rawVisualUserMedia.removeAttribute("src");
-                }
-                this.currentVisualStream = void 0;
-            }
+    class RecorderConnection extends streamWriter {
+        canReconnectAfterStreamClose() {
+            return Boolean(this.connected && this.userMediaLoaded);
         }
-        restorePlayback() {
-            return userMedia_async_to_generator(function*() {
-                var _this_audioRecorder;
-                if (!this.rawVisualUserMedia) throw new Error("No camera preview is available.");
-                yield this.rawVisualUserMedia.play();
-                yield null == (_this_audioRecorder = this.audioRecorder) ? void 0 : _this_audioRecorder.resume();
-            }).call(this);
+        shouldReportStreamClose() {
+            return !this.connecting && !this.blocking;
         }
-        hasLiveStream() {
-            var _this_currentVisualStream, _this_currentVisualStream1, _this_currentVisualStream2;
-            const videoReady = null == (_this_currentVisualStream = this.currentVisualStream) ? void 0 : _this_currentVisualStream.getVideoTracks().some((track)=>"live" === track.readyState && track.enabled && !track.muted);
-            const audioReady = !isAudioEnabled(this.options) || (null == (_this_currentVisualStream1 = this.currentVisualStream) ? void 0 : _this_currentVisualStream1.getAudioTracks().some((track)=>"live" === track.readyState && track.enabled && !track.muted));
-            return Boolean((null == (_this_currentVisualStream2 = this.currentVisualStream) ? void 0 : _this_currentVisualStream2.active) && videoReady && audioReady);
+        handleStreamClose(url2Connect) {
+            const debugLine = string_summarize(`${PIPE_SYMBOL}Stream has closed:`, {
+                connecting: this.connecting,
+                connected: this.connected,
+                userMediaLoaded: this.userMediaLoaded,
+                blocking: this.blocking
+            });
+            this.options.logger.debug(debugLine);
+            const canReconnect = this.canReconnectAfterStreamClose();
+            this.connected = false;
+            this.stopPings();
+            if (this.shouldIgnoreStreamClose()) return;
+            if (this.mediaTransmissionStarted) this.failInterruptedRecording();
+            else if (canReconnect) {
+                this.pendingWrites.clear();
+                this.streamBackpressured = false;
+                this.resumeAfterDrain = false;
+                this.reconnecting = true;
+                this.initSocket();
+            } else if (this.shouldReportStreamClose()) window.setTimeout(()=>{
+                this.handleConnectionFailure({
+                    url2Connect,
+                    cause: "closed"
+                });
+            }, 0);
         }
-        hasEnded() {
-            var _this_rawVisualUserMedia, _this_currentVisualStream;
-            if (null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia.ended) return this.rawVisualUserMedia.ended;
-            return !(null == (_this_currentVisualStream = this.currentVisualStream) ? void 0 : _this_currentVisualStream.active);
+        shouldIgnoreStreamClose() {
+            return this.recordingTransportFailed || Boolean(this.unloaded) || this.validate();
         }
-        hasInvalidDimensions() {
-            if (!this.rawVisualUserMedia) return false;
-            const { videoWidth, videoHeight } = this.rawVisualUserMedia;
-            return videoWidth > 0 && videoWidth < 3 || videoHeight > 0 && videoHeight < 3;
+        handleStreamError(url2Connect, err) {
+            var _this_lastSocketError;
+            if ("u" > typeof Event && err instanceof Event) this.lastSocketError = error_getEventDetails(err);
+            else this.lastSocketError = serializeError(err);
+            const debugLine = string_summarize(`${PIPE_SYMBOL}Stream *error* event emitted:`, {
+                error: serializeError(err)
+            });
+            this.options.logger.debug(debugLine);
+            if (this.validate()) {
+                this.connected = false;
+                this.stopPings();
+                this.discardSocket();
+                return;
+            }
+            if (!this.connected) return void this.handleConnectionFailure({
+                url2Connect,
+                cause: "error"
+            });
+            const streamError = err instanceof Error ? err : new Error("WebSocket stream emitted an error event", {
+                cause: null != (_this_lastSocketError = this.lastSocketError) ? _this_lastSocketError : err
+            });
+            if (this.mediaTransmissionStarted) return void this.failInterruptedRecording();
+            this.emit("ERROR", {
+                err: error_createError({
+                    message: "WebSocket stream error",
+                    explanation: `The WebSocket stream emitted an error event. Details: ${string_pretty(err)}`,
+                    options: this.options,
+                    exc: streamError
+                })
+            });
         }
-        logEvent(eventType, params) {
-            this.options.logger.debug(`UserMedia: ... ${EVENT_ASCII} event ${eventType}: ${string_pretty(params)}`);
+        sendPings() {
+            this.stopPings();
+            this.pingInterval = window.setInterval(()=>{
+                this.options.logger.debug("Recorder: pinging...");
+                this.writeStream(Buffer.from(""));
+            }, this.options.timeouts.pingInterval);
         }
-        unloadRemainingEventListeners() {
-            var _this_clearInitializationListeners, _this, _this_rawVisualUserMedia;
-            this.options.logger.debug("UserMedia: unloadRemainingEventListeners()");
-            null == (_this_clearInitializationListeners = (_this = this).clearInitializationListeners) || _this_clearInitializationListeners.call(_this);
-            mediaEvents.forEach((eventName)=>{
-                var _this_rawVisualUserMedia;
-                null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) || _this_rawVisualUserMedia.removeEventListener(eventName, this.outputEvent);
-            });
-            null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) || _this_rawVisualUserMedia.removeEventListener("error", this.handleMediaError);
+        stopPings() {
+            if (void 0 === this.pingInterval) return;
+            this.options.logger.debug("Recorder: stopping pings...");
+            window.clearInterval(this.pingInterval);
+            this.pingInterval = void 0;
         }
-        audioRecord(audioCallback) {
-            var _this_audioRecorder;
-            this.removeListener("SENDING_FIRST_FRAME");
-            null == (_this_audioRecorder = this.audioRecorder) || _this_audioRecorder.record(audioCallback);
+        clearConnectionTimeout() {
+            if (void 0 === this.connectionTimeout) return;
+            this.options.logger.debug("Recorder: clearConnectionTimeout()");
+            window.clearTimeout(this.connectionTimeout);
+            this.connectionTimeout = void 0;
         }
-        init(localMediaStream, videoCallback, audioCallback, endedEarlyCallback, params) {
-            var _this_clearInitializationListeners, _this;
-            null == (_this_clearInitializationListeners = (_this = this).clearInitializationListeners) || _this_clearInitializationListeners.call(_this);
-            this.stop(localMediaStream, {
-                aboutToInitialize: true,
-                preserveRecordingState: Boolean((null == params ? void 0 : params.switchingFacingMode) || (null == params ? void 0 : params.recovering))
-            });
-            const initializationId = ++this.initializationId;
-            this.onPlayReached = false;
-            this.onLoadedMetaDataReached = false;
-            this.playingPromiseReached = false;
-            this.videoTrackLabel = void 0;
-            if (isAudioEnabled(this.options)) null != this.audioRecorder || (this.audioRecorder = new media_AudioRecorder(this, this.options));
-            const unloadAllEventListeners = ()=>{
-                var _this_rawVisualUserMedia, _this_rawVisualUserMedia1;
-                this.options.logger.debug("UserMedia: unloadAllEventListeners()");
-                this.unloadRemainingEventListeners();
-                this.removeListener("SENDING_FIRST_FRAME");
-                null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) || _this_rawVisualUserMedia.removeEventListener("play", onPlay);
-                null == (_this_rawVisualUserMedia1 = this.rawVisualUserMedia) || _this_rawVisualUserMedia1.removeEventListener("loadedmetadata", onLoadedMetaData);
-            };
-            this.clearInitializationListeners = ()=>{
-                var _this_rawVisualUserMedia, _this_rawVisualUserMedia1;
-                null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) || _this_rawVisualUserMedia.removeEventListener("play", onPlay);
-                null == (_this_rawVisualUserMedia1 = this.rawVisualUserMedia) || _this_rawVisualUserMedia1.removeEventListener("loadedmetadata", onLoadedMetaData);
-                this.clearInitializationListeners = void 0;
-            };
-            const play = ()=>{
-                try {
-                    var _this_rawVisualUserMedia, _this_rawVisualUserMedia1;
-                    null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) || _this_rawVisualUserMedia.load();
-                    if (null == (_this_rawVisualUserMedia1 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia1.paused) {
-                        this.options.logger.debug(`UserMedia: play(): media.readyState=${this.rawVisualUserMedia.readyState}, media.paused=${this.rawVisualUserMedia.paused}, media.ended=${this.rawVisualUserMedia.ended}, media.played=${string_pretty(this.rawVisualUserMedia.played)}`);
-                        this.rawVisualUserMedia.play().then(()=>{
-                            if (initializationId !== this.initializationId) return;
-                            if (!this.playingPromiseReached) {
-                                this.options.logger.debug("UserMedia: play promise successful. Playing now.");
-                                this.playingPromiseReached = true;
-                            }
-                        }).catch((exc)=>{
-                            if (initializationId !== this.initializationId) return;
-                            if (exc instanceof Error && !(null == params ? void 0 : params.recovering)) this.options.logger.warn(`Caught pending user media promise exception: ${exc.toString()}`);
-                            else {
-                                unloadAllEventListeners();
-                                endedEarlyCallback(error_createError({
-                                    message: "Failed to play user media upon play event.",
-                                    exc,
-                                    options: this.options
-                                }));
-                            }
-                        });
-                    }
-                } catch (exc) {
-                    unloadAllEventListeners();
-                    endedEarlyCallback(exc);
-                }
-            };
-            const fireCallbacks = ()=>{
-                var _this_rawVisualUserMedia;
-                const readyState = null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia.readyState;
-                this.options.logger.debug(`UserMedia: fireCallbacks(readyState=${readyState}, onPlayReached=${this.onPlayReached}, onLoadedMetaDataReached=${this.onLoadedMetaDataReached})`);
-                if (this.onPlayReached && this.onLoadedMetaDataReached) if (this.audioRecorder) try {
-                    this.audioRecorder.init(localMediaStream);
-                    const onAudioReady = ()=>{
-                        var _this_clearInitializationListeners, _this;
-                        if (initializationId !== this.initializationId || this.currentVisualStream !== localMediaStream) return;
-                        if (this.recording) this.audioRecord(audioCallback);
-                        else this.on("SENDING_FIRST_FRAME", ()=>{
-                            this.audioRecord(audioCallback);
-                        });
-                        null == (_this_clearInitializationListeners = (_this = this).clearInitializationListeners) || _this_clearInitializationListeners.call(_this);
-                        videoCallback();
-                    };
-                    if (null == params ? void 0 : params.recovering) this.audioRecorder.resume().then(onAudioReady).catch(endedEarlyCallback);
-                    else onAudioReady();
-                } catch (exc) {
-                    unloadAllEventListeners();
-                    this.stop(void 0, {
-                        preserveRecordingState: Boolean(null == params ? void 0 : params.recovering)
-                    });
-                    endedEarlyCallback(exc);
-                }
-                else {
-                    var _this_clearInitializationListeners, _this;
-                    null == (_this_clearInitializationListeners = (_this = this).clearInitializationListeners) || _this_clearInitializationListeners.call(_this);
-                    videoCallback();
-                }
-            };
-            const onPlay = ()=>{
-                try {
-                    var _this_rawVisualUserMedia, _this_rawVisualUserMedia1, _this_rawVisualUserMedia2, _this_rawVisualUserMedia3, _this_rawVisualUserMedia4, _this_rawVisualUserMedia5;
-                    this.logEvent("play", {
-                        readyState: null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia.readyState,
-                        audio: isAudioEnabled(this.options),
-                        width: null == (_this_rawVisualUserMedia1 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia1.width,
-                        height: null == (_this_rawVisualUserMedia2 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia2.height,
-                        videoWidth: null == (_this_rawVisualUserMedia3 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia3.videoWidth,
-                        videoHeight: null == (_this_rawVisualUserMedia4 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia4.videoHeight
-                    });
-                    null == (_this_rawVisualUserMedia5 = this.rawVisualUserMedia) || _this_rawVisualUserMedia5.removeEventListener("play", onPlay);
-                    if (this.hasEnded() || this.hasInvalidDimensions()) endedEarlyCallback(error_createError({
-                        message: "Already busy",
-                        explanation: "Probably another browser window is using your webcam?",
-                        options: this.options
-                    }));
-                    else {
-                        this.onPlayReached = true;
-                        fireCallbacks();
-                    }
-                } catch (exc) {
-                    unloadAllEventListeners();
-                    endedEarlyCallback(exc);
-                }
+        clearReconnectTimeout() {
+            if (void 0 === this.reconnectTimeout) return;
+            this.options.logger.debug("Recorder: clearReconnectTimeout()");
+            window.clearTimeout(this.reconnectTimeout);
+            this.reconnectTimeout = void 0;
+        }
+        handleConnectionFailure(params) {
+            if (this.retryConnection(params)) return;
+            this.failConnection(params);
+        }
+        retryConnection(params) {
+            if (!this.canRetryConnection()) return false;
+            if (void 0 !== this.reconnectTimeout) return true;
+            const delayMs = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 10000);
+            this.reconnectAttempts++;
+            this.connecting = false;
+            this.clearConnectionTimeout();
+            this.discardSocket();
+            this.options.logger.debug(`Recorder: retrying WebSocket connection in ${delayMs}ms (cause ${params.cause}).`);
+            this.reconnectTimeout = window.setTimeout(()=>{
+                this.reconnectTimeout = void 0;
+                if (this.shouldContinueReconnect()) this.initSocket();
+            }, delayMs);
+            return true;
+        }
+        canRetryConnection() {
+            return Boolean(this.reconnecting && this.userMediaLoaded && this.isOnline() && !this.unloaded && !this.blocking);
+        }
+        shouldContinueReconnect() {
+            return this.reconnecting && !this.unloaded && !this.blocking;
+        }
+        isOnline() {
+            return navigator.onLine;
+        }
+        failConnection(params) {
+            var _this_stream;
+            if (this.shouldIgnoreConnectionFailure()) return;
+            this.connectionFailed = true;
+            this.connecting = false;
+            this.reconnecting = false;
+            this.reconnectAttempts = 0;
+            this.clearReconnectTimeout();
+            this.clearConnectionTimeout();
+            const { url2Connect, cause } = params;
+            const online = this.isOnline();
+            const elapsedMs = this.connectingStartedAt ? Date.now() - this.connectingStartedAt : void 0;
+            const closeEvent = this.lastCloseEvent;
+            const socketError = this.lastSocketError;
+            const contents = {
+                cause,
+                closeCode: null == closeEvent ? void 0 : closeEvent.code,
+                closeReason: null == closeEvent ? void 0 : closeEvent.reason,
+                elapsedMs,
+                online,
+                secureContext: globalThis.isSecureContext,
+                socketReadyState: null == (_this_stream = this.stream) ? void 0 : _this_stream.socket.readyState,
+                timeoutMs: this.options.timeouts.connection,
+                url: url2Connect,
+                unloaded: this.unloaded,
+                userMediaLoaded: this.userMediaLoaded,
+                userMediaLoading: this.userMediaLoading,
+                wasClean: null == closeEvent ? void 0 : closeEvent.wasClean,
+                socketError,
+                blocking: this.blocking,
+                visibilityState: document.visibilityState
             };
-            const onLoadedMetaData = ()=>{
-                var _this_rawVisualUserMedia, _this_rawVisualUserMedia1, _this_rawVisualUserMedia2, _this_rawVisualUserMedia3, _this_rawVisualUserMedia4, _this_rawVisualUserMedia5, _this_rawVisualUserMedia6;
-                this.logEvent("loadedmetadata", {
-                    readyState: null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia.readyState,
-                    paused: null == (_this_rawVisualUserMedia1 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia1.paused,
-                    width: null == (_this_rawVisualUserMedia2 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia2.width,
-                    height: null == (_this_rawVisualUserMedia3 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia3.height,
-                    videoWidth: null == (_this_rawVisualUserMedia4 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia4.videoWidth,
-                    videoHeight: null == (_this_rawVisualUserMedia5 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia5.videoHeight
+            const debugLine = string_summarize("Recorder: failConnection() diagnostic", contents);
+            this.options.logger.debug(debugLine);
+            let explanation;
+            if (online) if ("timeout" === cause) explanation = `The server at ${url2Connect} did not respond within ${this.options.timeouts.connection}ms, even though your device is online. This usually points to a firewall or proxy silently dropping the connection. Please try a different network. If the problem persists, contact us.`;
+            else if ("error" === cause) explanation = `An error occurred while connecting to ${url2Connect}. Please check your internet connection and try again. If the problem persists, contact us.`;
+            else {
+                const closeSuffix = closeEvent ? ` (code ${closeEvent.code})` : "";
+                explanation = `Connection to ${url2Connect} is closed${closeSuffix}. Please check your internet connection and try again. If the problem persists, contact us.`;
+            }
+            else explanation = "Your device appears to be offline. Please check your internet connection and try again.";
+            this.discardSocket();
+            const err = error_createError({
+                message: "Unable to connect to the server",
+                explanation,
+                options: this.options,
+                cause: contents,
+                exc: socketError ? new Error("WebSocket connection error", {
+                    cause: socketError
+                }) : void 0
+            });
+            this.emit("ERROR", {
+                err
+            });
+        }
+        shouldIgnoreConnectionFailure() {
+            return this.connectionFailed || this.connected || Boolean(this.unloaded) || this.validate();
+        }
+        initSocket(cb) {
+            if (this.connected) {
+                this.options.logger.debug("Recorder: already **connected**. Not going to initialize a new WebSocket connection.");
+                null == cb || cb();
+                return;
+            }
+            if (this.connecting) return void this.options.logger.debug("Recorder: already **connecting**. Not going to initialize a new WebSocket connection.");
+            this.clearReconnectTimeout();
+            if (util_isAutomatedUserAgent()) {
+                this.connecting = false;
+                this.options.logger.debug("Recorder: skipping web socket connection for an automated crawler");
+                return;
+            }
+            this.connecting = true;
+            this.connectionFailed = false;
+            this.connectingStartedAt = Date.now();
+            this.lastCloseEvent = void 0;
+            this.lastSocketError = void 0;
+            this.emit("CONNECTING");
+            let url2Connect;
+            try {
+                const socketUrlObj = new URL(this.options.socketUrl);
+                socketUrlObj.searchParams.set(constants.WHITELIST_KEY_LABEL, this.options.whitelistKey);
+                url2Connect = socketUrlObj.toString();
+            } catch (exc) {
+                this.connecting = this.connected = false;
+                const err = error_createError({
+                    message: "Invalid WebSocket URL",
+                    explanation: `The configured socketUrl "${this.options.socketUrl}" is not a valid URL. Please check your videomail-client configuration.`,
+                    options: this.options,
+                    exc
                 });
-                null == (_this_rawVisualUserMedia6 = this.rawVisualUserMedia) || _this_rawVisualUserMedia6.removeEventListener("loadedmetadata", onLoadedMetaData);
-                if (!this.hasEnded() && !this.hasInvalidDimensions()) {
-                    this.emit("LOADED_META_DATA");
-                    this.onLoadedMetaDataReached = true;
-                    fireCallbacks();
-                }
-            };
+                this.emit("ERROR", {
+                    err
+                });
+                return;
+            }
+            this.options.logger.debug(`Recorder: initializing web socket stream to ${url2Connect}`);
+            let nativeSocket;
             try {
-                var _this_rawVisualUserMedia, _this_rawVisualUserMedia1, _this_rawVisualUserMedia2, _this_rawVisualUserMedia3;
-                const videoTrack = media_getFirstVideoTrack(localMediaStream);
-                this.videoTrackLabel = null == videoTrack ? void 0 : videoTrack.label;
-                if (videoTrack) if (videoTrack.enabled) if (util_isVirtualCamera(videoTrack)) throw error_createError({
-                    message: "Virtual cameras are not allowed.",
-                    explanation: `Please use a real camera, not "${videoTrack.label}".`,
-                    options: this.options
+                nativeSocket = new WebSocket(url2Connect);
+                nativeSocket.addEventListener("close", (event)=>{
+                    this.lastCloseEvent = {
+                        code: event.code,
+                        reason: event.reason,
+                        wasClean: event.wasClean
+                    };
                 });
-                else {
-                    let description = "";
-                    if (videoTrack.label.length > 0) description = description.concat(videoTrack.label);
-                    description = description.concat(` with enabled=${videoTrack.enabled}, muted=${videoTrack.muted}, readyState=${videoTrack.readyState}`);
-                    this.options.logger.debug(`UserMedia: ${videoTrack.kind} detected. ${description}`);
-                }
-                else throw error_createError({
-                    message: "Webcam is disabled",
-                    explanation: "The video track seems to be disabled. Enable it in your system.",
-                    options: this.options
+                nativeSocket.addEventListener("error", (event)=>{
+                    this.lastSocketError = error_getEventDetails(event);
                 });
-                else this.options.logger.debug("UserMedia: detected (but no video tracks exist");
-                null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) || _this_rawVisualUserMedia.addEventListener("loadedmetadata", onLoadedMetaData);
-                null == (_this_rawVisualUserMedia1 = this.rawVisualUserMedia) || _this_rawVisualUserMedia1.addEventListener("play", onPlay);
-                null == (_this_rawVisualUserMedia2 = this.rawVisualUserMedia) || _this_rawVisualUserMedia2.removeEventListener("error", this.handleMediaError);
-                null == (_this_rawVisualUserMedia3 = this.rawVisualUserMedia) || _this_rawVisualUserMedia3.addEventListener("error", this.handleMediaError);
-                this.setVisualStream(localMediaStream);
-                play();
             } catch (exc) {
-                unloadAllEventListeners();
-                endedEarlyCallback(exc);
+                this.connecting = this.connected = false;
+                const diagnostic = error_getWebSocketDiagnostic(url2Connect);
+                const message = diagnostic.looksAutomated ? "Automated crawler: WebSocket not supported in this environment" : `Failed to construct WebSocket to ${url2Connect}`;
+                const explanation = diagnostic.looksAutomated ? "Headless crawlers cannot use Videomail's WebSocket. No action needed." : `Please check your connection and try again. If the problem persists, contact us. Diagnostic: ${diagnostic.text}`;
+                const err = error_createError({
+                    message,
+                    explanation,
+                    options: this.options,
+                    exc
+                });
+                this.emit("ERROR", {
+                    err
+                });
+                return;
             }
-        }
-        getVideoTrackLabel() {
-            return this.videoTrackLabel;
-        }
-        isReady() {
-            var _this_rawVisualUserMedia, _this_rawVisualUserMedia1;
-            return Boolean((null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia.srcObject) || (null == (_this_rawVisualUserMedia1 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia1.currentSrc));
-        }
-        stop(visualStream, params) {
             try {
-                let chosenStream = visualStream;
-                if (!(null == params ? void 0 : params.aboutToInitialize)) {
-                    var _this_clearInitializationListeners, _this, _this_audioRecorder;
-                    this.initializationId++;
-                    null == (_this_clearInitializationListeners = (_this = this).clearInitializationListeners) || _this_clearInitializationListeners.call(_this);
-                    null != chosenStream || (chosenStream = this.currentVisualStream);
-                    const tracks = null == chosenStream ? void 0 : chosenStream.getTracks();
-                    if (tracks) tracks.forEach((track)=>{
-                        track.stop();
-                    });
-                    this.setVisualStream();
-                    null == (_this_audioRecorder = this.audioRecorder) || _this_audioRecorder.stop();
-                    this.audioRecorder = void 0;
-                }
-                if (!(null == params ? void 0 : params.preserveRecordingState)) this.paused = this.recording = false;
+                this.stream = stream_default()(nativeSocket);
             } catch (exc) {
-                this.emit("ERROR", {
+                this.connecting = this.connected = false;
+                const err = error_createError({
+                    message: `Failed to create a stream to ${url2Connect}`,
+                    explanation: "Please check your connection and try again. If the problem persists, contact us.",
+                    options: this.options,
                     exc
                 });
+                this.emit("ERROR", {
+                    err
+                });
+            }
+            const stream = this.stream;
+            if (stream) {
+                const connectionTimeoutMs = this.options.timeouts.connection;
+                this.connectionTimeout = window.setTimeout(()=>{
+                    if (this.isOnline() && this.isUserMediaLoaded()) {
+                        this.options.logger.debug(`${PIPE_SYMBOL}Reconnecting due to connection timeout.`);
+                        this.reconnecting = true;
+                        this.handleConnectionFailure({
+                            url2Connect,
+                            cause: "timeout"
+                        });
+                    } else this.handleConnectionFailure({
+                        url2Connect,
+                        cause: "timeout"
+                    });
+                }, connectionTimeoutMs);
+                stream.on("close", ()=>{
+                    this.handleStreamClose(url2Connect);
+                });
+                stream.on("connect", (args)=>{
+                    var _this_stream;
+                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *connect* event emitted with args: ${string_pretty(args)}`);
+                    this.clearConnectionTimeout();
+                    const isClosing = (null == (_this_stream = this.stream) ? void 0 : _this_stream.socket.readyState) === WebSocket.CLOSING;
+                    if (!this.connected && !isClosing && !this.unloaded) {
+                        this.connected = true;
+                        this.connecting = this.unloaded = false;
+                        this.reconnecting = false;
+                        this.reconnectAttempts = 0;
+                        this.clearReconnectTimeout();
+                        this.emit("CONNECTED");
+                        null == cb || cb();
+                    }
+                });
+                stream.on("data", (data)=>{
+                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *data* event emitted`);
+                    try {
+                        const command = JSON.parse(data.toString());
+                        this.executeCommand(command);
+                    } catch (exc) {
+                        this.options.logger.error(`Failed to parse command: ${exc}`);
+                        const err = error_createError({
+                            message: "Invalid server command",
+                            explanation: `Contact us. The invalid command was: ${data.toString()}.`,
+                            options: this.options,
+                            exc
+                        });
+                        this.emit("ERROR", {
+                            err
+                        });
+                    }
+                });
+                stream.on("error", (err)=>{
+                    this.handleStreamError(url2Connect, err);
+                });
+                stream.on("drain", ()=>{
+                    this.handleStreamDrain(stream);
+                });
+                stream.on("preend", (args)=>{
+                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *preend* event emitted with args: ${string_pretty(args)}`);
+                });
+                stream.on("end", ()=>{
+                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *end* event emitted`);
+                });
+                stream.on("pipe", (src)=>{
+                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *pipe* event emitted with src: ${string_pretty(src)}`);
+                });
+                stream.on("unpipe", (src)=>{
+                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *unpipe* event emitted with src: ${string_pretty(src)}`);
+                });
+                stream.on("resume", (args)=>{
+                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *resume* event emitted with args: ${string_pretty(args)}`);
+                });
+                stream.on("uncork", (args)=>{
+                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *uncork* event emitted with args: ${string_pretty(args)}`);
+                });
+                stream.on("readable", (args)=>{
+                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *readable* event emitted with args: ${string_pretty(args)}`);
+                });
+                stream.on("prefinish", (args)=>{
+                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *prefinish* event emitted with args: ${string_pretty(args)}`);
+                });
+                stream.on("finish", (args)=>{
+                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *finish* event emitted with args: ${string_pretty(args)}`);
+                });
             }
         }
-        createCanvas() {
-            const canvas = document.createElement("canvas");
-            const rawWidthDimension = this.getRawWidth(true);
-            if (rawWidthDimension.value) canvas.width = rawWidthDimension.value;
-            const rawHeight = this.getRawHeight(true);
-            if (rawHeight) canvas.height = rawHeight;
-            return canvas;
-        }
-        getVideoHeight() {
-            if (!this.rawVisualUserMedia) return;
-            return this.rawVisualUserMedia.videoHeight || this.rawVisualUserMedia.height;
-        }
-        getVideoWidth() {
-            if (!this.rawVisualUserMedia) return;
-            return this.rawVisualUserMedia.videoWidth || this.rawVisualUserMedia.width;
-        }
-        hasVideoWidth() {
-            const videoWidth = this.getVideoWidth();
-            return videoWidth && videoWidth > 0;
-        }
-        getRawWidth(responsive) {
-            let rawWidth;
-            const widthDimension = {
-                unit: "px"
-            };
-            rawWidth = responsive ? this.getVideoWidth() : this.options.video.width ? this.options.video.width : this.getVideoWidth();
-            if (responsive) {
-                const widthDimension = this.recorder.limitWidth(rawWidth);
-                rawWidth = null == widthDimension ? void 0 : widthDimension.value;
-            }
-            widthDimension.value = rawWidth;
-            return widthDimension;
-        }
-        getRawHeight(responsive) {
-            let rawHeight;
-            if (responsive) {
-                rawHeight = this.options.video.height || this.getVideoHeight();
-                const ratio = this.recorder.getRatio();
-                const rawWidth = this.getRawWidth(responsive);
-                if (void 0 !== ratio && rawWidth.value) rawHeight = rawWidth.value * ratio;
-            } else rawHeight = this.options.video.height ? this.options.video.height : this.getVideoHeight();
-            if (responsive) {
-                const heightDimension = this.recorder.limitHeight(rawHeight);
-                rawHeight = heightDimension.value;
-            }
-            return rawHeight;
-        }
-        getRawVisuals() {
-            return this.rawVisualUserMedia;
-        }
-        pause() {
-            this.paused = true;
-        }
-        isPaused() {
-            return this.paused;
-        }
-        resume() {
-            this.paused = false;
-        }
-        record() {
-            this.recording = true;
-        }
-        isRecording() {
-            return this.recording;
-        }
-        getAudioSampleRate() {
-            if (this.audioRecorder) return this.audioRecorder.getSampleRate();
-            return -1;
-        }
-        getCharacteristics() {
-            var _this_rawVisualUserMedia, _this_rawVisualUserMedia1, _this_rawVisualUserMedia2, _this_rawVisualUserMedia3, _this_rawVisualUserMedia4;
-            return {
-                audioSampleRate: this.getAudioSampleRate(),
-                muted: null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia.muted,
-                width: null == (_this_rawVisualUserMedia1 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia1.width,
-                height: null == (_this_rawVisualUserMedia2 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia2.height,
-                videoWidth: null == (_this_rawVisualUserMedia3 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia3.videoWidth,
-                videoHeight: null == (_this_rawVisualUserMedia4 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia4.videoHeight
-            };
-        }
-        constructor(recorder, options){
-            super("UserMedia", options), userMedia_define_property(this, "recorder", void 0), userMedia_define_property(this, "rawVisualUserMedia", void 0), userMedia_define_property(this, "paused", false), userMedia_define_property(this, "recording", false), userMedia_define_property(this, "audioRecorder", void 0), userMedia_define_property(this, "currentVisualStream", void 0), userMedia_define_property(this, "onPlayReached", false), userMedia_define_property(this, "onLoadedMetaDataReached", false), userMedia_define_property(this, "playingPromiseReached", false), userMedia_define_property(this, "videoTrackLabel", void 0), userMedia_define_property(this, "clearInitializationListeners", void 0), userMedia_define_property(this, "initializationId", 0), userMedia_define_property(this, "outputEvent", (e)=>{
-                var _this_rawVisualUserMedia, _this_rawVisualUserMedia1;
-                this.logEvent(e.type, {
-                    readyState: null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia.readyState
+        writeCommand(command, args, cb) {
+            if (this.connected) {
+                if (this.stream) {
+                    if (args) this.options.logger.debug(`$ ${command} with ${string_pretty(args)}`);
+                    else this.options.logger.debug(`$ ${command}`);
+                    const commandObj = {
+                        command,
+                        args
+                    };
+                    this.writeStream(Buffer.from(JSON.stringify(commandObj)), cb ? {
+                        onFlushedCallback: ()=>{
+                            queueMicrotask(cb);
+                        }
+                    } : void 0);
+                }
+            } else {
+                this.options.logger.debug(`Reconnecting for the command ${command} …`);
+                this.initSocket(()=>{
+                    this.writeCommand(command, args, cb);
                 });
-                null == (_this_rawVisualUserMedia1 = this.rawVisualUserMedia) || _this_rawVisualUserMedia1.removeEventListener(e.type, this.outputEvent);
-            }), userMedia_define_property(this, "handleMediaError", (event)=>{
-                this.options.logger.warn(`Caught video element error event: ${string_pretty(event)}`);
-            });
-            this.recorder = recorder;
-            this.rawVisualUserMedia = recorder.getRawVisualUserMedia();
-            mediaEvents.forEach((eventName)=>{
-                var _this_rawVisualUserMedia;
-                null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) || _this_rawVisualUserMedia.addEventListener(eventName, this.outputEvent, false);
-            });
+            }
+        }
+        constructor(options){
+            super(options), connection_define_property(this, "reconnectTimeout", void 0), connection_define_property(this, "connectionTimeout", void 0), connection_define_property(this, "userMediaLoaded", void 0), connection_define_property(this, "userMediaLoading", false), connection_define_property(this, "unloaded", void 0), connection_define_property(this, "connectionFailed", false), connection_define_property(this, "reconnectAttempts", 0), connection_define_property(this, "blocking", false), connection_define_property(this, "connectingStartedAt", void 0), connection_define_property(this, "lastCloseEvent", void 0), connection_define_property(this, "lastSocketError", void 0), connection_define_property(this, "pingInterval", void 0);
         }
     }
-    const visuals_userMedia = UserMedia;
-    var Buffer = __webpack_require__("dY").Buffer;
-    function recorder_define_property(obj, key, value) {
+    const connection = RecorderConnection;
+    function createUserMediaConstraints({ options, facingMode, limitedWidth, userMediaParams }) {
+        const video = {
+            frameRate: {
+                ideal: options.video.fps
+            }
+        };
+        if ((null == userMediaParams ? void 0 : userMediaParams.switchingFacingMode) || (null == userMediaParams ? void 0 : userMediaParams.recovering)) video.facingMode = userMediaParams.switchingFacingMode || facingMode;
+        if (options.video.width) video.width = {
+            ideal: options.video.width
+        };
+        else if (null == limitedWidth ? void 0 : limitedWidth.value) video.width = {
+            ideal: limitedWidth.value
+        };
+        if (options.video.height) video.height = {
+            ideal: options.video.height
+        };
+        return {
+            audio: isAudioEnabled(options),
+            video
+        };
+    }
+    const mediaConstraints = createUserMediaConstraints;
+    function media_define_property(obj, key, value) {
         if (key in obj) Object.defineProperty(obj, key, {
             value: value,
             enumerable: true,
@@ -20055,258 +20000,310 @@ var __webpack_exports__ = {};
         else obj[key] = value;
         return obj;
     }
-    function recorder_object_spread(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = null != arguments[i] ? arguments[i] : {};
-            var ownKeys = Object.keys(source);
-            if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-            ownKeys.forEach(function(key) {
-                recorder_define_property(target, key, source[key]);
-            });
+    class RecorderMedia extends connection {
+        show() {
+            html_showElement(this.recorderElement);
         }
-        return target;
-    }
-    const PIPE_SYMBOL = "°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°`°º¤ø,¸ ";
-    class Recorder extends util_Despot {
-        hasExceededWebSocketSendBuffer(buffer, opts) {
-            return buffer.length > 0 && !this.pendingWrites.enqueue(buffer, opts);
+        clearRetryTimeout() {
+            if (void 0 === this.retryTimeout) return;
+            this.options.logger.debug("Recorder: clearRetryTimeout()");
+            window.clearTimeout(this.retryTimeout);
+            this.retryTimeout = void 0;
         }
-        writeStream(buffer, opts) {
-            if (this.stream) if (this.stream.destroyed) {
-                this.stopPings();
-                const err = error_createError({
-                    message: "Already disconnected",
-                    explanation: "Sorry, connection to the server has been destroyed. Please reload.",
-                    options: this.options
+        showUserMedia() {
+            if (!this.connected) return false;
+            const hidden = this.isHidden();
+            if (!hidden) return true;
+            const notifying = this.isNotifying();
+            if (notifying) return true;
+            return this.blocking;
+        }
+        userMediaErrorCallback(err, usedConstraints) {
+            var _this_userMedia;
+            if (this.cameraRecovery) return void this.failCameraRecovery(err);
+            if (this.unloaded) return void this.options.logger.debug(`Recorder: already unloaded. Not going to throw error ${string_pretty(err)}`);
+            this.userMediaLoading = false;
+            this.clearUserMediaTimeout();
+            const characteristics = null == (_this_userMedia = this.userMedia) ? void 0 : _this_userMedia.getCharacteristics();
+            this.options.logger.debug(`Recorder: userMediaErrorCallback(), name: ${err.name}, message: ${err.message} and Webcam characteristics: ${characteristics ? string_pretty(characteristics) : "none"}`);
+            const errorListeners = this.getListeners("ERROR");
+            if (null == errorListeners ? void 0 : errorListeners.length) if (err.name !== error_VideomailError.MEDIA_DEVICE_NOT_SUPPORTED) {
+                const videomailError = error_createError({
+                    err,
+                    options: this.options,
+                    usedConstraints
                 });
-                this.handleWriteFailure(err);
-            } else if (this.streamBackpressured) {
-                if (this.hasExceededWebSocketSendBuffer(buffer, opts)) this.failMediaTransmission(error_createError({
-                    message: "WebSocket send buffer limit exceeded",
-                    explanation: "The connection to the server is too slow to keep up with this recording. The recording has been stopped; please start a new one.",
+                this.emit("ERROR", {
+                    err: videomailError
+                });
+            } else {
+                this.options.logger.debug(`Recorder: ignore user media error ${string_pretty(err)}`);
+                this.retryTimeout = window.setTimeout(()=>{
+                    this.retryTimeout = void 0;
+                    if (!this.unloaded) this.loadUserMedia();
+                }, this.options.timeouts.userMedia);
+            }
+            else {
+                this.options.logger.debug(`Recorder: no error listeners attached but throwing error ${string_pretty(err)}`);
+                throw error_createError({
+                    err,
+                    message: "Unable to process this error since there are no error listeners anymore.",
                     options: this.options
-                }));
-            } else this.writeToStream(this.stream, buffer, opts);
+                });
+            }
         }
-        writeToStream(stream, buffer, opts) {
-            const onFlushedCallback = null == opts ? void 0 : opts.onFlushedCallback;
-            try {
-                const canContinue = stream.write(buffer, ()=>{
-                    if (!onFlushedCallback) return;
-                    try {
-                        onFlushedCallback(opts);
-                    } catch (exc) {
-                        const err = error_createError({
-                            message: "Failed to write stream buffer",
-                            explanation: `stream.write() failed because of ${string_pretty(exc)}`,
-                            options: this.options,
-                            exc
-                        });
-                        this.emit("ERROR", {
-                            err
-                        });
-                    }
+        getUserMediaCallback(localStream, params, requestId = this.mediaRequestId) {
+            if (!this.userMedia) {
+                localStream.getTracks().forEach((track)=>{
+                    track.stop();
                 });
-                if (!canContinue) {
-                    this.streamBackpressured = true;
-                    this.startBackpressureTimeout();
-                    this.pauseForBackpressure();
-                    return false;
-                }
-                return true;
+                throw error_createError({
+                    message: "No user media is defined",
+                    options: this.options
+                });
+            }
+            this.options.logger.debug(`Recorder: getUserMediaCallback(${params ? string_pretty(params) : ""})`);
+            if (this.showUserMedia()) try {
+                this.userMedia.init(localStream, ()=>{
+                    if (!this.unloaded && requestId === this.mediaRequestId) this.onUserMediaReady(params);
+                }, this.onAudioSample.bind(this), (err)=>{
+                    if (!this.unloaded && requestId === this.mediaRequestId) this.userMediaErrorCallback(err, {
+                        audio: isAudioEnabled(this.options)
+                    });
+                }, params);
             } catch (exc) {
-                const err = error_createError({
-                    message: "Failed writing to server",
-                    explanation: `stream.write() failed because of ${string_pretty(exc)}`,
-                    options: this.options,
-                    exc
+                localStream.getTracks().forEach((track)=>{
+                    track.stop();
                 });
-                this.handleWriteFailure(err);
-                return false;
+                this.userMediaLoading = false;
+                this.clearUserMediaTimeout();
+                this.userMediaErrorCallback(exc, {
+                    audio: isAudioEnabled(this.options)
+                });
+            }
+            else {
+                localStream.getTracks().forEach((track)=>{
+                    track.stop();
+                });
+                this.userMediaLoading = false;
+                this.clearUserMediaTimeout();
+                this.cancelCameraRecovery();
             }
         }
-        flushPendingWrites(stream) {
-            if (this.isStaleStream(stream)) return;
-            this.streamBackpressured = false;
-            this.clearBackpressureTimeout();
-            let pendingWrite = this.pendingWrites.dequeue();
-            while(pendingWrite){
-                if (!this.writeToStream(stream, pendingWrite.buffer, pendingWrite.params)) return;
-                pendingWrite = this.pendingWrites.dequeue();
+        loadGenuineUserMedia(params) {
+            this.options.logger.debug(`Recorder: loadGenuineUserMedia(${params ? string_pretty(params) : ""})`);
+            this.emit("ASKING_WEBCAM_PERMISSION");
+            this.userMediaLoading = true;
+            const requestId = ++this.mediaRequestId;
+            const limitedWidth = this.options.video.width ? void 0 : this.visuals.limitWidth();
+            const constraints = mediaConstraints({
+                facingMode: this.facingMode,
+                limitedWidth,
+                options: this.options,
+                userMediaParams: params
+            });
+            this.options.logger.debug(string_summarize("Recorder: our webcam constraints are:", constraints));
+            this.options.logger.debug(string_summarize("Recorder: available webcam constraints are:", navigator.mediaDevices.getSupportedConstraints()));
+            const streamPromise = navigator.mediaDevices.getUserMedia(constraints);
+            streamPromise.then((localStream)=>{
+                if (this.unloaded || requestId !== this.mediaRequestId) return void localStream.getTracks().forEach((track)=>{
+                    track.stop();
+                });
+                this.getUserMediaCallback(localStream, params, requestId);
+            }).catch((reason)=>{
+                if (!this.unloaded && requestId === this.mediaRequestId) this.userMediaErrorCallback(reason, constraints);
+            });
+        }
+        loadUserMedia(params) {
+            if (this.userMediaLoaded) {
+                this.options.logger.debug("Recorder: skipping loadUserMedia() because it is already loaded");
+                this.onUserMediaReady(params);
+                return;
+            } else if (this.userMediaLoading) return void this.options.logger.debug("Recorder: skipping loadUserMedia() because it is already asking for permission");
+            this.options.logger.debug(`Recorder: loadUserMedia(${params ? string_pretty(params) : ""})`);
+            this.emit("LOADING_USER_MEDIA");
+            try {
+                if (!navigator.mediaDevices) throw new Error("No media devices are available.");
+                this.userMediaTimeout = window.setTimeout(()=>{
+                    if (!this.userMediaLoaded) {
+                        this.userMediaLoading = false;
+                        const err = util_getBrowser(this.options).getNoAccessIssue();
+                        this.userMediaErrorCallback(err, {
+                            audio: isAudioEnabled(this.options)
+                        });
+                    }
+                }, this.options.timeouts.userMedia);
+                this.userMediaLoading = true;
+                this.loadGenuineUserMedia(params);
+            } catch (exc) {
+                this.clearUserMediaTimeout();
+                this.options.logger.debug("Recorder: failed to load genuine user media");
+                this.userMediaLoading = false;
+                if (this.cameraRecovery) return void this.failCameraRecovery(exc);
+                const errorListeners = this.getListeners("ERROR");
+                if (null == errorListeners ? void 0 : errorListeners.length) this.emit("ERROR", {
+                    exc
+                });
+                else {
+                    this.options.logger.debug("Recorder: no error listeners attached but throwing exception further");
+                    throw exc;
+                }
             }
-            this.resumeRecordingAfterDrain();
-        }
-        isStaleStream(stream) {
-            return this.stream !== stream || stream.destroyed;
         }
-        canPauseForBackpressure() {
-            var _this_userMedia, _this_loop;
-            return Boolean(this.recordingActive && !(null == (_this_userMedia = this.userMedia) ? void 0 : _this_userMedia.isPaused()) && (null == (_this_loop = this.loop) ? void 0 : _this_loop.isRunning()));
+        isNotifying() {
+            return this.visuals.isNotifying();
         }
-        pauseForBackpressure() {
-            if (!this.canPauseForBackpressure()) return;
-            this.resumeAfterDrain = true;
-            this.loop.stop();
+        isHidden() {
+            return !this.recorderElement || html_isHidden(this.recorderElement);
         }
-        resumeRecordingAfterDrain() {
-            if (!this.resumeAfterDrain) return;
-            this.resumeAfterDrain = false;
-            if (this.canResumeAfterDrain()) {
-                var _this_loop;
-                null == (_this_loop = this.loop) || _this_loop.start();
+        clearUserMediaTimeout() {
+            if (void 0 !== this.userMediaTimeout) {
+                this.options.logger.debug("Recorder: clearUserMediaTimeout()");
+                window.clearTimeout(this.userMediaTimeout);
+                this.userMediaTimeout = void 0;
             }
         }
-        canResumeAfterDrain() {
+        clearStopTimeout() {
+            if (void 0 === this.stopTimeout) return;
+            window.clearTimeout(this.stopTimeout);
+            this.stopTimeout = void 0;
+        }
+        isReady() {
             var _this_userMedia;
-            return this.recordingActive && !(null == (_this_userMedia = this.userMedia) ? void 0 : _this_userMedia.isPaused());
+            return null == (_this_userMedia = this.userMedia) ? void 0 : _this_userMedia.isReady();
         }
-        handleWriteFailure(err) {
-            if (this.mediaTransmissionStarted) return void this.failMediaTransmission(err);
-            this.emit("ERROR", {
-                err
+        finishCameraRecovery(restored) {
+            this.clearUserMediaTimeout();
+            const resolve = this.resolveCameraRecovery;
+            const resumeRequested = restored && this.resumeAfterCameraRecovery;
+            this.cameraRecovery = void 0;
+            this.resolveCameraRecovery = void 0;
+            this.resumeAfterCameraRecovery = false;
+            null == resolve || resolve(restored);
+            if (resumeRequested && this.isPaused()) this.resume();
+        }
+        cancelCameraRecovery() {
+            var _this_userMedia;
+            if (!this.cameraRecovery) return;
+            this.mediaRequestId++;
+            this.userMediaLoading = false;
+            this.userMediaLoaded = false;
+            this.clearUserMediaTimeout();
+            null == (_this_userMedia = this.userMedia) || _this_userMedia.stop(void 0, {
+                preserveRecordingState: true
             });
+            this.finishCameraRecovery(false);
         }
-        failMediaTransmission(err) {
-            if (this.recordingTransportFailed) return;
-            this.recordingTransportFailed = true;
-            this.recordingActive = false;
-            this.mediaTransmissionStarted = false;
-            this.streamBackpressured = false;
-            this.resumeAfterDrain = false;
-            this.pendingWrites.clear();
-            this.connected = false;
-            this.connecting = false;
-            this.reconnecting = false;
-            this.clearReconnectTimeout();
-            this.clearBackpressureTimeout();
-            this.discardSocket();
-            this.reset();
-            this.framesCount = this.samplesCount = 0;
-            this.confirmedFrameNumber = this.confirmedSampleNumber = 0;
-            delete this.recordingStats;
-            this.recordingDimensions = void 0;
-            this.emit("ERROR", {
+        failCameraRecovery(exc) {
+            this.cancelCameraRecovery();
+            const err = error_createError({
+                message: "Camera recovery failed",
+                explanation: "Your recording is still paused. Check camera permissions, then try Resume again or stop to keep the recorded part.",
+                exc,
+                options: this.options
+            });
+            this.emit("CAMERA_RECOVERY_FAILED", {
                 err
             });
         }
-        startBackpressureTimeout() {
-            if (!this.shouldStartBackpressureTimeout()) return;
-            this.backpressureTimeout = window.setTimeout(()=>{
-                this.backpressureTimeout = void 0;
-                if (this.shouldIgnoreBackpressureTimeout()) return;
-                const err = error_createError({
-                    message: "WebSocket write timed out",
-                    explanation: "The server stopped accepting recording data. The recording has been stopped; please check your connection and start a new one.",
-                    options: this.options
+        recoverCamera() {
+            if (this.cameraRecovery) return this.cameraRecovery;
+            if (!this.built || this.unloaded || !this.userMedia || this.userMediaLoading || this.submitting || this.key || void 0 !== this.stopTimeout || this.recordingTransportFailed) return Promise.resolve(false);
+            const liveStream = this.userMedia.hasLiveStream();
+            if (liveStream && this.isRecording()) return Promise.resolve(true);
+            if (!liveStream && this.recordingActive && !this.isPaused()) this.pause();
+            const recovery = new Promise((resolve)=>{
+                this.resolveCameraRecovery = resolve;
+            });
+            this.cameraRecovery = recovery;
+            this.emit("CAMERA_RECOVERING");
+            if (liveStream) {
+                this.userMediaTimeout = window.setTimeout(()=>{
+                    this.failCameraRecovery(new Error("Camera playback recovery timed out."));
+                }, this.options.timeouts.userMedia);
+                this.userMedia.restorePlayback().then(()=>{
+                    if (this.cameraRecovery === recovery) this.finishCameraRecovery(true);
+                }).catch((exc)=>{
+                    if (this.cameraRecovery === recovery) this.failCameraRecovery(exc);
                 });
-                this.failMediaTransmission(err);
-            }, this.options.timeouts.connection);
-        }
-        shouldStartBackpressureTimeout() {
-            return void 0 === this.backpressureTimeout && this.mediaTransmissionStarted;
-        }
-        shouldIgnoreBackpressureTimeout() {
-            return !this.streamBackpressured || this.recordingTransportFailed;
+            } else {
+                this.userMediaLoaded = false;
+                this.loadUserMedia({
+                    recovering: true
+                });
+            }
+            return recovery;
         }
-        failInterruptedRecording() {
-            const unconfirmedFrames = Math.max(0, this.framesCount - this.confirmedFrameNumber);
-            const unconfirmedSamples = Math.max(0, this.samplesCount - this.confirmedSampleNumber);
-            const err = error_createError({
-                message: "Recording interrupted",
-                explanation: "The server connection closed before this recording completed. It cannot be safely resumed, so it has been stopped. Please start a new recording.",
-                options: this.options,
-                cause: {
-                    unconfirmedFrames,
-                    unconfirmedSamples
-                }
+        switchFacingMode() {
+            if (this.cameraRecovery || !util_getBrowser(this.options).isMobile()) return;
+            if ("user" === this.facingMode) this.facingMode = "environment";
+            else if ("environment" === this.facingMode) this.facingMode = "user";
+            else this.options.logger.warn(`Recorder: unsupported facing mode ${string_pretty(this.facingMode)}`);
+            this.loadGenuineUserMedia({
+                switchingFacingMode: this.facingMode
             });
-            this.failMediaTransmission(err);
-        }
-        handleStreamDrain(stream) {
-            this.options.logger.debug(`${PIPE_SYMBOL}Stream *drain* event emitted`);
-            this.flushPendingWrites(stream);
         }
-        canReconnectAfterStreamClose() {
-            return Boolean(this.connected && this.userMediaLoaded);
+        hide() {
+            if (!this.isHidden()) {
+                if (this.recorderElement) html_hideElement(this.recorderElement);
+                this.clearUserMediaTimeout();
+                this.clearRetryTimeout();
+            }
         }
-        shouldReportStreamClose() {
-            return !this.connecting && !this.blocking;
+        isUnloaded() {
+            return this.unloaded;
         }
-        handleStreamClose(url2Connect) {
-            const debugLine = string_summarize(`${PIPE_SYMBOL}Stream has closed:`, {
-                connecting: this.connecting,
-                connected: this.connected,
-                userMediaLoaded: this.userMediaLoaded,
-                blocking: this.blocking
-            });
-            this.options.logger.debug(debugLine);
-            const canReconnect = this.canReconnectAfterStreamClose();
-            this.connected = false;
-            this.stopPings();
-            if (this.shouldIgnoreStreamClose()) return;
-            if (this.mediaTransmissionStarted) this.failInterruptedRecording();
-            else if (canReconnect) {
-                this.pendingWrites.clear();
-                this.streamBackpressured = false;
-                this.resumeAfterDrain = false;
-                this.reconnecting = true;
-                this.initSocket();
-            } else if (this.shouldReportStreamClose()) window.setTimeout(()=>{
-                this.handleConnectionFailure({
-                    url2Connect,
-                    cause: "closed"
-                });
-            }, 0);
+        isUserMediaLoaded() {
+            return this.userMediaLoaded;
         }
-        shouldIgnoreStreamClose() {
-            return this.recordingTransportFailed || Boolean(this.unloaded) || this.validate();
+        constructor(visuals, options){
+            super(options), media_define_property(this, "visuals", void 0), media_define_property(this, "recorderElement", void 0), media_define_property(this, "userMedia", void 0), media_define_property(this, "userMediaTimeout", void 0), media_define_property(this, "retryTimeout", void 0), media_define_property(this, "stopTimeout", void 0), media_define_property(this, "mediaRequestId", 0), media_define_property(this, "cameraRecovery", void 0), media_define_property(this, "resolveCameraRecovery", void 0), media_define_property(this, "resumeAfterCameraRecovery", false), media_define_property(this, "submitting", false), media_define_property(this, "built", false), media_define_property(this, "key", void 0), media_define_property(this, "facingMode", void 0);
+            this.visuals = visuals;
+            this.facingMode = options.video.facingMode;
         }
-        handleStreamError(url2Connect, err) {
-            var _this_lastSocketError;
-            if ("u" > typeof Event && err instanceof Event) this.lastSocketError = error_getEventDetails(err);
-            else this.lastSocketError = serializeError(err);
-            const debugLine = string_summarize(`${PIPE_SYMBOL}Stream *error* event emitted:`, {
-                error: serializeError(err)
-            });
-            this.options.logger.debug(debugLine);
-            if (this.validate()) {
-                this.connected = false;
-                this.stopPings();
-                this.discardSocket();
-                return;
-            }
-            if (!this.connected) return void this.handleConnectionFailure({
-                url2Connect,
-                cause: "error"
-            });
-            const streamError = err instanceof Error ? err : new Error("WebSocket stream emitted an error event", {
-                cause: null != (_this_lastSocketError = this.lastSocketError) ? _this_lastSocketError : err
-            });
-            if (this.mediaTransmissionStarted) return void this.failInterruptedRecording();
-            this.emit("ERROR", {
-                err: error_createError({
-                    message: "WebSocket stream error",
-                    explanation: `The WebSocket stream emitted an error event. Details: ${string_pretty(err)}`,
-                    options: this.options,
-                    exc: streamError
-                })
+    }
+    const media = RecorderMedia;
+    function calculateProgress(confirmedCount, totalCount) {
+        return `${(confirmedCount / (totalCount || 1) * 100).toFixed(2)}%`;
+    }
+    function getConfirmedProgressNumber({ args, kind, options }) {
+        const label = "frame" === kind ? "frame" : "audio sample";
+        if (!args) throw error_createError({
+            message: `Arguments are missing for updating the ${label} progress`,
+            options
+        });
+        const confirmedNumber = args[kind];
+        if (!confirmedNumber) throw error_createError({
+            message: `The ${label} number is missing`,
+            options
+        });
+        return confirmedNumber;
+    }
+    var capture_Buffer = __webpack_require__("dY").Buffer;
+    function capture_define_property(obj, key, value) {
+        if (key in obj) Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+        else obj[key] = value;
+        return obj;
+    }
+    function capture_object_spread(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = null != arguments[i] ? arguments[i] : {};
+            var ownKeys = Object.keys(source);
+            if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+            ownKeys.forEach(function(key) {
+                capture_define_property(target, key, source[key]);
             });
         }
-        sendPings() {
-            this.stopPings();
-            this.pingInterval = window.setInterval(()=>{
-                this.options.logger.debug("Recorder: pinging...");
-                this.writeStream(Buffer.from(""));
-            }, this.options.timeouts.pingInterval);
-        }
-        stopPings() {
-            if (void 0 === this.pingInterval) return;
-            this.options.logger.debug("Recorder: stopping pings...");
-            window.clearInterval(this.pingInterval);
-            this.pingInterval = void 0;
-        }
+        return target;
+    }
+    class RecorderCapture extends media {
         onAudioSample(audioSample) {
             var _this_userMedia;
             if (this.recordingTransportFailed || this.cameraRecovery) return;
@@ -20317,9 +20314,6 @@ var __webpack_exports__ = {};
             const audioBuffer = audioSample.toBuffer();
             this.writeStream(audioBuffer);
         }
-        show() {
-            html_showElement(this.recorderElement);
-        }
         onUserMediaReady(params) {
             try {
                 this.options.logger.debug(`Recorder: onUserMediaReady(${params ? string_pretty(params) : ""})`);
@@ -20349,885 +20343,1417 @@ var __webpack_exports__ = {};
                 });
             }
         }
-        clearRetryTimeout() {
-            if (void 0 === this.retryTimeout) return;
-            this.options.logger.debug("Recorder: clearRetryTimeout()");
-            window.clearTimeout(this.retryTimeout);
-            this.retryTimeout = void 0;
-        }
-        clearConnectionTimeout() {
-            if (void 0 === this.connectionTimeout) return;
-            this.options.logger.debug("Recorder: clearConnectionTimeout()");
-            window.clearTimeout(this.connectionTimeout);
-            this.connectionTimeout = void 0;
+        calculateFrameProgress() {
+            return calculateProgress(this.confirmedFrameNumber, this.framesCount);
         }
-        clearBackpressureTimeout() {
-            if (void 0 === this.backpressureTimeout) return;
-            window.clearTimeout(this.backpressureTimeout);
-            this.backpressureTimeout = void 0;
+        calculateSampleProgress() {
+            return calculateProgress(this.confirmedSampleNumber, this.samplesCount);
         }
-        clearReconnectTimeout() {
-            if (void 0 === this.reconnectTimeout) return;
-            this.options.logger.debug("Recorder: clearReconnectTimeout()");
-            window.clearTimeout(this.reconnectTimeout);
-            this.reconnectTimeout = void 0;
+        updateOverallProgress() {
+            this.frameProgress = this.calculateFrameProgress();
+            if (isAudioEnabled(this.options)) this.sampleProgress = this.calculateSampleProgress();
+            this.emit("PROGRESS", {
+                frameProgress: this.frameProgress,
+                sampleProgress: this.sampleProgress
+            });
         }
-        handleConnectionFailure(params) {
-            if (this.retryConnection(params)) return;
-            this.failConnection(params);
+        updateFrameProgress(args) {
+            this.confirmedFrameNumber = getConfirmedProgressNumber({
+                args,
+                kind: "frame",
+                options: this.options
+            });
+            this.frameProgress = this.calculateFrameProgress();
+            this.updateOverallProgress();
         }
-        retryConnection(params) {
-            if (!this.canRetryConnection()) return false;
-            if (void 0 !== this.reconnectTimeout) return true;
-            const delayMs = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 10000);
-            this.reconnectAttempts++;
-            this.connecting = false;
-            this.clearConnectionTimeout();
-            this.discardSocket();
-            this.options.logger.debug(`Recorder: retrying WebSocket connection in ${delayMs}ms (cause ${params.cause}).`);
-            this.reconnectTimeout = window.setTimeout(()=>{
-                this.reconnectTimeout = void 0;
-                if (this.shouldContinueReconnect()) this.initSocket();
-            }, delayMs);
-            return true;
+        updateSampleProgress(args) {
+            this.confirmedSampleNumber = getConfirmedProgressNumber({
+                args,
+                kind: "sample",
+                options: this.options
+            });
+            this.sampleProgress = this.calculateSampleProgress();
+            this.updateOverallProgress();
         }
-        canRetryConnection() {
-            return Boolean(this.reconnecting && this.userMediaLoaded && this.isOnline() && !this.unloaded && !this.blocking);
+        preview(args) {
+            var _args_duration;
+            if (!args) throw error_createError({
+                message: "Preview arguments are missing.",
+                options: this.options
+            });
+            const hasAudio = this.samplesCount > 0;
+            this.mediaTransmissionStarted = false;
+            this.recordingActive = false;
+            this.recordingTransportFailed = false;
+            this.confirmedFrameNumber = this.confirmedSampleNumber = this.samplesCount = this.framesCount = 0;
+            this.sampleProgress = this.frameProgress = void 0;
+            this.key = args.key;
+            if (args.mp4) this.replay.setMp4Source(`${args.mp4 + constants.WHITELIST_KEY_LABEL}/${this.options.whitelistKey}/videomail.mp4`, true);
+            if (args.webm) this.replay.setWebMSource(`${args.webm + constants.WHITELIST_KEY_LABEL}/${this.options.whitelistKey}/videomail.webm`, true);
+            this.hide();
+            const widthDimension = this.getRecorderWidth(true);
+            const heightDimension = this.getRecorderHeight(true);
+            const duration = null != (_args_duration = args.duration) ? _args_duration : -1;
+            this.emit("PREVIEW", {
+                key: this.key,
+                width: null == widthDimension ? void 0 : widthDimension.value,
+                height: null == heightDimension ? void 0 : heightDimension.value,
+                hasAudio,
+                duration
+            });
+            if (this.stopTime) this.waitingTime = Date.now() - this.stopTime;
+            null != this.recordingStats || (this.recordingStats = {});
+            this.recordingStats.waitingTime = this.waitingTime;
         }
-        shouldContinueReconnect() {
-            return this.reconnecting && !this.unloaded && !this.blocking;
+        cancelAnimationFrame() {
+            var _this_loop;
+            null == (_this_loop = this.loop) || _this_loop.dispose();
         }
-        discardSocket() {
-            this.options.logger.debug("Recorder: discarding socket stream ...");
-            this.clearBackpressureTimeout();
-            this.pendingWrites.clear();
-            this.streamBackpressured = false;
-            this.resumeAfterDrain = false;
-            const stream = this.stream;
-            this.stream = void 0;
-            if (stream && !stream.destroyed) stream.destroy();
+        getIntervalSum() {
+            if (!this.loop) return;
+            return this.loop.getElapsedTime();
         }
-        isOnline() {
-            return navigator.onLine;
+        getAvgInterval() {
+            var _this_getIntervalSum;
+            const intervalSum = null != (_this_getIntervalSum = this.getIntervalSum()) ? _this_getIntervalSum : 0;
+            if (!this.hasValidInterval(intervalSum)) return;
+            return intervalSum / this.framesCount;
         }
-        failConnection(params) {
-            var _this_stream;
-            if (this.shouldIgnoreConnectionFailure()) return;
-            this.connectionFailed = true;
-            this.connecting = false;
-            this.reconnecting = false;
-            this.reconnectAttempts = 0;
-            this.clearReconnectTimeout();
-            this.clearConnectionTimeout();
-            const { url2Connect, cause } = params;
-            const online = this.isOnline();
-            const elapsedMs = this.connectingStartedAt ? Date.now() - this.connectingStartedAt : void 0;
-            const closeEvent = this.lastCloseEvent;
-            const socketError = this.lastSocketError;
-            const contents = {
-                cause,
-                closeCode: null == closeEvent ? void 0 : closeEvent.code,
-                closeReason: null == closeEvent ? void 0 : closeEvent.reason,
-                elapsedMs,
-                online,
-                secureContext: globalThis.isSecureContext,
-                socketReadyState: null == (_this_stream = this.stream) ? void 0 : _this_stream.socket.readyState,
-                timeoutMs: this.options.timeouts.connection,
-                url: url2Connect,
-                unloaded: this.unloaded,
-                userMediaLoaded: this.userMediaLoaded,
-                userMediaLoading: this.userMediaLoading,
-                wasClean: null == closeEvent ? void 0 : closeEvent.wasClean,
-                socketError,
-                blocking: this.blocking,
-                visibilityState: document.visibilityState
-            };
-            const debugLine = string_summarize("Recorder: failConnection() diagnostic", contents);
-            this.options.logger.debug(debugLine);
-            let explanation;
-            if (online) if ("timeout" === cause) explanation = `The server at ${url2Connect} did not respond within ${this.options.timeouts.connection}ms, even though your device is online. This usually points to a firewall or proxy silently dropping the connection. Please try a different network. If the problem persists, contact us.`;
-            else if ("error" === cause) explanation = `An error occurred while connecting to ${url2Connect}. Please check your internet connection and try again. If the problem persists, contact us.`;
-            else {
-                const closeSuffix = closeEvent ? ` (code ${closeEvent.code})` : "";
-                explanation = `Connection to ${url2Connect} is closed${closeSuffix}. Please check your internet connection and try again. If the problem persists, contact us.`;
-            }
-            else explanation = "Your device appears to be offline. Please check your internet connection and try again.";
-            this.discardSocket();
-            const err = error_createError({
-                message: "Unable to connect to the server",
-                explanation,
-                options: this.options,
-                cause: contents,
-                exc: socketError ? new Error("WebSocket connection error", {
-                    cause: socketError
-                }) : void 0
-            });
-            this.emit("ERROR", {
-                err
-            });
+        getAvgFps() {
+            var _this_getIntervalSum;
+            const intervalSum = null != (_this_getIntervalSum = this.getIntervalSum()) ? _this_getIntervalSum : 0;
+            if (!this.hasValidInterval(intervalSum)) return;
+            return this.framesCount / intervalSum * 1000;
         }
-        shouldIgnoreConnectionFailure() {
-            return this.connectionFailed || this.connected || Boolean(this.unloaded) || this.validate();
+        hasValidInterval(intervalSum) {
+            return intervalSum > 0;
         }
-        calculateFrameProgress() {
-            return `${(this.confirmedFrameNumber / (this.framesCount || 1) * 100).toFixed(2)}%`;
+        getRecordingStats() {
+            return this.recordingStats;
         }
-        calculateSampleProgress() {
-            return `${(this.confirmedSampleNumber / (this.samplesCount || 1) * 100).toFixed(2)}%`;
+        getAudioSampleRate() {
+            var _this_recordingAudioSampleRate;
+            var _this_userMedia;
+            return null != (_this_recordingAudioSampleRate = this.recordingAudioSampleRate) ? _this_recordingAudioSampleRate : null == (_this_userMedia = this.userMedia) ? void 0 : _this_userMedia.getAudioSampleRate();
         }
-        updateOverallProgress() {
-            this.frameProgress = this.calculateFrameProgress();
-            if (isAudioEnabled(this.options)) this.sampleProgress = this.calculateSampleProgress();
-            this.emit("PROGRESS", {
-                frameProgress: this.frameProgress,
-                sampleProgress: this.sampleProgress
+        stop(params) {
+            var _this_loop_complete, _this_loop;
+            this.cancelCameraRecovery();
+            if (!this.userMedia) throw new Error("No user media defined, unable to stop");
+            this.options.logger.debug(`Recorder: stop(${params ? string_pretty(params) : ""})`);
+            this.recordingActive = false;
+            const limitReached = null == params ? void 0 : params.limitReached;
+            this.emit("STOPPING", {
+                limitReached
             });
+            null == (_this_loop = this.loop) || null == (_this_loop_complete = _this_loop.complete) || _this_loop_complete.call(_this_loop);
+            this.stopTimeout = window.setTimeout(()=>{
+                this.stopTimeout = void 0;
+                this.stopTime = Date.now();
+                const videoType = this.replay.getVideoType();
+                if (!videoType) throw new Error("Unable to video record when no video type is defined.");
+                this.recordingStats = {
+                    avgFps: this.getAvgFps(),
+                    wantedFps: this.options.video.fps,
+                    avgInterval: this.getAvgInterval(),
+                    wantedInterval: 1e3 / this.options.video.fps,
+                    intervalSum: this.getIntervalSum(),
+                    framesCount: this.framesCount,
+                    videoType
+                };
+                if (this.userMedia) this.recordingStats.videoTrackLabel = this.userMedia.getVideoTrackLabel();
+                if (isAudioEnabled(this.options) && this.userMedia) {
+                    var _this_recordingAudioSampleRate;
+                    this.recordingStats.samplesCount = this.samplesCount;
+                    this.recordingStats.sampleRate = null != (_this_recordingAudioSampleRate = this.recordingAudioSampleRate) ? _this_recordingAudioSampleRate : this.userMedia.getAudioSampleRate();
+                }
+                this.writeCommand("stop", this.recordingStats, ()=>{
+                    this.emit("STOPPED", {
+                        recordingStats: this.recordingStats
+                    });
+                });
+                this.reset();
+            }, 60);
+        }
+        back(cb) {
+            this.emit("GOING_BACK");
+            this.key = void 0;
+            this.recordingDimensions = void 0;
+            this.unloaded = false;
+            this.show();
+            this.writeCommand("back", void 0, cb);
+        }
+        reInitializeAudio() {
+            var _this_userMedia;
+            this.options.logger.debug("Recorder: reInitializeAudio()");
+            this.clearUserMediaTimeout();
+            this.userMediaLoading = false;
+            null == (_this_userMedia = this.userMedia) || _this_userMedia.stop();
+            this.recordingDimensions = void 0;
+            this.userMediaLoaded = this.key = this.canvas = this.ctx = void 0;
+            this.loadUserMedia();
         }
-        updateFrameProgress(args) {
-            if (args) {
-                if (!args.frame) throw error_createError({
-                    message: "The frame number is missing",
-                    options: this.options
-                });
-            } else throw error_createError({
-                message: "Arguments are missing for updating the frame progress",
-                options: this.options
-            });
-            this.confirmedFrameNumber = args.frame;
-            this.frameProgress = this.calculateFrameProgress();
-            this.updateOverallProgress();
+        reset() {
+            this.cancelCameraRecovery();
+            if (!this.unloaded) {
+                var _this_userMedia;
+                this.options.logger.debug("Recorder: reset()");
+                this.emit("RESETTING");
+                this.cancelAnimationFrame();
+                null == (_this_userMedia = this.userMedia) || _this_userMedia.stop();
+                this.replay.reset();
+                this.userMediaLoaded = this.key = this.canvas = this.ctx = this.recordingBuffer = void 0;
+            }
         }
-        updateSampleProgress(args) {
-            if (args) {
-                if (!args.sample) throw error_createError({
-                    message: "The audio sample number is missing",
-                    options: this.options
-                });
-            } else throw error_createError({
-                message: "Arguments are missing for updating the audio sample progress",
-                options: this.options
-            });
-            this.confirmedSampleNumber = args.sample;
-            this.sampleProgress = this.calculateSampleProgress();
-            this.updateOverallProgress();
+        validate() {
+            return Boolean(this.key) && void 0 === this.canvas;
         }
-        preview(args) {
-            var _args_duration;
-            if (!args) throw error_createError({
-                message: "Preview arguments are missing.",
-                options: this.options
-            });
-            const hasAudio = this.samplesCount > 0;
-            this.mediaTransmissionStarted = false;
-            this.recordingActive = false;
-            this.recordingTransportFailed = false;
-            this.confirmedFrameNumber = this.confirmedSampleNumber = this.samplesCount = this.framesCount = 0;
-            this.sampleProgress = this.frameProgress = void 0;
-            this.key = args.key;
-            if (args.mp4) this.replay.setMp4Source(`${args.mp4 + constants.WHITELIST_KEY_LABEL}/${this.options.whitelistKey}/videomail.mp4`, true);
-            if (args.webm) this.replay.setWebMSource(`${args.webm + constants.WHITELIST_KEY_LABEL}/${this.options.whitelistKey}/videomail.webm`, true);
-            this.hide();
-            const widthDimension = this.getRecorderWidth(true);
-            const heightDimension = this.getRecorderHeight(true);
-            const duration = null != (_args_duration = args.duration) ? _args_duration : -1;
-            this.emit("PREVIEW", {
-                key: this.key,
-                width: null == widthDimension ? void 0 : widthDimension.value,
-                height: null == heightDimension ? void 0 : heightDimension.value,
-                hasAudio,
-                duration
-            });
-            if (this.stopTime) this.waitingTime = Date.now() - this.stopTime;
-            null != this.recordingStats || (this.recordingStats = {});
-            this.recordingStats.waitingTime = this.waitingTime;
+        pause(params) {
+            var _this_userMedia;
+            this.cancelCameraRecovery();
+            this.resumeAfterDrain = false;
+            const loop = this.loop;
+            if (!loop) throw new Error("No recording loop defined");
+            if (params) this.options.logger.debug(`pause() at frame ${this.framesCount} with ${string_pretty(params)}`);
+            else this.options.logger.debug(`pause() at frame ${this.framesCount}`);
+            null == (_this_userMedia = this.userMedia) || _this_userMedia.pause();
+            loop.stop();
+            this.emit("PAUSED");
+            this.sendPings();
         }
-        initSocket(cb) {
-            if (this.connected) {
-                this.options.logger.debug("Recorder: already **connected**. Not going to initialize a new WebSocket connection.");
-                null == cb || cb();
-                return;
-            }
-            if (this.connecting) return void this.options.logger.debug("Recorder: already **connecting**. Not going to initialize a new WebSocket connection.");
-            this.clearReconnectTimeout();
-            if (util_isAutomatedUserAgent()) {
-                this.connecting = false;
-                this.options.logger.debug("Recorder: skipping web socket connection for an automated crawler");
-                return;
-            }
-            this.connecting = true;
-            this.connectionFailed = false;
-            this.connectingStartedAt = Date.now();
-            this.lastCloseEvent = void 0;
-            this.lastSocketError = void 0;
-            this.emit("CONNECTING");
-            let url2Connect;
-            try {
-                const socketUrlObj = new URL(this.options.socketUrl);
-                socketUrlObj.searchParams.set(constants.WHITELIST_KEY_LABEL, this.options.whitelistKey);
-                url2Connect = socketUrlObj.toString();
-            } catch (exc) {
-                this.connecting = this.connected = false;
-                const err = error_createError({
-                    message: "Invalid WebSocket URL",
-                    explanation: `The configured socketUrl "${this.options.socketUrl}" is not a valid URL. Please check your videomail-client configuration.`,
-                    options: this.options,
-                    exc
-                });
-                this.emit("ERROR", {
-                    err
-                });
+        resume() {
+            var _this_userMedia;
+            if (this.cameraRecovery || !(null == (_this_userMedia = this.userMedia) ? void 0 : _this_userMedia.hasLiveStream())) {
+                this.recoverCamera();
+                this.resumeAfterCameraRecovery = Boolean(this.cameraRecovery);
                 return;
             }
-            this.options.logger.debug(`Recorder: initializing web socket stream to ${url2Connect}`);
-            let nativeSocket;
+            const loop = this.loop;
+            if (!loop) throw new Error("No recording loop defined");
+            this.options.logger.debug(`Recorder: resume() with frame ${this.framesCount}`);
+            this.stopPings();
+            this.emit("RESUMING");
+            this.userMedia.resume();
+            if (this.streamBackpressured) this.resumeAfterDrain = true;
+            else loop.start();
+        }
+        onFlushed(opts) {
+            const frameNumber = opts.frameNumber;
+            if (1 === frameNumber) this.emit("FIRST_FRAME_SENT");
+        }
+        draw(_deltaTime, elapsedTime) {
+            if (this.recordingTransportFailed) return;
+            if (!this.userMedia) throw new Error("No user media defined, unable to draw on canvas");
             try {
-                nativeSocket = new WebSocket(url2Connect);
-                nativeSocket.addEventListener("close", (event)=>{
-                    this.lastCloseEvent = {
-                        code: event.code,
-                        reason: event.reason,
-                        wasClean: event.wasClean
-                    };
-                });
-                nativeSocket.addEventListener("error", (event)=>{
-                    this.lastSocketError = error_getEventDetails(event);
-                });
+                if (!this.isPaused() && this.stream && this.ctx) {
+                    var _this_frame, _this_recordingBuffer;
+                    if (0 === this.framesCount) this.emit("SENDING_FIRST_FRAME");
+                    this.framesCount++;
+                    const imageSource = this.userMedia.getRawVisuals();
+                    if (this.canvas && imageSource) this.ctx.drawImage(imageSource, 0, 0, this.canvas.width, this.canvas.height);
+                    else throw new Error("Unable to draw an image without a defined canvas");
+                    this.recordingBuffer = null == (_this_frame = this.frame) ? void 0 : _this_frame.toBuffer();
+                    const recordingBufferLength = null == (_this_recordingBuffer = this.recordingBuffer) ? void 0 : _this_recordingBuffer.length;
+                    if (recordingBufferLength) {
+                        if (this.recordingBuffer) {
+                            const frameControlBuffer = capture_Buffer.from(JSON.stringify({
+                                frameNumber: this.framesCount
+                            }));
+                            const frameBuffer = capture_Buffer.concat([
+                                this.recordingBuffer,
+                                frameControlBuffer
+                            ]);
+                            this.mediaTransmissionStarted = true;
+                            this.writeStream(frameBuffer, {
+                                frameNumber: this.framesCount,
+                                onFlushedCallback: this.onFlushed.bind(this)
+                            });
+                            this.visuals.checkTimer(elapsedTime);
+                        }
+                    } else throw error_createError({
+                        message: "Failed to extract webcam data.",
+                        options: this.options
+                    });
+                }
             } catch (exc) {
-                this.connecting = this.connected = false;
-                const diagnostic = error_getWebSocketDiagnostic(url2Connect);
-                const message = diagnostic.looksAutomated ? "Automated crawler: WebSocket not supported in this environment" : `Failed to construct WebSocket to ${url2Connect}`;
-                const explanation = diagnostic.looksAutomated ? "Headless crawlers cannot use Videomail's WebSocket. No action needed." : `Please check your connection and try again. If the problem persists, contact us. Diagnostic: ${diagnostic.text}`;
-                const err = error_createError({
-                    message,
-                    explanation,
-                    options: this.options,
-                    exc
-                });
                 this.emit("ERROR", {
-                    err
-                });
-                return;
-            }
-            try {
-                this.stream = stream_default()(nativeSocket);
-            } catch (exc) {
-                this.connecting = this.connected = false;
-                const err = error_createError({
-                    message: `Failed to create a stream to ${url2Connect}`,
-                    explanation: "Please check your connection and try again. If the problem persists, contact us.",
-                    options: this.options,
                     exc
                 });
-                this.emit("ERROR", {
-                    err
-                });
             }
-            const stream = this.stream;
-            if (stream) {
-                const connectionTimeoutMs = this.options.timeouts.connection;
-                this.connectionTimeout = window.setTimeout(()=>{
-                    if (this.isOnline() && this.isUserMediaLoaded()) {
-                        this.options.logger.debug(`${PIPE_SYMBOL}Reconnecting due to connection timeout.`);
-                        this.reconnecting = true;
-                        this.handleConnectionFailure({
-                            url2Connect,
-                            cause: "timeout"
-                        });
-                    } else this.handleConnectionFailure({
-                        url2Connect,
-                        cause: "timeout"
-                    });
-                }, connectionTimeoutMs);
-                stream.on("close", ()=>{
-                    this.handleStreamClose(url2Connect);
-                });
-                stream.on("connect", (args)=>{
-                    var _this_stream;
-                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *connect* event emitted with args: ${string_pretty(args)}`);
-                    this.clearConnectionTimeout();
-                    const isClosing = (null == (_this_stream = this.stream) ? void 0 : _this_stream.socket.readyState) === WebSocket.CLOSING;
-                    if (!this.connected && !isClosing && !this.unloaded) {
-                        this.connected = true;
-                        this.connecting = this.unloaded = false;
-                        this.reconnecting = false;
-                        this.reconnectAttempts = 0;
-                        this.clearReconnectTimeout();
-                        this.emit("CONNECTED");
-                        null == cb || cb();
-                    }
-                });
-                stream.on("data", (data)=>{
-                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *data* event emitted`);
-                    try {
-                        const command = JSON.parse(data.toString());
-                        this.executeCommand(command);
-                    } catch (exc) {
-                        this.options.logger.error(`Failed to parse command: ${exc}`);
-                        const err = error_createError({
-                            message: "Invalid server command",
-                            explanation: `Contact us. The invalid command was: ${data.toString()}.`,
-                            options: this.options,
-                            exc
-                        });
-                        this.emit("ERROR", {
-                            err
+        }
+        createLoop() {
+            const newLoop = animitter_default()({
+                fps: this.options.video.fps
+            }, this.draw.bind(this));
+            this.originalAnimationFrameObject = newLoop.getRequestAnimationFrameObject();
+            return newLoop;
+        }
+        record() {
+            if (this.unloaded || this.cameraRecovery) return;
+            if (!this.connected) {
+                this.options.logger.debug("Recorder: reconnecting before recording …");
+                this.initSocket(()=>{
+                    this.once("SERVER_READY", ()=>{
+                        if (this.unloaded) return;
+                        if (this.userMediaLoaded || this.options.loadUserMediaOnRecord) this.record();
+                        else this.once("USER_MEDIA_READY", ()=>{
+                            if (!this.unloaded) this.record();
                         });
-                    }
-                });
-                stream.on("error", (err)=>{
-                    this.handleStreamError(url2Connect, err);
-                });
-                stream.on("drain", ()=>{
-                    this.handleStreamDrain(stream);
-                });
-                stream.on("preend", (args)=>{
-                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *preend* event emitted with args: ${string_pretty(args)}`);
-                });
-                stream.on("end", ()=>{
-                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *end* event emitted`);
+                    });
                 });
-                stream.on("pipe", (src)=>{
-                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *pipe* event emitted with src: ${string_pretty(src)}`);
+                return;
+            }
+            if (!this.userMediaLoaded) {
+                if (this.options.loadUserMediaOnRecord) this.loadUserMedia({
+                    recordWhenReady: true
                 });
-                stream.on("unpipe", (src)=>{
-                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *unpipe* event emitted with src: ${string_pretty(src)}`);
+                else {
+                    const err = error_createError({
+                        message: "Load and enable your camera first",
+                        options: this.options
+                    });
+                    this.emit("ERROR", {
+                        err
+                    });
+                }
+                return;
+            }
+            const loop = this.loop;
+            if (!loop) throw new Error("No recording loop defined");
+            this.recordingDimensions = void 0;
+            try {
+                if (!this.userMedia) throw new Error("No user media defined, unable to create canvas");
+                this.canvas = this.userMedia.createCanvas();
+            } catch (exc) {
+                const err = error_createError({
+                    exc,
+                    options: this.options
                 });
-                stream.on("resume", (args)=>{
-                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *resume* event emitted with args: ${string_pretty(args)}`);
+                this.emit("ERROR", {
+                    err
                 });
-                stream.on("uncork", (args)=>{
-                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *uncork* event emitted with args: ${string_pretty(args)}`);
+                return;
+            }
+            this.ctx = this.canvas.getContext("2d");
+            if (!this.canvas.width) {
+                const err = error_createError({
+                    message: "Canvas has an invalid width.",
+                    options: this.options
                 });
-                stream.on("readable", (args)=>{
-                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *readable* event emitted with args: ${string_pretty(args)}`);
+                this.emit("ERROR", {
+                    err
                 });
-                stream.on("prefinish", (args)=>{
-                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *prefinish* event emitted with args: ${string_pretty(args)}`);
+                return;
+            }
+            if (!this.canvas.height) {
+                const err = error_createError({
+                    message: "Canvas has an invalid height.",
+                    options: this.options
                 });
-                stream.on("finish", (args)=>{
-                    this.options.logger.debug(`${PIPE_SYMBOL}Stream *finish* event emitted with args: ${string_pretty(args)}`);
+                this.emit("ERROR", {
+                    err
                 });
+                return;
             }
+            this.recordingDimensions = {
+                width: this.canvas.width,
+                height: this.canvas.height
+            };
+            this.frame = new canvas_to_buffer_modern_r(this.canvas, this.options.image.types, this.options.image.quality);
+            this.options.logger.debug("Recorder: record()");
+            this.recordingActive = true;
+            this.recordingTransportFailed = false;
+            this.mediaTransmissionStarted = false;
+            this.recordingAudioSampleRate = void 0;
+            this.userMedia.record();
+            this.emit("RECORDING", {
+                framesCount: this.framesCount
+            });
+            loop.on("update", (_deltaTime, elapsedTime)=>{
+                let avgFPS;
+                avgFPS = 0 !== elapsedTime ? Math.round(this.framesCount / elapsedTime * 1000) : void 0;
+                this.options.logger.debug(`Recorder updates avgFps = ${avgFPS} at frame ${this.framesCount}`);
+            });
+            loop.start();
         }
-        showUserMedia() {
-            if (!this.connected) return false;
-            const hidden = this.isHidden();
-            if (!hidden) return true;
-            const notifying = this.isNotifying();
-            if (notifying) return true;
-            return this.blocking;
+        setAnimationFrameObject(newObj) {
+            if (this.loop) {
+                const isRecording = this.isRecording();
+                this.loop.stop();
+                this.loop.setRequestAnimationFrameObject(newObj);
+                if (isRecording) this.loop.start();
+            }
         }
-        userMediaErrorCallback(err, usedConstraints) {
+        restoreAnimationFrameObject() {
+            this.options.logger.debug("Recorder: restoreAnimationFrameObject()");
+            if (this.originalAnimationFrameObject) this.setAnimationFrameObject(this.originalAnimationFrameObject);
+        }
+        loopWithTimeouts() {
+            this.options.logger.debug("Recorder: loopWithTimeouts()");
+            const wantedInterval = 1e3 / this.options.video.fps;
+            let processingTime = 0;
+            const raf = (fn)=>window.setTimeout(()=>{
+                    const start = Date.now();
+                    fn();
+                    processingTime = Date.now() - start;
+                }, wantedInterval - processingTime);
+            const cancel = (id)=>{
+                window.clearTimeout(id);
+            };
+            this.setAnimationFrameObject({
+                requestAnimationFrame: raf,
+                cancelAnimationFrame: cancel
+            });
+        }
+        isPaused() {
+            var _this_userMedia, _this_loop;
+            return (null == (_this_userMedia = this.userMedia) ? void 0 : _this_userMedia.isPaused()) && !(null == (_this_loop = this.loop) ? void 0 : _this_loop.isRunning());
+        }
+        isUserMediaPaused() {
+            var _ref;
             var _this_userMedia;
-            if (this.cameraRecovery) return void this.failCameraRecovery(err);
-            if (this.unloaded) return void this.options.logger.debug(`Recorder: already unloaded. Not going to throw error ${string_pretty(err)}`);
-            this.userMediaLoading = false;
-            this.clearUserMediaTimeout();
-            const characteristics = null == (_this_userMedia = this.userMedia) ? void 0 : _this_userMedia.getCharacteristics();
-            this.options.logger.debug(`Recorder: userMediaErrorCallback(), name: ${err.name}, message: ${err.message} and Webcam characteristics: ${characteristics ? string_pretty(characteristics) : "none"}`);
-            const errorListeners = this.getListeners("ERROR");
-            if (null == errorListeners ? void 0 : errorListeners.length) if (err.name !== error_VideomailError.MEDIA_DEVICE_NOT_SUPPORTED) {
-                const videomailError = error_createError({
-                    err,
-                    options: this.options,
-                    usedConstraints
-                });
-                this.emit("ERROR", {
-                    err: videomailError
-                });
+            return null != (_ref = null == (_this_userMedia = this.userMedia) ? void 0 : _this_userMedia.isPaused()) ? _ref : false;
+        }
+        isCaptureLoopRunning() {
+            var _ref;
+            var _this_loop;
+            return null != (_ref = null == (_this_loop = this.loop) ? void 0 : _this_loop.isRunning()) ? _ref : false;
+        }
+        stopCaptureLoop() {
+            var _this_loop;
+            null == (_this_loop = this.loop) || _this_loop.stop();
+        }
+        startCaptureLoop() {
+            var _this_loop;
+            null == (_this_loop = this.loop) || _this_loop.start();
+        }
+        isRecording() {
+            var _this_loop;
+            return Boolean((null == (_this_loop = this.loop) ? void 0 : _this_loop.isRunning()) && !this.isPaused() && !this.isNotifying() && this.stream && !this.stream.destroyed);
+        }
+        getRecordingDimensions() {
+            return this.recordingDimensions && capture_object_spread({}, this.recordingDimensions);
+        }
+        constructor(visuals, replay, options){
+            super(visuals, options), capture_define_property(this, "replay", void 0), capture_define_property(this, "loop", void 0), capture_define_property(this, "originalAnimationFrameObject", void 0), capture_define_property(this, "recordingAudioSampleRate", void 0), capture_define_property(this, "frameProgress", void 0), capture_define_property(this, "sampleProgress", void 0), capture_define_property(this, "canvas", void 0), capture_define_property(this, "ctx", void 0), capture_define_property(this, "stopTime", void 0), capture_define_property(this, "waitingTime", void 0), capture_define_property(this, "frame", void 0), capture_define_property(this, "recordingBuffer", void 0);
+            this.replay = replay;
+        }
+    }
+    const capture = RecorderCapture;
+    function figureMinHeight(height, options) {
+        let minHeight;
+        if (options.video.height) {
+            minHeight = height ? Math.min(options.video.height, height) : options.video.height;
+            if (minHeight < 1) throw error_createError({
+                message: `Got a min height less than 1 (${minHeight})!`,
+                options
+            });
+        } else minHeight = height;
+        return minHeight;
+    }
+    const dimensions_figureMinHeight = figureMinHeight;
+    function getRatio(options, videoHeight, videoWidth) {
+        let ratio = 1;
+        const hasVideoDimensions = videoHeight && videoWidth;
+        const desiredHeight = options.video.height;
+        const desiredWidth = options.video.width;
+        const hasDesiredDimensions = desiredHeight && desiredWidth;
+        if (hasDesiredDimensions) ratio = hasVideoDimensions ? videoHeight < desiredHeight || videoWidth < desiredWidth ? videoHeight / videoWidth : desiredHeight / desiredWidth : desiredHeight / desiredWidth;
+        else if (hasVideoDimensions) ratio = videoHeight / videoWidth;
+        return ratio;
+    }
+    const dimensions_getRatio = getRatio;
+    function calculateHeight(responsive, videoWidth, options, ratio, element) {
+        const dimension = {
+            unit: "px"
+        };
+        let width = videoWidth;
+        if (responsive && element) {
+            const limitedDimension = dimensions_limitWidth(element, options, width);
+            width = limitedDimension.value;
+        }
+        const chosenRatio = null != ratio ? ratio : dimensions_getRatio(options, void 0, videoWidth);
+        const height = width ? Math.round(width * chosenRatio) : void 0;
+        if (height && Number.isInteger(height) && height < 1) throw error_createError({
+            message: "Just calculated a height less than 1 which is wrong.",
+            options
+        });
+        const minHeight = dimensions_figureMinHeight(height, options);
+        dimension.value = minHeight;
+        return dimension;
+    }
+    const dimensions_calculateHeight = calculateHeight;
+    function calculateWidth(responsive, options, videoHeight, ratio) {
+        const dimension = {
+            unit: "px"
+        };
+        let height = dimensions_figureMinHeight(videoHeight, options);
+        if (responsive) {
+            const limitedDimension = dimensions_limitHeight(height, options, "calculateWidth");
+            height = limitedDimension.value;
+        }
+        if (!height || height < 1) throw error_createError({
+            message: `Height ${height} cannot be smaller than 1 when calculating width.`,
+            options
+        });
+        const chosenRatio = null != ratio ? ratio : dimensions_getRatio(options, videoHeight);
+        const calculatedWidth = Math.round(height / chosenRatio);
+        if (calculatedWidth < 1) throw error_createError({
+            message: "Calculated width cannot be smaller than 1!",
+            options
+        });
+        dimension.value = calculatedWidth;
+        return dimension;
+    }
+    const dimensions_calculateWidth = calculateWidth;
+    function dimensions_define_property(obj, key, value) {
+        if (key in obj) Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+        else obj[key] = value;
+        return obj;
+    }
+    class RecorderDimensions {
+        correctDimensions() {
+            const recorderElement = this.context.getRecorderElement();
+            if (!recorderElement) return;
+            const widthDimension = dimensions_useFullWidth(this.context.options.video.mobileBreakPoint);
+            if (this.context.options.video.stretch || widthDimension) {
+                recorderElement.style.width = "100%";
+                recorderElement.style.removeProperty("height");
             } else {
-                this.options.logger.debug(`Recorder: ignore user media error ${string_pretty(err)}`);
-                this.retryTimeout = window.setTimeout(()=>{
-                    this.retryTimeout = void 0;
-                    if (!this.unloaded) this.loadUserMedia();
-                }, this.options.timeouts.userMedia);
-            }
-            else {
-                this.options.logger.debug(`Recorder: no error listeners attached but throwing error ${string_pretty(err)}`);
-                throw error_createError({
-                    err,
-                    message: "Unable to process this error since there are no error listeners anymore.",
-                    options: this.options
-                });
+                if (this.context.options.video.width) {
+                    const recorderWidth = this.getRecorderWidth(true);
+                    if (null == recorderWidth ? void 0 : recorderWidth.value) recorderElement.width = recorderWidth.value;
+                    else recorderElement.style.removeProperty("width");
+                }
+                if (this.context.options.video.height) {
+                    const recorderHeight = this.getRecorderHeight(true);
+                    if (null == recorderHeight ? void 0 : recorderHeight.value) recorderElement.height = recorderHeight.value;
+                    else recorderElement.style.removeProperty("height");
+                }
             }
         }
-        getUserMediaCallback(localStream, params, requestId = this.mediaRequestId) {
-            if (!this.userMedia) {
-                localStream.getTracks().forEach((track)=>{
-                    track.stop();
-                });
-                throw error_createError({
-                    message: "No user media is defined",
-                    options: this.options
-                });
+        getRecorderWidth(responsive) {
+            const userMedia = this.context.getUserMedia();
+            if (null == userMedia ? void 0 : userMedia.hasVideoWidth()) return userMedia.getRawWidth(responsive);
+            else if (responsive && this.context.options.video.width) return this.context.visuals.limitWidth(this.context.options.video.width);
+            const dimension = {
+                unit: "px",
+                value: this.context.options.video.width
+            };
+            return dimension;
+        }
+        getRecorderHeight(responsive, useBoundingClientRect) {
+            const recorderElement = this.context.getRecorderElement();
+            const userMedia = this.context.getUserMedia();
+            let recorderHeight;
+            if (recorderElement && useBoundingClientRect) {
+                const height = recorderElement.getBoundingClientRect().height;
+                recorderHeight = {
+                    unit: "px",
+                    value: height
+                };
+            } else if (userMedia) {
+                let height = userMedia.getRawHeight(responsive);
+                if (void 0 !== height && this.context.options.video.width) {
+                    const ratio = this.getRatio();
+                    if (void 0 !== ratio) {
+                        const idealHeight = this.context.options.video.width * ratio;
+                        height = Math.min(idealHeight, height);
+                    }
+                }
+                recorderHeight = {
+                    unit: "px",
+                    value: height
+                };
+            } else if (responsive && this.context.options.video.height) recorderHeight = this.calculateHeight(responsive);
+            else if (this.context.options.video.height) {
+                const height = this.context.options.video.height;
+                recorderHeight = {
+                    unit: "px",
+                    value: height
+                };
             }
-            this.options.logger.debug(`Recorder: getUserMediaCallback(${params ? string_pretty(params) : ""})`);
-            if (this.showUserMedia()) try {
-                this.userMedia.init(localStream, ()=>{
-                    if (!this.unloaded && requestId === this.mediaRequestId) this.onUserMediaReady(params);
-                }, this.onAudioSample.bind(this), (err)=>{
-                    if (!this.unloaded && requestId === this.mediaRequestId) this.userMediaErrorCallback(err, {
-                        audio: isAudioEnabled(this.options)
-                    });
-                }, params);
-            } catch (exc) {
-                localStream.getTracks().forEach((track)=>{
-                    track.stop();
-                });
-                this.userMediaLoading = false;
-                this.clearUserMediaTimeout();
-                this.userMediaErrorCallback(exc, {
-                    audio: isAudioEnabled(this.options)
-                });
+            return recorderHeight;
+        }
+        getRatio() {
+            const userMedia = this.context.getUserMedia();
+            let ratio;
+            if (userMedia) {
+                const userMediaVideoWidth = userMedia.getVideoWidth();
+                const userMediaVideoHeight = userMedia.getVideoHeight();
+                if (!userMediaVideoWidth || userMediaVideoWidth < 1) ratio = this.context.visuals.getRatio();
+                else if (userMediaVideoHeight) ratio = userMediaVideoHeight / userMediaVideoWidth;
+            } else ratio = dimensions_getRatio(this.context.options);
+            return ratio;
+        }
+        calculateWidth(responsive) {
+            const userMedia = this.context.getUserMedia();
+            const recorderElement = this.context.getRecorderElement();
+            let videoHeight;
+            if (userMedia) videoHeight = userMedia.getVideoHeight();
+            else if (recorderElement) videoHeight = recorderElement.videoHeight || recorderElement.height;
+            return dimensions_calculateWidth(responsive, this.context.options, videoHeight, this.getRatio());
+        }
+        calculateHeight(responsive) {
+            const userMedia = this.context.getUserMedia();
+            const recorderElement = this.context.getRecorderElement();
+            let videoDimension;
+            if (userMedia) {
+                const videoHeight = userMedia.getVideoHeight();
+                videoDimension = {
+                    value: videoHeight,
+                    unit: "px"
+                };
+            } else if (recorderElement) {
+                const videoHeight = recorderElement.videoHeight || recorderElement.height;
+                videoDimension = {
+                    value: videoHeight,
+                    unit: "px"
+                };
+            } else videoDimension = dimensions_calculateHeight(responsive, void 0, this.context.options, this.getRatio(), recorderElement);
+            return videoDimension;
+        }
+        constructor(context){
+            dimensions_define_property(this, "context", void 0);
+            this.context = context;
+        }
+    }
+    const recorder_dimensions = RecorderDimensions;
+    function getFirstVideoTrack(localMediaStream) {
+        const videoTracks = localMediaStream.getVideoTracks();
+        let videoTrack;
+        if (videoTracks[0]) videoTrack = videoTracks[0];
+        return videoTrack;
+    }
+    const media_getFirstVideoTrack = getFirstVideoTrack;
+    const MEDIA_EVENTS = [
+        "loadstart",
+        "suspend",
+        "progress",
+        "abort",
+        "emptied",
+        "stalled",
+        "pause",
+        "loadeddata",
+        "waiting",
+        "playing",
+        "canplay",
+        "canplaythrough",
+        "seeking",
+        "seeked",
+        "ended",
+        "ratechange",
+        "durationchange",
+        "volumechange"
+    ];
+    const mediaEvents = MEDIA_EVENTS;
+    function esm_define_property(obj, key, value) {
+        if (key in obj) Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+        else obj[key] = value;
+        return obj;
+    }
+    class AudioSample {
+        toBuffer() {
+            const l = this.float32Array.length;
+            const arr = new Int16Array(l);
+            this.float32Array.forEach((sample, i)=>{
+                const clampedSample = Number.isFinite(sample) ? Math.max(-1, sample) : sample;
+                arr[i] = 0x7fff * Math.min(1, clampedSample);
+            });
+            return typedarray_to_buffer(arr);
+        }
+        constructor(float32Array){
+            esm_define_property(this, "float32Array", void 0);
+            this.float32Array = float32Array;
+        }
+    }
+    const esm_src = AudioSample;
+    const esm = esm_src;
+    var is_power_of_two = __webpack_require__("dZ");
+    var is_power_of_two_default = /*#__PURE__*/ __webpack_require__.n(is_power_of_two);
+    const AUDIO_RECORDER_PROCESSOR_NAME = "videomail-pcm-recorder";
+    function registerAudioRecorderProcessor(name, Processor, register) {
+        class PcmRecorderProcessor extends Processor {
+            process(inputs) {
+                var _inputs_;
+                if (this.recordingId < 0) return false;
+                const channel = null == (_inputs_ = inputs[0]) ? void 0 : _inputs_[0];
+                if (!channel || 0 === this.recordingId) return true;
+                let inputOffset = 0;
+                while(inputOffset < channel.length){
+                    const count = Math.min(this.samples.length - this.offset, channel.length - inputOffset);
+                    this.samples.set(channel.subarray(inputOffset, inputOffset + count), this.offset);
+                    this.offset += count;
+                    inputOffset += count;
+                    if (this.offset === this.samples.length) {
+                        const samples = this.samples;
+                        this.port.postMessage({
+                            recordingId: this.recordingId,
+                            samples
+                        }, [
+                            samples.buffer
+                        ]);
+                        this.samples = new Float32Array(this.offset);
+                        this.offset = 0;
+                    }
+                }
+                return true;
             }
-            else {
-                localStream.getTracks().forEach((track)=>{
-                    track.stop();
-                });
-                this.userMediaLoading = false;
-                this.clearUserMediaTimeout();
-                this.cancelCameraRecovery();
+            constructor(options){
+                super();
+                this.samples = new Float32Array(options.processorOptions.bufferSize);
+                this.offset = 0;
+                this.recordingId = 0;
+                this.port.onmessage = (event)=>{
+                    const recordingId = event.data;
+                    if ("number" != typeof recordingId) return;
+                    if (!Number.isSafeInteger(recordingId) || recordingId < -1) return;
+                    this.recordingId = recordingId;
+                    this.offset = 0;
+                };
             }
         }
-        loadGenuineUserMedia(params) {
-            this.options.logger.debug(`Recorder: loadGenuineUserMedia(${params ? string_pretty(params) : ""})`);
-            this.emit("ASKING_WEBCAM_PERMISSION");
-            this.userMediaLoading = true;
-            const requestId = ++this.mediaRequestId;
-            const constraints = {
-                video: {
-                    frameRate: {
-                        ideal: this.options.video.fps
-                    }
-                },
-                audio: isAudioEnabled(this.options)
-            };
-            this.configureVideoConstraints(constraints, params);
-            this.options.logger.debug(string_summarize("Recorder: our webcam constraints are:", constraints));
-            this.options.logger.debug(string_summarize("Recorder: available webcam constraints are:", navigator.mediaDevices.getSupportedConstraints()));
-            const streamPromise = navigator.mediaDevices.getUserMedia(constraints);
-            streamPromise.then((localStream)=>{
-                if (this.unloaded || requestId !== this.mediaRequestId) return void localStream.getTracks().forEach((track)=>{
-                    track.stop();
-                });
-                this.getUserMediaCallback(localStream, params, requestId);
-            }).catch((reason)=>{
-                if (!this.unloaded && requestId === this.mediaRequestId) this.userMediaErrorCallback(reason, constraints);
+        register(name, PcmRecorderProcessor);
+    }
+    function AudioRecorder_asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+        try {
+            var info = gen[key](arg);
+            var value = info.value;
+        } catch (error) {
+            reject(error);
+            return;
+        }
+        if (info.done) resolve(value);
+        else Promise.resolve(value).then(_next, _throw);
+    }
+    function AudioRecorder_async_to_generator(fn) {
+        return function() {
+            var self1 = this, args = arguments;
+            return new Promise(function(resolve, reject) {
+                var gen = fn.apply(self1, args);
+                function _next(value) {
+                    AudioRecorder_asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+                }
+                function _throw(err) {
+                    AudioRecorder_asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+                }
+                _next(void 0);
+            });
+        };
+    }
+    function AudioRecorder_define_property(obj, key, value) {
+        if (key in obj) Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+        else obj[key] = value;
+        return obj;
+    }
+    const CHANNELS = 1;
+    const DEFAULT_BUFFER_SIZE = 2048;
+    const MIN_BUFFER_SIZE = 256;
+    const MAX_BUFFER_SIZE = 16384;
+    class AudioRecorder extends util_Despot {
+        getAudioContext() {
+            if (!this.vcAudioContext) this.vcAudioContext = new window.AudioContext();
+            return this.vcAudioContext;
+        }
+        getBufferSize() {
+            const configuredSize = this.options.audio.bufferSize;
+            const bufferSize = "auto" === configuredSize ? DEFAULT_BUFFER_SIZE : configuredSize;
+            if (void 0 === bufferSize) throw error_createError({
+                message: "Audio buffer size is required.",
+                options: this.options
+            });
+            const validBufferSize = Number.isInteger(bufferSize) && bufferSize >= MIN_BUFFER_SIZE && bufferSize <= MAX_BUFFER_SIZE && is_power_of_two_default()(bufferSize);
+            if (!validBufferSize) throw error_createError({
+                message: `Audio buffer size must be a power of two between ${MIN_BUFFER_SIZE} and ${MAX_BUFFER_SIZE}. The current buffer size is ${bufferSize}.`,
+                options: this.options
             });
+            return bufferSize;
         }
-        configureVideoConstraints(constraints, params) {
-            const videoConstraints = "object" == typeof constraints.video ? constraints.video : void 0;
-            if (!videoConstraints) return;
-            if ((null == params ? void 0 : params.switchingFacingMode) || (null == params ? void 0 : params.recovering)) videoConstraints.facingMode = params.switchingFacingMode || this.facingMode;
-            if (this.options.video.width) videoConstraints.width = {
-                ideal: this.options.video.width
-            };
-            else {
-                const limitedWidth = this.limitWidth();
-                if (null == limitedWidth ? void 0 : limitedWidth.value) videoConstraints.width = {
-                    ideal: limitedWidth.value
-                };
+        validateVolume() {
+            const { volume } = this.options.audio;
+            const validVolume = Number.isFinite(volume) && volume >= 0 && volume <= 1;
+            if (!validVolume) throw error_createError({
+                message: `Audio volume must be between zero and one. The current volume is ${volume}.`,
+                options: this.options
+            });
+        }
+        revokeModuleUrl() {
+            if (this.moduleUrl) {
+                URL.revokeObjectURL(this.moduleUrl);
+                this.moduleUrl = void 0;
             }
-            if (this.options.video.height) videoConstraints.height = {
-                ideal: this.options.video.height
-            };
         }
-        loadUserMedia(params) {
-            if (this.userMediaLoaded) {
-                this.options.logger.debug("Recorder: skipping loadUserMedia() because it is already loaded");
-                this.onUserMediaReady(params);
-                return;
-            } else if (this.userMediaLoading) return void this.options.logger.debug("Recorder: skipping loadUserMedia() because it is already asking for permission");
-            this.options.logger.debug(`Recorder: loadUserMedia(${params ? string_pretty(params) : ""})`);
-            this.emit("LOADING_USER_MEDIA");
-            try {
-                if (!navigator.mediaDevices) throw new Error("No media devices are available.");
-                this.userMediaTimeout = window.setTimeout(()=>{
-                    if (!this.userMediaLoaded) {
-                        this.userMediaLoading = false;
-                        const err = util_getBrowser(this.options).getNoAccessIssue();
-                        this.userMediaErrorCallback(err, {
-                            audio: isAudioEnabled(this.options)
-                        });
-                    }
-                }, this.options.timeouts.userMedia);
-                this.userMediaLoading = true;
-                this.loadGenuineUserMedia(params);
-            } catch (exc) {
-                this.clearUserMediaTimeout();
-                this.options.logger.debug("Recorder: failed to load genuine user media");
-                this.userMediaLoading = false;
-                if (this.cameraRecovery) return void this.failCameraRecovery(exc);
-                const errorListeners = this.getListeners("ERROR");
-                if (null == errorListeners ? void 0 : errorListeners.length) this.emit("ERROR", {
-                    exc
-                });
-                else {
-                    this.options.logger.debug("Recorder: no error listeners attached but throwing exception further");
-                    throw exc;
+        loadWorklet(context) {
+            return AudioRecorder_async_to_generator(function*() {
+                const source = `(${registerAudioRecorderProcessor.toString()})(${JSON.stringify(AUDIO_RECORDER_PROCESSOR_NAME)}, AudioWorkletProcessor, registerProcessor);`;
+                const moduleUrl = URL.createObjectURL(new Blob([
+                    source
+                ], {
+                    type: "text/javascript"
+                }));
+                this.moduleUrl = moduleUrl;
+                try {
+                    yield context.audioWorklet.addModule(moduleUrl);
+                } finally{
+                    if (this.moduleUrl === moduleUrl) this.revokeModuleUrl();
                 }
+            }).call(this);
+        }
+        onAudioProcess(event) {
+            const callback = this.audioCallback;
+            if (!callback) return;
+            if (!this.userMedia.isRecording() || this.userMedia.isPaused()) return;
+            const message = event.data;
+            if ("object" != typeof message || null === message) return;
+            if (!("recordingId" in message) || message.recordingId !== this.recordingId) return;
+            if (!("samples" in message) || !(message.samples instanceof Float32Array)) return;
+            if (0 === message.samples.length) return;
+            callback(new esm(message.samples));
+        }
+        disconnect() {
+            var _this_audioInput, _this_volume;
+            if (this.worklet) {
+                this.worklet.port.onmessage = null;
+                this.worklet.onprocessorerror = null;
+                this.worklet.port.postMessage(-1);
+                this.worklet.port.close();
+                this.worklet.disconnect();
+                this.worklet = void 0;
             }
+            null == (_this_audioInput = this.audioInput) || _this_audioInput.disconnect();
+            null == (_this_volume = this.volume) || _this_volume.disconnect();
+            this.audioInput = void 0;
+            this.volume = void 0;
+            this.audioCallback = void 0;
+            this.recordingId = 0;
         }
-        executeCommand(command) {
-            if (this.unloaded) return;
-            try {
-                if (command.args) {
-                    const debugLine = string_summarize(`Server commanded: ${command.command} with:`, command.args);
-                    this.options.logger.debug(debugLine);
-                } else this.options.logger.debug(`Server commanded: ${command.command}`);
-                switch(command.command){
-                    case "ready":
-                        this.emit("SERVER_READY");
-                        if (!this.userMediaTimeout) if (this.options.loadUserMediaOnRecord) this.show();
-                        else this.loadUserMedia();
-                        break;
-                    case "preview":
-                        this.preview(command.args);
-                        break;
-                    case "error":
-                        {
-                            var _command_args_err, _command_args, _command_args1;
-                            let explanation = "(No explanation given)";
-                            if (null == (_command_args = command.args) ? void 0 : null == (_command_args_err = _command_args.err) ? void 0 : _command_args_err.message) explanation = command.args.err.message;
-                            const err = error_createError({
-                                message: "Websocket error from Videomail server",
-                                explanation,
-                                err: deserializeError(null == (_command_args1 = command.args) ? void 0 : _command_args1.err),
-                                options: this.options
-                            });
-                            this.emit("ERROR", {
-                                err
-                            });
-                            break;
+        init(localMediaStream) {
+            return AudioRecorder_async_to_generator(function*() {
+                var _this_workletReady;
+                this.options.logger.debug("AudioRecorder: init()");
+                const initializationId = ++this.initializationId;
+                this.disconnect();
+                const bufferSize = this.getBufferSize();
+                this.validateVolume();
+                if ("function" != typeof window.AudioContext) throw error_createError({
+                    message: "Audio recording requires Web Audio support.",
+                    options: this.options
+                });
+                const context = this.getAudioContext();
+                if (void 0 === context.audioWorklet || "function" != typeof window.AudioWorkletNode) throw error_createError({
+                    message: "Audio recording requires AudioWorklet support in a secure context.",
+                    options: this.options
+                });
+                const workletReady = null != (_this_workletReady = this.workletReady) ? _this_workletReady : this.workletReady = this.loadWorklet(context);
+                try {
+                    yield workletReady;
+                } catch (exc) {
+                    if (this.workletReady === workletReady) this.workletReady = void 0;
+                    if (initializationId !== this.initializationId) return;
+                    throw error_createError({
+                        message: "Unable to load the audio recorder worklet. Check AudioWorklet and Content Security Policy support for blob: scripts.",
+                        cause: exc,
+                        options: this.options
+                    });
+                }
+                if (initializationId !== this.initializationId) return;
+                try {
+                    this.audioInput = context.createMediaStreamSource(localMediaStream);
+                } catch (exc) {
+                    throw error_createError({
+                        message: "Webcam has no audio",
+                        exc,
+                        options: this.options
+                    });
+                }
+                try {
+                    this.volume = context.createGain();
+                    this.volume.gain.value = this.options.audio.volume;
+                    this.worklet = new window.AudioWorkletNode(context, AUDIO_RECORDER_PROCESSOR_NAME, {
+                        channelCount: CHANNELS,
+                        channelCountMode: "explicit",
+                        outputChannelCount: [
+                            CHANNELS
+                        ],
+                        processorOptions: {
+                            bufferSize
                         }
-                    case "confirmFrame":
-                        this.updateFrameProgress(command.args);
-                        break;
-                    case "confirmSample":
-                        this.updateSampleProgress(command.args);
-                        break;
-                    case "beginAudioEncoding":
-                        this.emit("BEGIN_AUDIO_ENCODING");
-                        break;
-                    case "beginVideoEncoding":
-                        this.emit("BEGIN_VIDEO_ENCODING");
-                        break;
-                    default:
-                        {
-                            const err = error_createError({
-                                message: `Unknown server command: ${command.command}`,
+                    });
+                    this.worklet.port.onmessage = (event)=>{
+                        this.onAudioProcess(event);
+                    };
+                    this.worklet.onprocessorerror = ()=>{
+                        this.stop();
+                        this.emit("ERROR", {
+                            err: error_createError({
+                                message: "Audio recording processor failed.",
                                 options: this.options
-                            });
-                            this.emit("ERROR", {
-                                err
-                            });
-                            break;
-                        }
+                            })
+                        });
+                    };
+                    this.audioInput.connect(this.volume);
+                    this.volume.connect(this.worklet);
+                    this.worklet.connect(context.destination);
+                } catch (exc) {
+                    this.disconnect();
+                    throw error_createError({
+                        message: "Failed to connect the audio recorder.",
+                        exc,
+                        options: this.options
+                    });
                 }
-            } catch (exc) {
-                this.emit("ERROR", {
-                    exc
-                });
-            }
+            }).call(this);
         }
-        isNotifying() {
-            return this.visuals.isNotifying();
+        record(cb) {
+            this.options.logger.debug("AudioRecorder: record()");
+            this.audioCallback = cb;
+            this.updateRecordingState();
         }
-        isHidden() {
-            return !this.recorderElement || html_isHidden(this.recorderElement);
+        updateRecordingState() {
+            if (!this.worklet) return;
+            const shouldRecord = Boolean(this.audioCallback) && this.userMedia.isRecording() && !this.userMedia.isPaused();
+            this.recordingId = shouldRecord ? ++this.recordingSequence : 0;
+            this.worklet.port.postMessage(this.recordingId);
         }
-        writeCommand(command, args, cb) {
-            if (this.connected) {
-                if (this.stream) {
-                    if (args) this.options.logger.debug(`$ ${command} with ${string_pretty(args)}`);
-                    else this.options.logger.debug(`$ ${command}`);
-                    const commandObj = {
-                        command,
-                        args
-                    };
-                    this.writeStream(Buffer.from(JSON.stringify(commandObj)), cb ? {
-                        onFlushedCallback: ()=>{
-                            queueMicrotask(cb);
-                        }
-                    } : void 0);
+        resume() {
+            return AudioRecorder_async_to_generator(function*() {
+                const context = this.vcAudioContext;
+                if (!context) return;
+                if ("running" !== context.state) yield context.resume();
+            }).call(this);
+        }
+        stop() {
+            this.options.logger.debug("AudioRecorder: stop()");
+            this.initializationId++;
+            this.disconnect();
+            this.revokeModuleUrl();
+            const context = this.vcAudioContext;
+            this.vcAudioContext = void 0;
+            this.workletReady = void 0;
+            if (context && "closed" !== context.state) context.close().then(()=>{
+                this.options.logger.debug("AudioRecorder: audio context is closed");
+            }).catch((err)=>{
+                if (err instanceof Error) return void this.options.logger.error(error_createError({
+                    err,
+                    options: this.options
+                }));
+                this.options.logger.error(err);
+            });
+        }
+        getSampleRate() {
+            if ("function" == typeof window.AudioContext) return this.getAudioContext().sampleRate;
+            return -1;
+        }
+        constructor(userMedia, options){
+            super("AudioRecorder", options), AudioRecorder_define_property(this, "userMedia", void 0), AudioRecorder_define_property(this, "worklet", void 0), AudioRecorder_define_property(this, "audioInput", void 0), AudioRecorder_define_property(this, "volume", void 0), AudioRecorder_define_property(this, "vcAudioContext", void 0), AudioRecorder_define_property(this, "workletReady", void 0), AudioRecorder_define_property(this, "moduleUrl", void 0), AudioRecorder_define_property(this, "audioCallback", void 0), AudioRecorder_define_property(this, "initializationId", 0), AudioRecorder_define_property(this, "recordingSequence", 0), AudioRecorder_define_property(this, "recordingId", 0);
+            this.userMedia = userMedia;
+        }
+    }
+    const media_AudioRecorder = AudioRecorder;
+    const VIRTUAL_KEYWORDS = [
+        "obs",
+        "virtual",
+        "manycam",
+        "vcam",
+        "splitcam",
+        "droidcam"
+    ];
+    function isVirtualCamera(videoTrack) {
+        const capabilities = videoTrack.getCapabilities();
+        if (!capabilities.frameRate) return true;
+        const isVirtual = VIRTUAL_KEYWORDS.some((keyword)=>videoTrack.label.toLowerCase().includes(keyword));
+        return isVirtual;
+    }
+    const util_isVirtualCamera = isVirtualCamera;
+    function userMedia_asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+        try {
+            var info = gen[key](arg);
+            var value = info.value;
+        } catch (error) {
+            reject(error);
+            return;
+        }
+        if (info.done) resolve(value);
+        else Promise.resolve(value).then(_next, _throw);
+    }
+    function userMedia_async_to_generator(fn) {
+        return function() {
+            var self1 = this, args = arguments;
+            return new Promise(function(resolve, reject) {
+                var gen = fn.apply(self1, args);
+                function _next(value) {
+                    userMedia_asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
                 }
-            } else {
-                this.options.logger.debug(`Reconnecting for the command ${command} …`);
-                this.initSocket(()=>{
-                    this.writeCommand(command, args, cb);
+                function _throw(err) {
+                    userMedia_asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+                }
+                _next(void 0);
+            });
+        };
+    }
+    function userMedia_define_property(obj, key, value) {
+        if (key in obj) Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+        else obj[key] = value;
+        return obj;
+    }
+    const EVENT_ASCII = "|—O—|";
+    class UserMedia extends util_Despot {
+        attachMediaStream(stream) {
+            if (this.rawVisualUserMedia) {
+                this.rawVisualUserMedia.srcObject = stream;
+                const previousStream = this.currentVisualStream;
+                this.currentVisualStream = stream;
+                if (previousStream && previousStream !== stream) previousStream.getTracks().forEach((track)=>{
+                    track.stop();
                 });
-            }
+            } else throw error_createError({
+                message: "Error attaching stream to element.",
+                explanation: "Contact the developer about this",
+                options: this.options
+            });
         }
-        cancelAnimationFrame() {
-            var _this_loop;
-            null == (_this_loop = this.loop) || _this_loop.dispose();
+        setVisualStream(localMediaStream) {
+            if (localMediaStream) this.attachMediaStream(localMediaStream);
+            else {
+                if (this.rawVisualUserMedia) {
+                    this.rawVisualUserMedia.srcObject = null;
+                    this.rawVisualUserMedia.removeAttribute("src");
+                }
+                this.currentVisualStream = void 0;
+            }
         }
-        getIntervalSum() {
-            if (!this.loop) return;
-            return this.loop.getElapsedTime();
+        restorePlayback() {
+            return userMedia_async_to_generator(function*() {
+                var _this_audioRecorder;
+                if (!this.rawVisualUserMedia) throw new Error("No camera preview is available.");
+                yield this.rawVisualUserMedia.play();
+                yield null == (_this_audioRecorder = this.audioRecorder) ? void 0 : _this_audioRecorder.resume();
+            }).call(this);
         }
-        getAvgInterval() {
-            var _this_getIntervalSum;
-            const intervalSum = null != (_this_getIntervalSum = this.getIntervalSum()) ? _this_getIntervalSum : 0;
-            if (!this.hasValidInterval(intervalSum)) return;
-            return intervalSum / this.framesCount;
+        hasLiveStream() {
+            var _this_currentVisualStream, _this_currentVisualStream1, _this_currentVisualStream2;
+            const videoReady = null == (_this_currentVisualStream = this.currentVisualStream) ? void 0 : _this_currentVisualStream.getVideoTracks().some((track)=>"live" === track.readyState && track.enabled && !track.muted);
+            const audioReady = !isAudioEnabled(this.options) || (null == (_this_currentVisualStream1 = this.currentVisualStream) ? void 0 : _this_currentVisualStream1.getAudioTracks().some((track)=>"live" === track.readyState && track.enabled && !track.muted));
+            return Boolean((null == (_this_currentVisualStream2 = this.currentVisualStream) ? void 0 : _this_currentVisualStream2.active) && videoReady && audioReady);
         }
-        getAvgFps() {
-            var _this_getIntervalSum;
-            const intervalSum = null != (_this_getIntervalSum = this.getIntervalSum()) ? _this_getIntervalSum : 0;
-            if (!this.hasValidInterval(intervalSum)) return;
-            return this.framesCount / intervalSum * 1000;
+        hasEnded() {
+            var _this_rawVisualUserMedia, _this_currentVisualStream;
+            if (null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia.ended) return this.rawVisualUserMedia.ended;
+            return !(null == (_this_currentVisualStream = this.currentVisualStream) ? void 0 : _this_currentVisualStream.active);
         }
-        hasValidInterval(intervalSum) {
-            return intervalSum > 0;
+        hasInvalidDimensions() {
+            if (!this.rawVisualUserMedia) return false;
+            const { videoWidth, videoHeight } = this.rawVisualUserMedia;
+            return videoWidth > 0 && videoWidth < 3 || videoHeight > 0 && videoHeight < 3;
         }
-        getRecordingStats() {
-            return this.recordingStats;
+        logEvent(eventType, params) {
+            this.options.logger.debug(`UserMedia: ... ${EVENT_ASCII} event ${eventType}: ${string_pretty(params)}`);
         }
-        getAudioSampleRate() {
-            var _this_recordingAudioSampleRate;
-            var _this_userMedia;
-            return null != (_this_recordingAudioSampleRate = this.recordingAudioSampleRate) ? _this_recordingAudioSampleRate : null == (_this_userMedia = this.userMedia) ? void 0 : _this_userMedia.getAudioSampleRate();
+        unloadRemainingEventListeners() {
+            var _this_clearInitializationListeners, _this, _this_rawVisualUserMedia;
+            this.options.logger.debug("UserMedia: unloadRemainingEventListeners()");
+            null == (_this_clearInitializationListeners = (_this = this).clearInitializationListeners) || _this_clearInitializationListeners.call(_this);
+            mediaEvents.forEach((eventName)=>{
+                var _this_rawVisualUserMedia;
+                null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) || _this_rawVisualUserMedia.removeEventListener(eventName, this.outputEvent);
+            });
+            null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) || _this_rawVisualUserMedia.removeEventListener("error", this.handleMediaError);
         }
-        stop(params) {
-            var _this_loop;
-            this.cancelCameraRecovery();
-            if (!this.userMedia) throw new Error("No user media defined, unable to stop");
-            this.options.logger.debug(`Recorder: stop(${params ? string_pretty(params) : ""})`);
-            this.recordingActive = false;
-            const limitReached = null == params ? void 0 : params.limitReached;
-            this.emit("STOPPING", {
-                limitReached
+        audioRecord(audioCallback) {
+            var _this_audioRecorder;
+            this.removeListener("SENDING_FIRST_FRAME");
+            null == (_this_audioRecorder = this.audioRecorder) || _this_audioRecorder.record(audioCallback);
+        }
+        init(localMediaStream, videoCallback, audioCallback, endedEarlyCallback, params) {
+            var _this_clearInitializationListeners, _this;
+            null == (_this_clearInitializationListeners = (_this = this).clearInitializationListeners) || _this_clearInitializationListeners.call(_this);
+            this.stop(localMediaStream, {
+                aboutToInitialize: true,
+                preserveRecordingState: Boolean((null == params ? void 0 : params.switchingFacingMode) || (null == params ? void 0 : params.recovering))
             });
-            null == (_this_loop = this.loop) || _this_loop.complete();
-            this.stopTimeout = window.setTimeout(()=>{
-                this.stopTimeout = void 0;
-                this.stopTime = Date.now();
-                const videoType = this.replay.getVideoType();
-                if (!videoType) throw new Error("Unable to video record when no video type is defined.");
-                this.recordingStats = {
-                    avgFps: this.getAvgFps(),
-                    wantedFps: this.options.video.fps,
-                    avgInterval: this.getAvgInterval(),
-                    wantedInterval: 1e3 / this.options.video.fps,
-                    intervalSum: this.getIntervalSum(),
-                    framesCount: this.framesCount,
-                    videoType
-                };
-                if (this.userMedia) this.recordingStats.videoTrackLabel = this.userMedia.getVideoTrackLabel();
-                if (isAudioEnabled(this.options) && this.userMedia) {
-                    var _this_recordingAudioSampleRate;
-                    this.recordingStats.samplesCount = this.samplesCount;
-                    this.recordingStats.sampleRate = null != (_this_recordingAudioSampleRate = this.recordingAudioSampleRate) ? _this_recordingAudioSampleRate : this.userMedia.getAudioSampleRate();
+            const initializationId = ++this.initializationId;
+            this.onPlayReached = false;
+            this.onLoadedMetaDataReached = false;
+            this.playingPromiseReached = false;
+            this.videoTrackLabel = void 0;
+            if (isAudioEnabled(this.options)) null != this.audioRecorder || (this.audioRecorder = new media_AudioRecorder(this, this.options));
+            const unloadAllEventListeners = ()=>{
+                var _this_rawVisualUserMedia, _this_rawVisualUserMedia1;
+                this.options.logger.debug("UserMedia: unloadAllEventListeners()");
+                this.unloadRemainingEventListeners();
+                this.removeListener("SENDING_FIRST_FRAME");
+                null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) || _this_rawVisualUserMedia.removeEventListener("play", onPlay);
+                null == (_this_rawVisualUserMedia1 = this.rawVisualUserMedia) || _this_rawVisualUserMedia1.removeEventListener("loadedmetadata", onLoadedMetaData);
+            };
+            this.clearInitializationListeners = ()=>{
+                var _this_rawVisualUserMedia, _this_rawVisualUserMedia1;
+                null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) || _this_rawVisualUserMedia.removeEventListener("play", onPlay);
+                null == (_this_rawVisualUserMedia1 = this.rawVisualUserMedia) || _this_rawVisualUserMedia1.removeEventListener("loadedmetadata", onLoadedMetaData);
+                this.clearInitializationListeners = void 0;
+            };
+            const play = ()=>{
+                try {
+                    var _this_rawVisualUserMedia, _this_rawVisualUserMedia1;
+                    null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) || _this_rawVisualUserMedia.load();
+                    if (null == (_this_rawVisualUserMedia1 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia1.paused) {
+                        this.options.logger.debug(`UserMedia: play(): media.readyState=${this.rawVisualUserMedia.readyState}, media.paused=${this.rawVisualUserMedia.paused}, media.ended=${this.rawVisualUserMedia.ended}, media.played=${string_pretty(this.rawVisualUserMedia.played)}`);
+                        this.rawVisualUserMedia.play().then(()=>{
+                            if (initializationId !== this.initializationId) return;
+                            if (!this.playingPromiseReached) {
+                                this.options.logger.debug("UserMedia: play promise successful. Playing now.");
+                                this.playingPromiseReached = true;
+                            }
+                        }).catch((exc)=>{
+                            if (initializationId !== this.initializationId) return;
+                            if (exc instanceof Error && !(null == params ? void 0 : params.recovering)) this.options.logger.warn(`Caught pending user media promise exception: ${exc.toString()}`);
+                            else {
+                                unloadAllEventListeners();
+                                endedEarlyCallback(error_createError({
+                                    message: "Failed to play user media upon play event.",
+                                    exc,
+                                    options: this.options
+                                }));
+                            }
+                        });
+                    }
+                } catch (exc) {
+                    unloadAllEventListeners();
+                    endedEarlyCallback(exc);
                 }
-                this.writeCommand("stop", this.recordingStats, ()=>{
-                    this.emit("STOPPED", {
-                        recordingStats: this.recordingStats
+            };
+            const fireCallbacks = ()=>{
+                var _this_rawVisualUserMedia;
+                const readyState = null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia.readyState;
+                this.options.logger.debug(`UserMedia: fireCallbacks(readyState=${readyState}, onPlayReached=${this.onPlayReached}, onLoadedMetaDataReached=${this.onLoadedMetaDataReached})`);
+                if (this.onPlayReached && this.onLoadedMetaDataReached) if (this.audioRecorder) {
+                    const initializeAudio = (audioRecorder)=>userMedia_async_to_generator(function*() {
+                            try {
+                                yield audioRecorder.init(localMediaStream);
+                                if (initializationId !== this.initializationId || this.currentVisualStream !== localMediaStream) return;
+                                const onAudioReady = ()=>{
+                                    var _this_clearInitializationListeners, _this;
+                                    if (initializationId !== this.initializationId || this.currentVisualStream !== localMediaStream) return;
+                                    if (this.recording) this.audioRecord(audioCallback);
+                                    else this.on("SENDING_FIRST_FRAME", ()=>{
+                                        this.audioRecord(audioCallback);
+                                    });
+                                    null == (_this_clearInitializationListeners = (_this = this).clearInitializationListeners) || _this_clearInitializationListeners.call(_this);
+                                    videoCallback();
+                                };
+                                if (null == params ? void 0 : params.recovering) yield audioRecorder.resume();
+                                onAudioReady();
+                            } catch (exc) {
+                                if (initializationId !== this.initializationId) return;
+                                unloadAllEventListeners();
+                                this.stop(void 0, {
+                                    preserveRecordingState: Boolean(null == params ? void 0 : params.recovering)
+                                });
+                                endedEarlyCallback(exc);
+                            }
+                        }).call(this);
+                    initializeAudio(this.audioRecorder);
+                } else {
+                    var _this_clearInitializationListeners, _this;
+                    null == (_this_clearInitializationListeners = (_this = this).clearInitializationListeners) || _this_clearInitializationListeners.call(_this);
+                    videoCallback();
+                }
+            };
+            const onPlay = ()=>{
+                try {
+                    var _this_rawVisualUserMedia, _this_rawVisualUserMedia1, _this_rawVisualUserMedia2, _this_rawVisualUserMedia3, _this_rawVisualUserMedia4, _this_rawVisualUserMedia5;
+                    this.logEvent("play", {
+                        readyState: null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia.readyState,
+                        audio: isAudioEnabled(this.options),
+                        width: null == (_this_rawVisualUserMedia1 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia1.width,
+                        height: null == (_this_rawVisualUserMedia2 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia2.height,
+                        videoWidth: null == (_this_rawVisualUserMedia3 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia3.videoWidth,
+                        videoHeight: null == (_this_rawVisualUserMedia4 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia4.videoHeight
                     });
+                    null == (_this_rawVisualUserMedia5 = this.rawVisualUserMedia) || _this_rawVisualUserMedia5.removeEventListener("play", onPlay);
+                    if (this.hasEnded() || this.hasInvalidDimensions()) endedEarlyCallback(error_createError({
+                        message: "Already busy",
+                        explanation: "Probably another browser window is using your webcam?",
+                        options: this.options
+                    }));
+                    else {
+                        this.onPlayReached = true;
+                        fireCallbacks();
+                    }
+                } catch (exc) {
+                    unloadAllEventListeners();
+                    endedEarlyCallback(exc);
+                }
+            };
+            const onLoadedMetaData = ()=>{
+                var _this_rawVisualUserMedia, _this_rawVisualUserMedia1, _this_rawVisualUserMedia2, _this_rawVisualUserMedia3, _this_rawVisualUserMedia4, _this_rawVisualUserMedia5, _this_rawVisualUserMedia6;
+                this.logEvent("loadedmetadata", {
+                    readyState: null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia.readyState,
+                    paused: null == (_this_rawVisualUserMedia1 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia1.paused,
+                    width: null == (_this_rawVisualUserMedia2 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia2.width,
+                    height: null == (_this_rawVisualUserMedia3 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia3.height,
+                    videoWidth: null == (_this_rawVisualUserMedia4 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia4.videoWidth,
+                    videoHeight: null == (_this_rawVisualUserMedia5 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia5.videoHeight
                 });
-                this.reset();
-            }, 60);
-        }
-        back(cb) {
-            this.emit("GOING_BACK");
-            this.key = void 0;
-            this.recordingDimensions = void 0;
-            this.unloaded = false;
-            this.show();
-            this.writeCommand("back", void 0, cb);
+                null == (_this_rawVisualUserMedia6 = this.rawVisualUserMedia) || _this_rawVisualUserMedia6.removeEventListener("loadedmetadata", onLoadedMetaData);
+                if (!this.hasEnded() && !this.hasInvalidDimensions()) {
+                    this.emit("LOADED_META_DATA");
+                    this.onLoadedMetaDataReached = true;
+                    fireCallbacks();
+                }
+            };
+            try {
+                var _this_rawVisualUserMedia, _this_rawVisualUserMedia1, _this_rawVisualUserMedia2, _this_rawVisualUserMedia3;
+                const videoTrack = media_getFirstVideoTrack(localMediaStream);
+                this.videoTrackLabel = null == videoTrack ? void 0 : videoTrack.label;
+                if (videoTrack) if (videoTrack.enabled) if (util_isVirtualCamera(videoTrack)) throw error_createError({
+                    message: "Virtual cameras are not allowed.",
+                    explanation: `Please use a real camera, not "${videoTrack.label}".`,
+                    options: this.options
+                });
+                else {
+                    let description = "";
+                    if (videoTrack.label.length > 0) description = description.concat(videoTrack.label);
+                    description = description.concat(` with enabled=${videoTrack.enabled}, muted=${videoTrack.muted}, readyState=${videoTrack.readyState}`);
+                    this.options.logger.debug(`UserMedia: ${videoTrack.kind} detected. ${description}`);
+                }
+                else throw error_createError({
+                    message: "Webcam is disabled",
+                    explanation: "The video track seems to be disabled. Enable it in your system.",
+                    options: this.options
+                });
+                else this.options.logger.debug("UserMedia: detected (but no video tracks exist");
+                null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) || _this_rawVisualUserMedia.addEventListener("loadedmetadata", onLoadedMetaData);
+                null == (_this_rawVisualUserMedia1 = this.rawVisualUserMedia) || _this_rawVisualUserMedia1.addEventListener("play", onPlay);
+                null == (_this_rawVisualUserMedia2 = this.rawVisualUserMedia) || _this_rawVisualUserMedia2.removeEventListener("error", this.handleMediaError);
+                null == (_this_rawVisualUserMedia3 = this.rawVisualUserMedia) || _this_rawVisualUserMedia3.addEventListener("error", this.handleMediaError);
+                this.setVisualStream(localMediaStream);
+                play();
+            } catch (exc) {
+                unloadAllEventListeners();
+                endedEarlyCallback(exc);
+            }
         }
-        reInitializeAudio() {
-            var _this_userMedia;
-            this.options.logger.debug("Recorder: reInitializeAudio()");
-            this.clearUserMediaTimeout();
-            this.userMediaLoading = false;
-            null == (_this_userMedia = this.userMedia) || _this_userMedia.stop();
-            this.recordingDimensions = void 0;
-            this.userMediaLoaded = this.key = this.canvas = this.ctx = void 0;
-            this.loadUserMedia();
+        getVideoTrackLabel() {
+            return this.videoTrackLabel;
         }
-        unload(params) {
-            if (this.unloaded || !this.built) return;
-            const e = null == params ? void 0 : params.e;
-            let cause;
-            if (e) cause = e.type;
-            const prettyCause = cause ? `, cause: ${cause}` : "";
-            this.options.logger.debug(`Recorder: unload()${prettyCause}`);
-            this.recordingActive = false;
-            this.mediaTransmissionStarted = false;
-            this.reset();
-            this.recordingDimensions = void 0;
-            this.clearUserMediaTimeout();
-            this.clearConnectionTimeout();
-            this.clearReconnectTimeout();
-            this.clearRetryTimeout();
-            this.clearStopTimeout();
-            this.stopPings();
-            this.userMediaLoading = false;
-            this.connecting = false;
-            this.reconnecting = false;
-            this.reconnectAttempts = 0;
-            if (this.userMedia) this.userMedia.unloadRemainingEventListeners();
-            if (this.submitting) ;
-            else if (this.stream) this.discardSocket();
-            this.unloaded = true;
-            this.built = this.connecting = this.connected = false;
+        isReady() {
+            var _this_rawVisualUserMedia, _this_rawVisualUserMedia1;
+            return Boolean((null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia.srcObject) || (null == (_this_rawVisualUserMedia1 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia1.currentSrc));
         }
-        reset() {
-            this.cancelCameraRecovery();
-            if (!this.unloaded) {
-                var _this_userMedia;
-                this.options.logger.debug("Recorder: reset()");
-                this.emit("RESETTING");
-                this.cancelAnimationFrame();
-                null == (_this_userMedia = this.userMedia) || _this_userMedia.stop();
-                this.replay.reset();
-                this.userMediaLoaded = this.key = this.canvas = this.ctx = this.recordingBuffer = void 0;
+        stop(visualStream, params) {
+            try {
+                let chosenStream = visualStream;
+                if (!(null == params ? void 0 : params.aboutToInitialize)) {
+                    var _this_clearInitializationListeners, _this, _this_audioRecorder;
+                    this.initializationId++;
+                    null == (_this_clearInitializationListeners = (_this = this).clearInitializationListeners) || _this_clearInitializationListeners.call(_this);
+                    null != chosenStream || (chosenStream = this.currentVisualStream);
+                    const tracks = null == chosenStream ? void 0 : chosenStream.getTracks();
+                    if (tracks) tracks.forEach((track)=>{
+                        track.stop();
+                    });
+                    this.setVisualStream();
+                    null == (_this_audioRecorder = this.audioRecorder) || _this_audioRecorder.stop();
+                    this.audioRecorder = void 0;
+                }
+                if (!(null == params ? void 0 : params.preserveRecordingState)) this.paused = this.recording = false;
+            } catch (exc) {
+                this.emit("ERROR", {
+                    exc
+                });
             }
         }
-        clearUserMediaTimeout() {
-            if (void 0 !== this.userMediaTimeout) {
-                this.options.logger.debug("Recorder: clearUserMediaTimeout()");
-                window.clearTimeout(this.userMediaTimeout);
-                this.userMediaTimeout = void 0;
-            }
+        createCanvas() {
+            const canvas = document.createElement("canvas");
+            const rawWidthDimension = this.getRawWidth(true);
+            if (rawWidthDimension.value) canvas.width = rawWidthDimension.value;
+            const rawHeight = this.getRawHeight(true);
+            if (rawHeight) canvas.height = rawHeight;
+            return canvas;
         }
-        clearStopTimeout() {
-            if (void 0 === this.stopTimeout) return;
-            window.clearTimeout(this.stopTimeout);
-            this.stopTimeout = void 0;
+        getVideoHeight() {
+            if (!this.rawVisualUserMedia) return;
+            return this.rawVisualUserMedia.videoHeight || this.rawVisualUserMedia.height;
         }
-        validate() {
-            return Boolean(this.key) && void 0 === this.canvas;
+        getVideoWidth() {
+            if (!this.rawVisualUserMedia) return;
+            return this.rawVisualUserMedia.videoWidth || this.rawVisualUserMedia.width;
         }
-        isReady() {
-            var _this_userMedia;
-            return null == (_this_userMedia = this.userMedia) ? void 0 : _this_userMedia.isReady();
+        hasVideoWidth() {
+            const videoWidth = this.getVideoWidth();
+            return videoWidth && videoWidth > 0;
         }
-        finishCameraRecovery(restored) {
-            this.clearUserMediaTimeout();
-            const resolve = this.resolveCameraRecovery;
-            const resumeRequested = restored && this.resumeAfterCameraRecovery;
-            this.cameraRecovery = void 0;
-            this.resolveCameraRecovery = void 0;
-            this.resumeAfterCameraRecovery = false;
-            null == resolve || resolve(restored);
-            if (resumeRequested && this.isPaused()) this.resume();
+        getRawWidth(responsive) {
+            let rawWidth;
+            const widthDimension = {
+                unit: "px"
+            };
+            rawWidth = responsive ? this.getVideoWidth() : this.options.video.width ? this.options.video.width : this.getVideoWidth();
+            if (responsive) {
+                const widthDimension = this.recorder.limitWidth(rawWidth);
+                rawWidth = null == widthDimension ? void 0 : widthDimension.value;
+            }
+            widthDimension.value = rawWidth;
+            return widthDimension;
         }
-        cancelCameraRecovery() {
-            var _this_userMedia;
-            if (!this.cameraRecovery) return;
-            this.mediaRequestId++;
-            this.userMediaLoading = false;
-            this.userMediaLoaded = false;
-            this.clearUserMediaTimeout();
-            null == (_this_userMedia = this.userMedia) || _this_userMedia.stop(void 0, {
-                preserveRecordingState: true
-            });
-            this.finishCameraRecovery(false);
+        getRawHeight(responsive) {
+            let rawHeight;
+            if (responsive) {
+                rawHeight = this.options.video.height || this.getVideoHeight();
+                const ratio = this.recorder.getRatio();
+                const rawWidth = this.getRawWidth(responsive);
+                if (void 0 !== ratio && rawWidth.value) rawHeight = rawWidth.value * ratio;
+            } else rawHeight = this.options.video.height ? this.options.video.height : this.getVideoHeight();
+            if (responsive) {
+                const heightDimension = this.recorder.limitHeight(rawHeight);
+                rawHeight = heightDimension.value;
+            }
+            return rawHeight;
         }
-        failCameraRecovery(exc) {
-            this.cancelCameraRecovery();
-            const err = error_createError({
-                message: "Camera recovery failed",
-                explanation: "Your recording is still paused. Check camera permissions, then try Resume again or stop to keep the recorded part.",
-                exc,
-                options: this.options
-            });
-            this.emit("CAMERA_RECOVERY_FAILED", {
-                err
-            });
+        getRawVisuals() {
+            return this.rawVisualUserMedia;
         }
-        recoverCamera() {
-            if (this.cameraRecovery) return this.cameraRecovery;
-            if (!this.built || this.unloaded || !this.userMedia || this.userMediaLoading || this.submitting || this.key || void 0 !== this.stopTimeout || this.recordingTransportFailed) return Promise.resolve(false);
-            const liveStream = this.userMedia.hasLiveStream();
-            if (liveStream && this.isRecording()) return Promise.resolve(true);
-            if (!liveStream && this.recordingActive && !this.isPaused()) this.pause();
-            const recovery = new Promise((resolve)=>{
-                this.resolveCameraRecovery = resolve;
-            });
-            this.cameraRecovery = recovery;
-            this.emit("CAMERA_RECOVERING");
-            if (liveStream) {
-                this.userMediaTimeout = window.setTimeout(()=>{
-                    this.failCameraRecovery(new Error("Camera playback recovery timed out."));
-                }, this.options.timeouts.userMedia);
-                this.userMedia.restorePlayback().then(()=>{
-                    if (this.cameraRecovery === recovery) this.finishCameraRecovery(true);
-                }).catch((exc)=>{
-                    if (this.cameraRecovery === recovery) this.failCameraRecovery(exc);
-                });
-            } else {
-                this.userMediaLoaded = false;
-                this.loadUserMedia({
-                    recovering: true
-                });
-            }
-            return recovery;
+        pause() {
+            var _this_audioRecorder;
+            this.paused = true;
+            null == (_this_audioRecorder = this.audioRecorder) || _this_audioRecorder.updateRecordingState();
         }
-        pause(params) {
-            var _this_userMedia;
-            this.cancelCameraRecovery();
-            this.resumeAfterDrain = false;
-            if (params) this.options.logger.debug(`pause() at frame ${this.framesCount} with ${string_pretty(params)}`);
-            else this.options.logger.debug(`pause() at frame ${this.framesCount}`);
-            null == (_this_userMedia = this.userMedia) || _this_userMedia.pause();
-            this.loop.stop();
-            this.emit("PAUSED");
-            this.sendPings();
+        isPaused() {
+            return this.paused;
         }
         resume() {
-            var _this_userMedia;
-            if (this.cameraRecovery || !(null == (_this_userMedia = this.userMedia) ? void 0 : _this_userMedia.hasLiveStream())) {
-                this.recoverCamera();
-                this.resumeAfterCameraRecovery = Boolean(this.cameraRecovery);
-                return;
-            }
-            this.options.logger.debug(`Recorder: resume() with frame ${this.framesCount}`);
-            this.stopPings();
-            this.emit("RESUMING");
-            this.userMedia.resume();
-            if (this.streamBackpressured) this.resumeAfterDrain = true;
-            else this.loop.start();
+            var _this_audioRecorder;
+            this.paused = false;
+            null == (_this_audioRecorder = this.audioRecorder) || _this_audioRecorder.updateRecordingState();
         }
-        onFlushed(opts) {
-            const frameNumber = opts.frameNumber;
-            if (1 === frameNumber) this.emit("FIRST_FRAME_SENT");
+        record() {
+            var _this_audioRecorder;
+            this.recording = true;
+            null == (_this_audioRecorder = this.audioRecorder) || _this_audioRecorder.updateRecordingState();
         }
-        draw(_deltaTime, elapsedTime) {
-            if (this.recordingTransportFailed) return;
-            if (!this.userMedia) throw new Error("No user media defined, unable to draw on canvas");
+        isRecording() {
+            return this.recording;
+        }
+        getAudioSampleRate() {
+            if (this.audioRecorder) return this.audioRecorder.getSampleRate();
+            return -1;
+        }
+        getCharacteristics() {
+            var _this_rawVisualUserMedia, _this_rawVisualUserMedia1, _this_rawVisualUserMedia2, _this_rawVisualUserMedia3, _this_rawVisualUserMedia4;
+            return {
+                audioSampleRate: this.getAudioSampleRate(),
+                muted: null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia.muted,
+                width: null == (_this_rawVisualUserMedia1 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia1.width,
+                height: null == (_this_rawVisualUserMedia2 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia2.height,
+                videoWidth: null == (_this_rawVisualUserMedia3 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia3.videoWidth,
+                videoHeight: null == (_this_rawVisualUserMedia4 = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia4.videoHeight
+            };
+        }
+        constructor(recorder, options){
+            super("UserMedia", options), userMedia_define_property(this, "recorder", void 0), userMedia_define_property(this, "rawVisualUserMedia", void 0), userMedia_define_property(this, "paused", false), userMedia_define_property(this, "recording", false), userMedia_define_property(this, "audioRecorder", void 0), userMedia_define_property(this, "currentVisualStream", void 0), userMedia_define_property(this, "onPlayReached", false), userMedia_define_property(this, "onLoadedMetaDataReached", false), userMedia_define_property(this, "playingPromiseReached", false), userMedia_define_property(this, "videoTrackLabel", void 0), userMedia_define_property(this, "clearInitializationListeners", void 0), userMedia_define_property(this, "initializationId", 0), userMedia_define_property(this, "outputEvent", (e)=>{
+                var _this_rawVisualUserMedia, _this_rawVisualUserMedia1;
+                this.logEvent(e.type, {
+                    readyState: null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) ? void 0 : _this_rawVisualUserMedia.readyState
+                });
+                null == (_this_rawVisualUserMedia1 = this.rawVisualUserMedia) || _this_rawVisualUserMedia1.removeEventListener(e.type, this.outputEvent);
+            }), userMedia_define_property(this, "handleMediaError", (event)=>{
+                this.options.logger.warn(`Caught video element error event: ${string_pretty(event)}`);
+            });
+            this.recorder = recorder;
+            this.rawVisualUserMedia = recorder.getRawVisualUserMedia();
+            mediaEvents.forEach((eventName)=>{
+                var _this_rawVisualUserMedia;
+                null == (_this_rawVisualUserMedia = this.rawVisualUserMedia) || _this_rawVisualUserMedia.addEventListener(eventName, this.outputEvent, false);
+            });
+        }
+    }
+    const visuals_userMedia = UserMedia;
+    function recorder_define_property(obj, key, value) {
+        if (key in obj) Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+        else obj[key] = value;
+        return obj;
+    }
+    class Recorder extends capture {
+        executeCommand(command) {
+            if (this.unloaded) return;
             try {
-                if (!this.isPaused() && this.stream && this.ctx) {
-                    var _this_frame, _this_recordingBuffer;
-                    if (0 === this.framesCount) this.emit("SENDING_FIRST_FRAME");
-                    this.framesCount++;
-                    const imageSource = this.userMedia.getRawVisuals();
-                    if (this.canvas && imageSource) this.ctx.drawImage(imageSource, 0, 0, this.canvas.width, this.canvas.height);
-                    else throw new Error("Unable to draw an image without a defined canvas");
-                    this.recordingBuffer = null == (_this_frame = this.frame) ? void 0 : _this_frame.toBuffer();
-                    const recordingBufferLength = null == (_this_recordingBuffer = this.recordingBuffer) ? void 0 : _this_recordingBuffer.length;
-                    if (recordingBufferLength) {
-                        if (this.recordingBuffer) {
-                            const frameControlBuffer = Buffer.from(JSON.stringify({
-                                frameNumber: this.framesCount
-                            }));
-                            const frameBuffer = Buffer.concat([
-                                this.recordingBuffer,
-                                frameControlBuffer
-                            ]);
-                            this.mediaTransmissionStarted = true;
-                            this.writeStream(frameBuffer, {
-                                frameNumber: this.framesCount,
-                                onFlushedCallback: this.onFlushed.bind(this)
+                if (command.args) {
+                    const debugLine = string_summarize(`Server commanded: ${command.command} with:`, command.args);
+                    this.options.logger.debug(debugLine);
+                } else this.options.logger.debug(`Server commanded: ${command.command}`);
+                switch(command.command){
+                    case "ready":
+                        this.emit("SERVER_READY");
+                        if (!this.userMediaTimeout) if (this.options.loadUserMediaOnRecord) this.show();
+                        else this.loadUserMedia();
+                        break;
+                    case "preview":
+                        this.preview(command.args);
+                        break;
+                    case "error":
+                        {
+                            var _command_args_err, _command_args, _command_args1;
+                            let explanation = "(No explanation given)";
+                            if (null == (_command_args = command.args) ? void 0 : null == (_command_args_err = _command_args.err) ? void 0 : _command_args_err.message) explanation = command.args.err.message;
+                            const err = error_createError({
+                                message: "Websocket error from Videomail server",
+                                explanation,
+                                err: deserializeError(null == (_command_args1 = command.args) ? void 0 : _command_args1.err),
+                                options: this.options
                             });
-                            this.visuals.checkTimer(elapsedTime);
+                            this.emit("ERROR", {
+                                err
+                            });
+                            break;
+                        }
+                    case "confirmFrame":
+                        this.updateFrameProgress(command.args);
+                        break;
+                    case "confirmSample":
+                        this.updateSampleProgress(command.args);
+                        break;
+                    case "beginAudioEncoding":
+                        this.emit("BEGIN_AUDIO_ENCODING");
+                        break;
+                    case "beginVideoEncoding":
+                        this.emit("BEGIN_VIDEO_ENCODING");
+                        break;
+                    default:
+                        {
+                            const err = error_createError({
+                                message: `Unknown server command: ${command.command}`,
+                                options: this.options
+                            });
+                            this.emit("ERROR", {
+                                err
+                            });
+                            break;
                         }
-                    } else throw error_createError({
-                        message: "Failed to extract webcam data.",
-                        options: this.options
-                    });
                 }
             } catch (exc) {
                 this.emit("ERROR", {
@@ -21235,156 +21761,34 @@ var __webpack_exports__ = {};
                 });
             }
         }
-        createLoop() {
-            const newLoop = animitter_default()({
-                fps: this.options.video.fps
-            }, this.draw.bind(this));
-            this.originalAnimationFrameObject = newLoop.getRequestAnimationFrameObject();
-            return newLoop;
-        }
-        record() {
-            if (this.unloaded || this.cameraRecovery) return;
-            if (!this.connected) {
-                this.options.logger.debug("Recorder: reconnecting before recording …");
-                this.initSocket(()=>{
-                    this.once("SERVER_READY", ()=>{
-                        if (this.unloaded) return;
-                        if (this.userMediaLoaded || this.options.loadUserMediaOnRecord) this.record();
-                        else this.once("USER_MEDIA_READY", ()=>{
-                            if (!this.unloaded) this.record();
-                        });
-                    });
-                });
-                return;
-            }
-            if (!this.userMediaLoaded) {
-                if (this.options.loadUserMediaOnRecord) this.loadUserMedia({
-                    recordWhenReady: true
-                });
-                else {
-                    const err = error_createError({
-                        message: "Load and enable your camera first",
-                        options: this.options
-                    });
-                    this.emit("ERROR", {
-                        err
-                    });
-                }
-                return;
-            }
-            this.recordingDimensions = void 0;
-            try {
-                if (!this.userMedia) throw new Error("No user media defined, unable to create canvas");
-                this.canvas = this.userMedia.createCanvas();
-            } catch (exc) {
-                const err = error_createError({
-                    exc,
-                    options: this.options
-                });
-                this.emit("ERROR", {
-                    err
-                });
-                return;
-            }
-            this.ctx = this.canvas.getContext("2d");
-            if (!this.canvas.width) {
-                const err = error_createError({
-                    message: "Canvas has an invalid width.",
-                    options: this.options
-                });
-                this.emit("ERROR", {
-                    err
-                });
-                return;
-            }
-            if (!this.canvas.height) {
-                const err = error_createError({
-                    message: "Canvas has an invalid height.",
-                    options: this.options
-                });
-                this.emit("ERROR", {
-                    err
-                });
-                return;
-            }
-            this.recordingDimensions = {
-                width: this.canvas.width,
-                height: this.canvas.height
-            };
-            this.frame = new canvas_to_buffer_modern_r(this.canvas, this.options.image.types, this.options.image.quality);
-            this.options.logger.debug("Recorder: record()");
-            this.recordingActive = true;
-            this.recordingTransportFailed = false;
+        unload(params) {
+            if (this.unloaded || !this.built) return;
+            const e = null == params ? void 0 : params.e;
+            let cause;
+            if (e) cause = e.type;
+            const prettyCause = cause ? `, cause: ${cause}` : "";
+            this.options.logger.debug(`Recorder: unload()${prettyCause}`);
+            this.recordingActive = false;
             this.mediaTransmissionStarted = false;
-            this.recordingAudioSampleRate = void 0;
-            this.userMedia.record();
-            this.emit("RECORDING", {
-                framesCount: this.framesCount
-            });
-            this.loop.on("update", (_deltaTime, elapsedTime)=>{
-                let avgFPS;
-                avgFPS = 0 !== elapsedTime ? Math.round(this.framesCount / elapsedTime * 1000) : void 0;
-                this.options.logger.debug(`Recorder updates avgFps = ${avgFPS} at frame ${this.framesCount}`);
-            });
-            this.loop.start();
-        }
-        setAnimationFrameObject(newObj) {
-            if (this.loop) {
-                const isRecording = this.isRecording();
-                this.loop.stop();
-                this.loop.setRequestAnimationFrameObject(newObj);
-                if (isRecording) this.loop.start();
-            }
-        }
-        restoreAnimationFrameObject() {
-            this.options.logger.debug("Recorder: restoreAnimationFrameObject()");
-            this.setAnimationFrameObject(this.originalAnimationFrameObject);
-        }
-        loopWithTimeouts() {
-            this.options.logger.debug("Recorder: loopWithTimeouts()");
-            const wantedInterval = 1e3 / this.options.video.fps;
-            let processingTime = 0;
-            let start;
-            const raf = (fn)=>setTimeout(()=>{
-                    start = Date.now();
-                    fn();
-                    processingTime = Date.now() - start;
-                }, wantedInterval - processingTime);
-            const cancel = (id)=>{
-                window.clearTimeout(id);
-            };
-            this.setAnimationFrameObject({
-                requestAnimationFrame: raf,
-                cancelAnimationFrame: cancel
-            });
+            this.reset();
+            this.recordingDimensions = void 0;
+            this.clearUserMediaTimeout();
+            this.clearConnectionTimeout();
+            this.clearReconnectTimeout();
+            this.clearRetryTimeout();
+            this.clearStopTimeout();
+            this.stopPings();
+            this.userMediaLoading = false;
+            this.connecting = false;
+            this.reconnecting = false;
+            this.reconnectAttempts = 0;
+            if (this.userMedia) this.userMedia.unloadRemainingEventListeners();
+            this.unloaded = true;
+            this.discardSocket();
+            this.built = this.connecting = this.connected = false;
         }
         correctDimensions() {
-            if (!this.recorderElement) return;
-            const widthDimension = dimensions_useFullWidth(this.options.video.mobileBreakPoint);
-            if (this.options.video.stretch || widthDimension) {
-                this.recorderElement.style.width = "100%";
-                this.recorderElement.style.removeProperty("height");
-            } else {
-                if (this.options.video.width) {
-                    const recorderWidth = this.getRecorderWidth(true);
-                    if (null == recorderWidth ? void 0 : recorderWidth.value) this.recorderElement.width = recorderWidth.value;
-                    else this.recorderElement.style.removeProperty("width");
-                }
-                if (this.options.video.height) {
-                    const recorderHeight = this.getRecorderHeight(true);
-                    if (null == recorderHeight ? void 0 : recorderHeight.value) this.recorderElement.height = recorderHeight.value;
-                    else this.recorderElement.style.removeProperty("height");
-                }
-            }
-        }
-        switchFacingMode() {
-            if (this.cameraRecovery || !util_getBrowser(this.options).isMobile()) return;
-            if ("user" === this.facingMode) this.facingMode = "environment";
-            else if ("environment" === this.facingMode) this.facingMode = "user";
-            else this.options.logger.warn(`Recorder: unsupported facing mode ${string_pretty(this.facingMode)}`);
-            this.loadGenuineUserMedia({
-                switchingFacingMode: this.facingMode
-            });
+            this.dimensions.correctDimensions();
         }
         initEvents() {
             this.options.logger.debug("Recorder: initEvents()");
@@ -21457,101 +21861,20 @@ var __webpack_exports__ = {};
             }
             this.built = true;
         }
-        isPaused() {
-            var _this_userMedia;
-            return (null == (_this_userMedia = this.userMedia) ? void 0 : _this_userMedia.isPaused()) && !this.loop.isRunning();
-        }
-        isRecording() {
-            var _this_loop;
-            return Boolean((null == (_this_loop = this.loop) ? void 0 : _this_loop.isRunning()) && !this.isPaused() && !this.isNotifying() && this.stream && !this.stream.destroyed);
-        }
-        hide() {
-            if (!this.isHidden()) {
-                if (this.recorderElement) html_hideElement(this.recorderElement);
-                this.clearUserMediaTimeout();
-                this.clearRetryTimeout();
-            }
-        }
-        isUnloaded() {
-            return this.unloaded;
-        }
         getRecorderWidth(responsive) {
-            var _this_userMedia;
-            if (null == (_this_userMedia = this.userMedia) ? void 0 : _this_userMedia.hasVideoWidth()) return this.userMedia.getRawWidth(responsive);
-            else if (responsive && this.options.video.width) return this.limitWidth(this.options.video.width);
-            const dimension = {
-                unit: "px",
-                value: this.options.video.width
-            };
-            return dimension;
-        }
-        getRecordingDimensions() {
-            return this.recordingDimensions && recorder_object_spread({}, this.recordingDimensions);
+            return this.dimensions.getRecorderWidth(responsive);
         }
         getRecorderHeight(responsive, useBoundingClientRect) {
-            let recorderHeight;
-            if (this.recorderElement && useBoundingClientRect) {
-                const height = this.recorderElement.getBoundingClientRect().height;
-                recorderHeight = {
-                    unit: "px",
-                    value: height
-                };
-            } else if (this.userMedia) {
-                let height = this.userMedia.getRawHeight(responsive);
-                if (void 0 !== height && this.options.video.width) {
-                    const ratio = this.getRatio();
-                    if (void 0 !== ratio) {
-                        const idealHeight = this.options.video.width * ratio;
-                        height = Math.min(idealHeight, height);
-                    }
-                }
-                recorderHeight = {
-                    unit: "px",
-                    value: height
-                };
-            } else if (responsive && this.options.video.height) recorderHeight = this.calculateHeight(responsive);
-            else if (this.options.video.height) {
-                const height = this.options.video.height;
-                recorderHeight = {
-                    unit: "px",
-                    value: height
-                };
-            }
-            return recorderHeight;
+            return this.dimensions.getRecorderHeight(responsive, useBoundingClientRect);
         }
         getRatio() {
-            let ratio;
-            if (this.userMedia) {
-                const userMediaVideoWidth = this.userMedia.getVideoWidth();
-                const userMediaVideoHeight = this.userMedia.getVideoHeight();
-                if (!userMediaVideoWidth || userMediaVideoWidth < 1) ratio = this.visuals.getRatio();
-                else if (userMediaVideoHeight) ratio = userMediaVideoHeight / userMediaVideoWidth;
-            } else ratio = dimensions_getRatio(this.options);
-            return ratio;
+            return this.dimensions.getRatio();
         }
         calculateWidth(responsive) {
-            let videoHeight;
-            if (this.userMedia) videoHeight = this.userMedia.getVideoHeight();
-            else if (this.recorderElement) videoHeight = this.recorderElement.videoHeight || this.recorderElement.height;
-            const ratio = this.getRatio();
-            return dimensions_calculateWidth(responsive, this.options, videoHeight, ratio);
+            return this.dimensions.calculateWidth(responsive);
         }
         calculateHeight(responsive) {
-            let videoDimension;
-            if (this.userMedia) {
-                const videoHeight = this.userMedia.getVideoHeight();
-                videoDimension = {
-                    value: videoHeight,
-                    unit: "px"
-                };
-            } else if (this.recorderElement) {
-                const videoHeight = this.recorderElement.videoHeight || this.recorderElement.height;
-                videoDimension = {
-                    value: videoHeight,
-                    unit: "px"
-                };
-            } else videoDimension = dimensions_calculateHeight(responsive, void 0, this.options, this.getRatio(), this.recorderElement);
-            return videoDimension;
+            return this.dimensions.calculateHeight(responsive);
         }
         getRawVisualUserMedia() {
             return this.recorderElement;
@@ -21568,14 +21891,14 @@ var __webpack_exports__ = {};
         limitHeight(height) {
             return this.visuals.limitHeight(height);
         }
-        isUserMediaLoaded() {
-            return this.userMediaLoaded;
-        }
         constructor(visuals, replay, options){
-            super("Recorder", options), recorder_define_property(this, "visuals", void 0), recorder_define_property(this, "replay", void 0), recorder_define_property(this, "pendingWrites", new boundedWriteQueue()), recorder_define_property(this, "loop", void 0), recorder_define_property(this, "originalAnimationFrameObject", void 0), recorder_define_property(this, "samplesCount", 0), recorder_define_property(this, "framesCount", 0), recorder_define_property(this, "recordingAudioSampleRate", void 0), recorder_define_property(this, "recordingStats", void 0), recorder_define_property(this, "confirmedFrameNumber", 0), recorder_define_property(this, "confirmedSampleNumber", 0), recorder_define_property(this, "recorderElement", void 0), recorder_define_property(this, "userMedia", void 0), recorder_define_property(this, "userMediaTimeout", void 0), recorder_define_property(this, "retryTimeout", void 0), recorder_define_property(this, "reconnectTimeout", void 0), recorder_define_property(this, "connectionTimeout", void 0), recorder_define_property(this, "backpressureTimeout", void 0), recorder_define_property(this, "stopTimeout", void 0), recorder_define_property(this, "frameProgress", void 0), recorder_define_property(this, "sampleProgress", void 0), recorder_define_property(this, "canvas", void 0), recorder_define_property(this, "recordingDimensions", void 0), recorder_define_property(this, "ctx", void 0), recorder_define_property(this, "userMediaLoaded", void 0), recorder_define_property(this, "userMediaLoading", false), recorder_define_property(this, "mediaRequestId", 0), recorder_define_property(this, "cameraRecovery", void 0), recorder_define_property(this, "resolveCameraRecovery", void 0), recorder_define_property(this, "resumeAfterCameraRecovery", false), recorder_define_property(this, "submitting", false), recorder_define_property(this, "unloaded", void 0), recorder_define_property(this, "stopTime", void 0), recorder_define_property(this, "stream", void 0), recorder_define_property(this, "streamBackpressured", false), recorder_define_property(this, "resumeAfterDrain", false), recorder_define_property(this, "mediaTransmissionStarted", false), recorder_define_property(this, "recordingActive", false), recorder_define_property(this, "recordingTransportFailed", false), recorder_define_property(this, "connecting", false), recorder_define_property(this, "connected", false), recorder_define_property(this, "connectionFailed", false), recorder_define_property(this, "reconnecting", false), recorder_define_property(this, "reconnectAttempts", 0), recorder_define_property(this, "blocking", false), recorder_define_property(this, "built", false), recorder_define_property(this, "key", void 0), recorder_define_property(this, "waitingTime", void 0), recorder_define_property(this, "connectingStartedAt", void 0), recorder_define_property(this, "lastCloseEvent", void 0), recorder_define_property(this, "lastSocketError", void 0), recorder_define_property(this, "pingInterval", void 0), recorder_define_property(this, "frame", void 0), recorder_define_property(this, "recordingBuffer", void 0), recorder_define_property(this, "facingMode", void 0);
-            this.visuals = visuals;
-            this.replay = replay;
-            this.facingMode = options.video.facingMode;
+            super(visuals, replay, options), recorder_define_property(this, "dimensions", void 0);
+            this.dimensions = new recorder_dimensions({
+                options,
+                visuals,
+                getRecorderElement: ()=>this.recorderElement,
+                getUserMedia: ()=>this.userMedia
+            });
         }
     }
     const visuals_recorder = Recorder;
@@ -22539,8 +22862,8 @@ var __webpack_exports__ = {};
             }
             else runValidation = false;
             if (runValidation) {
-                var _event_target;
-                const targetName = null == event ? void 0 : null == (_event_target = event.target) ? void 0 : _event_target.name;
+                const target = null == event ? void 0 : event.target;
+                const targetName = target instanceof Element ? target.getAttribute("name") : void 0;
                 if (targetName) this.emit("VALIDATING", {
                     targetName
                 });
@@ -22575,27 +22898,10 @@ var __webpack_exports__ = {};
                         }
                     }
                     if (valid) {
-                        const recipients = this.form.getRecipients();
-                        const toIsConfigured = "to" in recipients;
-                        const ccIsConfigured = "cc" in recipients;
-                        const bccIsConfigured = "bcc" in recipients;
-                        const hasTo = recipients.to && recipients.to.length > 0;
-                        const hasCc = recipients.cc && recipients.cc.length > 0;
-                        const hasBcc = recipients.bcc && recipients.bcc.length > 0;
-                        if (toIsConfigured) {
-                            if (!hasTo) if (ccIsConfigured && bccIsConfigured) {
-                                if (!hasCc && !hasBcc) valid = false;
-                            } else if (ccIsConfigured) {
-                                if (!hasCc) valid = false;
-                            } else if (bccIsConfigured) {
-                                if (!hasBcc) valid = false;
-                            } else valid = false;
-                        } else if (ccIsConfigured) {
-                            if (!hasCc) {
-                                if (bccIsConfigured && !hasBcc) valid = false;
-                            }
+                        if (!email_isRecipientSelectionValid(this.form.getRecipients())) {
+                            valid = false;
+                            whyInvalid = "At least one recipient is required";
                         }
-                        if (!valid) whyInvalid = "At least one recipient is required";
                     }
                 } else {
                     valid = visualsValid;