videomail-client 16.1.1 → 16.2.0

package/dist/esm/index.js

@@ -3620,7 +3620,7 @@ const constants = {
     }
 };
 var package_namespaceObject = {
-    rE: "16.1.1"
+    rE: "16.2.0"
 };
 function isAudioEnabled(options) {
     return Boolean(options.audio.enabled);
@@ -4142,6 +4142,14 @@ class Despot {
 }
 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;
@@ -4161,14 +4169,6 @@ function showElement(element) {
     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 form_define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -4876,6 +4876,19 @@ main_options.domAPI = styleDomAPI_default();
 main_options.insertStyleElement = insertStyleElement_default();
 injectStylesIntoStyleTag_default()(main_0.A, main_options);
 main_0.A && main_0.A.locals && main_0.A.locals;
+function isRecipientSelectionValid(recipients) {
+    const hasTo = Boolean(recipients.to?.length);
+    const hasCc = Boolean(recipients.cc?.length);
+    const hasBcc = Boolean(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"
@@ -5487,7 +5500,7 @@ class FacingMode extends util_Despot {
         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,
@@ -5831,7 +5844,7 @@ class RecorderInsides extends util_Despot {
         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);
     }
 }
@@ -6078,46 +6091,18 @@ class Notifier extends util_Despot {
     }
 }
 const notifier = Notifier;
-function boundedWriteQueue_define_property(obj, key, value) {
-    if (key in obj) Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
+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}`;
     });
-    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 line = [
+        `🔎 ${title}`,
+        ...lines
+    ].join("\n");
+    return line;
 }
-const boundedWriteQueue = BoundedWriteQueue;
+const string_summarize = summarize;
 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(".");
@@ -6197,117 +6182,11 @@ function getWebSocketDiagnostic(url2Connect) {
     };
 }
 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 = 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 = 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 AudioRecorder_define_property(obj, key, value) {
+function boundedWriteQueue_define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
         enumerable: true,
@@ -6317,120 +6196,223 @@ function AudioRecorder_define_property(obj, key, value) {
     else obj[key] = value;
     return obj;
 }
-const CHANNELS = 1;
-function getAudioContextClass() {
-    return window.AudioContext;
-}
-class AudioRecorder {
-    hasAudioContext() {
-        return Boolean(getAudioContextClass()) && Boolean(this.getAudioContext());
+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;
     }
-    getAudioContext() {
-        if (!this.vcAudioContext) {
-            const AudioContext = getAudioContextClass();
-            this.vcAudioContext = new AudioContext();
-        }
-        return this.vcAudioContext;
+    dequeue() {
+        const write = this.writes.shift();
+        if (write) this.queuedBytes -= write.buffer.length;
+        return write;
     }
-    onAudioProcess(e, cb) {
-        if (!this.userMedia.isRecording() || this.userMedia.isPaused()) return;
-        const float32Array = e.inputBuffer.getChannelData(0);
-        cb(new audio_sample(float32Array));
+    clear() {
+        this.writes.length = 0;
+        this.queuedBytes = 0;
     }
-    disconnect() {
-        if (this.scriptProcessor) {
-            this.scriptProcessor.onaudioprocess = null;
-            this.scriptProcessor.disconnect();
-        }
-        this.audioInput?.disconnect();
-        this.volume?.disconnect();
+    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;
     }
-    init(localMediaStream) {
-        this.options.logger.debug("AudioRecorder: init()");
-        this.disconnect();
-        const volume = this.getAudioContext().createGain();
-        this.volume = volume;
-        try {
-            this.audioInput = this.getAudioContext().createMediaStreamSource(localMediaStream);
-        } catch (exc) {
-            throw error_createError({
-                message: "Webcam has no audio",
-                exc,
+}
+const boundedWriteQueue = BoundedWriteQueue;
+function streamWriter_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 PIPE_SYMBOL = "°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°`°º¤ø,¸ ";
+class RecorderStreamWriter extends util_Despot {
+    hasExceededWebSocketSendBuffer(buffer, opts) {
+        return buffer.length > 0 && !this.pendingWrites.enqueue(buffer, opts);
+    }
+    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
             });
-        }
-        let { bufferSize } = this.options.audio;
-        if ("auto" === bufferSize) bufferSize = util_getBrowser(this.options).isFirefox() ? 512 : 2048;
-        if (void 0 === bufferSize || !is_power_of_two(bufferSize)) throw error_createError({
-            message: `Audio buffer size must be a power of two. The current buffer size is ${bufferSize}.`,
-            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);
+    }
+    writeToStream(stream, buffer, opts) {
+        const onFlushedCallback = 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
+                    });
+                }
+            });
+            if (!canContinue) {
+                this.streamBackpressured = true;
+                this.startBackpressureTimeout();
+                this.pauseForBackpressure();
+                return false;
+            }
+            return true;
+        } catch (exc) {
+            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;
+        }
+    }
+    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();
+    }
+    isStaleStream(stream) {
+        return this.stream !== stream || stream.destroyed;
+    }
+    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
         });
-        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
+    }
+    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
         });
-        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);
-        };
+    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);
     }
-    async resume() {
-        const context = this.getAudioContext();
-        if ("running" !== context.state) await context.resume();
+    shouldStartBackpressureTimeout() {
+        return void 0 === this.backpressureTimeout && this.mediaTransmissionStarted;
     }
-    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);
+    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
+            }
         });
+        this.failMediaTransmission(err);
     }
-    getSampleRate() {
-        if (this.hasAudioContext()) return this.getAudioContext().sampleRate;
-        return -1;
+    handleStreamDrain(stream) {
+        this.options.logger.debug(`${PIPE_SYMBOL}Stream *drain* event emitted`);
+        this.flushPendingWrites(stream);
     }
-    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;
+    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);
     }
 }
-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_define_property(obj, key, value) {
+const streamWriter = RecorderStreamWriter;
+var Buffer = __webpack_require__("dY").hp;
+function connection_define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
         enumerable: true,
@@ -6440,1487 +6422,1859 @@ function userMedia_define_property(obj, key, value) {
     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;
-        }
-    }
-    async restorePlayback() {
-        if (!this.rawVisualUserMedia) throw new Error("No camera preview is available.");
-        await this.rawVisualUserMedia.play();
-        await this.audioRecorder?.resume();
-    }
-    hasLiveStream() {
-        const videoReady = this.currentVisualStream?.getVideoTracks().some((track)=>"live" === track.readyState && track.enabled && !track.muted);
-        const audioReady = !isAudioEnabled(this.options) || this.currentVisualStream?.getAudioTracks().some((track)=>"live" === track.readyState && track.enabled && !track.muted);
-        return Boolean(this.currentVisualStream?.active && videoReady && audioReady);
-    }
-    hasEnded() {
-        if (this.rawVisualUserMedia?.ended) return this.rawVisualUserMedia.ended;
-        return !this.currentVisualStream?.active;
+class RecorderConnection extends streamWriter {
+    canReconnectAfterStreamClose() {
+        return Boolean(this.connected && this.userMediaLoaded);
     }
-    hasInvalidDimensions() {
-        if (!this.rawVisualUserMedia) return false;
-        const { videoWidth, videoHeight } = this.rawVisualUserMedia;
-        return videoWidth > 0 && videoWidth < 3 || videoHeight > 0 && videoHeight < 3;
+    shouldReportStreamClose() {
+        return !this.connecting && !this.blocking;
     }
-    logEvent(eventType, params) {
-        this.options.logger.debug(`UserMedia: ... ${EVENT_ASCII} event ${eventType}: ${string_pretty(params)}`);
-    }
-    unloadRemainingEventListeners() {
-        this.options.logger.debug("UserMedia: unloadRemainingEventListeners()");
-        this.clearInitializationListeners?.();
-        mediaEvents.forEach((eventName)=>{
-            this.rawVisualUserMedia?.removeEventListener(eventName, this.outputEvent);
+    handleStreamClose(url2Connect) {
+        const debugLine = string_summarize(`${PIPE_SYMBOL}Stream has closed:`, {
+            connecting: this.connecting,
+            connected: this.connected,
+            userMediaLoaded: this.userMediaLoaded,
+            blocking: this.blocking
         });
-        this.rawVisualUserMedia?.removeEventListener("error", this.handleMediaError);
+        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);
     }
-    audioRecord(audioCallback) {
-        this.removeListener("SENDING_FIRST_FRAME");
-        this.audioRecorder?.record(audioCallback);
+    shouldIgnoreStreamClose() {
+        return this.recordingTransportFailed || Boolean(this.unloaded) || this.validate();
     }
-    init(localMediaStream, videoCallback, audioCallback, endedEarlyCallback, params) {
-        this.clearInitializationListeners?.();
-        this.stop(localMediaStream, {
-            aboutToInitialize: true,
-            preserveRecordingState: Boolean(params?.switchingFacingMode || params?.recovering)
+    handleStreamError(url2Connect, err) {
+        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)
         });
-        const initializationId = ++this.initializationId;
-        this.onPlayReached = false;
-        this.onLoadedMetaDataReached = false;
-        this.playingPromiseReached = false;
-        this.videoTrackLabel = void 0;
-        if (isAudioEnabled(this.options)) this.audioRecorder ??= new media_AudioRecorder(this, this.options);
-        const unloadAllEventListeners = ()=>{
-            this.options.logger.debug("UserMedia: unloadAllEventListeners()");
-            this.unloadRemainingEventListeners();
-            this.removeListener("SENDING_FIRST_FRAME");
-            this.rawVisualUserMedia?.removeEventListener("play", onPlay);
-            this.rawVisualUserMedia?.removeEventListener("loadedmetadata", onLoadedMetaData);
-        };
-        this.clearInitializationListeners = ()=>{
-            this.rawVisualUserMedia?.removeEventListener("play", onPlay);
-            this.rawVisualUserMedia?.removeEventListener("loadedmetadata", onLoadedMetaData);
-            this.clearInitializationListeners = void 0;
+        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: 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
+            })
+        });
+    }
+    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;
+    }
+    clearConnectionTimeout() {
+        if (void 0 === this.connectionTimeout) return;
+        this.options.logger.debug("Recorder: clearConnectionTimeout()");
+        window.clearTimeout(this.connectionTimeout);
+        this.connectionTimeout = void 0;
+    }
+    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 * 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) {
+        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: closeEvent?.code,
+            closeReason: closeEvent?.reason,
+            elapsedMs,
+            online,
+            secureContext: globalThis.isSecureContext,
+            socketReadyState: this.stream?.socket.readyState,
+            timeoutMs: this.options.timeouts.connection,
+            url: url2Connect,
+            unloaded: this.unloaded,
+            userMediaLoaded: this.userMediaLoaded,
+            userMediaLoading: this.userMediaLoading,
+            wasClean: closeEvent?.wasClean,
+            socketError,
+            blocking: this.blocking,
+            visibilityState: document.visibilityState
         };
-        const play = ()=>{
-            try {
-                this.rawVisualUserMedia?.load();
-                if (this.rawVisualUserMedia?.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 && !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
-                            }));
-                        }
+        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.");
+            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
+            });
+            return;
+        }
+        this.options.logger.debug(`Recorder: initializing web socket stream to ${url2Connect}`);
+        let nativeSocket;
+        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);
+            });
+        } 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 = websocket_stream(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)=>{
+                this.options.logger.debug(`${PIPE_SYMBOL}Stream *connect* event emitted with args: ${string_pretty(args)}`);
+                this.clearConnectionTimeout();
+                const isClosing = 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");
+                    cb?.();
                 }
-            } catch (exc) {
-                unloadAllEventListeners();
-                endedEarlyCallback(exc);
-            }
-        };
-        const fireCallbacks = ()=>{
-            const readyState = 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 = ()=>{
-                    if (initializationId !== this.initializationId || this.currentVisualStream !== localMediaStream) return;
-                    if (this.recording) this.audioRecord(audioCallback);
-                    else this.on("SENDING_FIRST_FRAME", ()=>{
-                        this.audioRecord(audioCallback);
+            });
+            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.clearInitializationListeners?.();
-                    videoCallback();
+                    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)}`);
+            });
+        }
+    }
+    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
                 };
-                if (params?.recovering) this.audioRecorder.resume().then(onAudioReady).catch(endedEarlyCallback);
-                else onAudioReady();
-            } catch (exc) {
-                unloadAllEventListeners();
-                this.stop(void 0, {
-                    preserveRecordingState: Boolean(params?.recovering)
-                });
-                endedEarlyCallback(exc);
-            }
-            else {
-                this.clearInitializationListeners?.();
-                videoCallback();
+                this.writeStream(Buffer.from(JSON.stringify(commandObj)), cb ? {
+                    onFlushedCallback: ()=>{
+                        queueMicrotask(cb);
+                    }
+                } : void 0);
             }
-        };
-        const onPlay = ()=>{
-            try {
-                this.logEvent("play", {
-                    readyState: this.rawVisualUserMedia?.readyState,
-                    audio: isAudioEnabled(this.options),
-                    width: this.rawVisualUserMedia?.width,
-                    height: this.rawVisualUserMedia?.height,
-                    videoWidth: this.rawVisualUserMedia?.videoWidth,
-                    videoHeight: this.rawVisualUserMedia?.videoHeight
+        } else {
+            this.options.logger.debug(`Reconnecting for the command ${command} …`);
+            this.initSocket(()=>{
+                this.writeCommand(command, args, cb);
+            });
+        }
+    }
+    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 connection = RecorderConnection;
+function createUserMediaConstraints({ options, facingMode, limitedWidth, userMediaParams }) {
+    const video = {
+        frameRate: {
+            ideal: options.video.fps
+        }
+    };
+    if (userMediaParams?.switchingFacingMode || userMediaParams?.recovering) video.facingMode = userMediaParams.switchingFacingMode || facingMode;
+    if (options.video.width) video.width = {
+        ideal: options.video.width
+    };
+    else if (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,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+class RecorderMedia extends connection {
+    show() {
+        html_showElement(this.recorderElement);
+    }
+    clearRetryTimeout() {
+        if (void 0 === this.retryTimeout) return;
+        this.options.logger.debug("Recorder: clearRetryTimeout()");
+        window.clearTimeout(this.retryTimeout);
+        this.retryTimeout = void 0;
+    }
+    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) {
+        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 = 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 (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
+            });
+        } 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
+            });
+        }
+    }
+    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
+            });
+        }
+        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)
                 });
-                this.rawVisualUserMedia?.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 = ()=>{
-            this.logEvent("loadedmetadata", {
-                readyState: this.rawVisualUserMedia?.readyState,
-                paused: this.rawVisualUserMedia?.paused,
-                width: this.rawVisualUserMedia?.width,
-                height: this.rawVisualUserMedia?.height,
-                videoWidth: this.rawVisualUserMedia?.videoWidth,
-                videoHeight: this.rawVisualUserMedia?.videoHeight
+            }, params);
+        } catch (exc) {
+            localStream.getTracks().forEach((track)=>{
+                track.stop();
             });
-            this.rawVisualUserMedia?.removeEventListener("loadedmetadata", onLoadedMetaData);
-            if (!this.hasEnded() && !this.hasInvalidDimensions()) {
-                this.emit("LOADED_META_DATA");
-                this.onLoadedMetaDataReached = true;
-                fireCallbacks();
-            }
-        };
+            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();
+        }
+    }
+    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 {
-            const videoTrack = media_getFirstVideoTrack(localMediaStream);
-            this.videoTrackLabel = 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
+            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 (errorListeners?.length) this.emit("ERROR", {
+                exc
             });
             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}`);
+                this.options.logger.debug("Recorder: no error listeners attached but throwing exception further");
+                throw exc;
             }
-            else throw error_createError({
-                message: "Webcam is disabled",
-                explanation: "The video track seems to be disabled. Enable it in your system.",
-                options: this.options
+        }
+    }
+    isNotifying() {
+        return this.visuals.isNotifying();
+    }
+    isHidden() {
+        return !this.recorderElement || html_isHidden(this.recorderElement);
+    }
+    clearUserMediaTimeout() {
+        if (void 0 !== this.userMediaTimeout) {
+            this.options.logger.debug("Recorder: clearUserMediaTimeout()");
+            window.clearTimeout(this.userMediaTimeout);
+            this.userMediaTimeout = void 0;
+        }
+    }
+    clearStopTimeout() {
+        if (void 0 === this.stopTimeout) return;
+        window.clearTimeout(this.stopTimeout);
+        this.stopTimeout = void 0;
+    }
+    isReady() {
+        return this.userMedia?.isReady();
+    }
+    finishCameraRecovery(restored) {
+        this.clearUserMediaTimeout();
+        const resolve = this.resolveCameraRecovery;
+        const resumeRequested = restored && this.resumeAfterCameraRecovery;
+        this.cameraRecovery = void 0;
+        this.resolveCameraRecovery = void 0;
+        this.resumeAfterCameraRecovery = false;
+        resolve?.(restored);
+        if (resumeRequested && this.isPaused()) this.resume();
+    }
+    cancelCameraRecovery() {
+        if (!this.cameraRecovery) return;
+        this.mediaRequestId++;
+        this.userMediaLoading = false;
+        this.userMediaLoaded = false;
+        this.clearUserMediaTimeout();
+        this.userMedia?.stop(void 0, {
+            preserveRecordingState: true
+        });
+        this.finishCameraRecovery(false);
+    }
+    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
+        });
+    }
+    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.options.logger.debug("UserMedia: detected (but no video tracks exist");
-            this.rawVisualUserMedia?.addEventListener("loadedmetadata", onLoadedMetaData);
-            this.rawVisualUserMedia?.addEventListener("play", onPlay);
-            this.rawVisualUserMedia?.removeEventListener("error", this.handleMediaError);
-            this.rawVisualUserMedia?.addEventListener("error", this.handleMediaError);
-            this.setVisualStream(localMediaStream);
-            play();
-        } catch (exc) {
-            unloadAllEventListeners();
-            endedEarlyCallback(exc);
+        } else {
+            this.userMediaLoaded = false;
+            this.loadUserMedia({
+                recovering: true
+            });
+        }
+        return recovery;
+    }
+    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
+        });
+    }
+    hide() {
+        if (!this.isHidden()) {
+            if (this.recorderElement) html_hideElement(this.recorderElement);
+            this.clearUserMediaTimeout();
+            this.clearRetryTimeout();
         }
     }
-    getVideoTrackLabel() {
-        return this.videoTrackLabel;
+    isUnloaded() {
+        return this.unloaded;
+    }
+    isUserMediaLoaded() {
+        return this.userMediaLoaded;
     }
-    isReady() {
-        return Boolean(this.rawVisualUserMedia?.srcObject || this.rawVisualUserMedia?.currentSrc);
+    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;
     }
-    stop(visualStream, params) {
+}
+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").hp;
+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;
+}
+class RecorderCapture extends media {
+    onAudioSample(audioSample) {
+        if (this.recordingTransportFailed || this.cameraRecovery) return;
+        const sampleRate = this.userMedia?.getAudioSampleRate();
+        if (sampleRate && sampleRate > 0) this.recordingAudioSampleRate ??= sampleRate;
+        this.samplesCount++;
+        this.mediaTransmissionStarted = true;
+        const audioBuffer = audioSample.toBuffer();
+        this.writeStream(audioBuffer);
+    }
+    onUserMediaReady(params) {
         try {
-            let chosenStream = visualStream;
-            if (!params?.aboutToInitialize) {
-                this.initializationId++;
-                this.clearInitializationListeners?.();
-                chosenStream ??= this.currentVisualStream;
-                const tracks = chosenStream?.getTracks();
-                if (tracks) tracks.forEach((track)=>{
-                    track.stop();
-                });
-                this.setVisualStream();
-                this.audioRecorder?.stop();
-                this.audioRecorder = void 0;
+            this.options.logger.debug(`Recorder: onUserMediaReady(${params ? string_pretty(params) : ""})`);
+            const switchingFacingMode = params?.switchingFacingMode;
+            if (params?.recovering) {
+                if (!this.userMedia?.hasLiveStream()) return void this.failCameraRecovery(new Error("The restored camera has no live tracks."));
+                if (void 0 !== this.recordingAudioSampleRate && this.userMedia.getAudioSampleRate() !== this.recordingAudioSampleRate) return void this.failCameraRecovery(new Error("The audio sample rate changed during recovery."));
             }
-            if (!params?.preserveRecordingState) this.paused = this.recording = false;
+            this.userMediaLoading = this.blocking = this.unloaded = this.submitting = false;
+            this.userMediaLoaded = true;
+            this.clearUserMediaTimeout();
+            if (!switchingFacingMode && !params?.recovering) this.loop = this.createLoop();
+            this.show();
+            if (params?.recordWhenReady) this.record();
+            this.emit("USER_MEDIA_READY", {
+                switchingFacingMode: params?.switchingFacingMode,
+                recovering: params?.recovering,
+                paused: this.isPaused(),
+                recordWhenReady: params?.recordWhenReady
+            });
+            if (params?.recovering) this.finishCameraRecovery(true);
         } catch (exc) {
-            this.emit("ERROR", {
+            if (params?.recovering) this.failCameraRecovery(exc);
+            else this.emit("ERROR", {
                 exc
             });
         }
     }
-    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;
+    calculateFrameProgress() {
+        return calculateProgress(this.confirmedFrameNumber, this.framesCount);
     }
-    getVideoHeight() {
-        if (!this.rawVisualUserMedia) return;
-        return this.rawVisualUserMedia.videoHeight || this.rawVisualUserMedia.height;
+    calculateSampleProgress() {
+        return calculateProgress(this.confirmedSampleNumber, this.samplesCount);
     }
-    getVideoWidth() {
-        if (!this.rawVisualUserMedia) return;
-        return this.rawVisualUserMedia.videoWidth || this.rawVisualUserMedia.width;
+    updateOverallProgress() {
+        this.frameProgress = this.calculateFrameProgress();
+        if (isAudioEnabled(this.options)) this.sampleProgress = this.calculateSampleProgress();
+        this.emit("PROGRESS", {
+            frameProgress: this.frameProgress,
+            sampleProgress: this.sampleProgress
+        });
     }
-    hasVideoWidth() {
-        const videoWidth = this.getVideoWidth();
-        return videoWidth && videoWidth > 0;
+    updateFrameProgress(args) {
+        this.confirmedFrameNumber = getConfirmedProgressNumber({
+            args,
+            kind: "frame",
+            options: this.options
+        });
+        this.frameProgress = this.calculateFrameProgress();
+        this.updateOverallProgress();
     }
-    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 = widthDimension?.value;
-        }
-        widthDimension.value = rawWidth;
-        return widthDimension;
+    updateSampleProgress(args) {
+        this.confirmedSampleNumber = getConfirmedProgressNumber({
+            args,
+            kind: "sample",
+            options: this.options
+        });
+        this.sampleProgress = this.calculateSampleProgress();
+        this.updateOverallProgress();
     }
-    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;
+    preview(args) {
+        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 = args.duration ?? -1;
+        this.emit("PREVIEW", {
+            key: this.key,
+            width: widthDimension?.value,
+            height: heightDimension?.value,
+            hasAudio,
+            duration
+        });
+        if (this.stopTime) this.waitingTime = Date.now() - this.stopTime;
+        this.recordingStats ??= {};
+        this.recordingStats.waitingTime = this.waitingTime;
     }
-    getRawVisuals() {
-        return this.rawVisualUserMedia;
+    cancelAnimationFrame() {
+        this.loop?.dispose();
     }
-    pause() {
-        this.paused = true;
+    getIntervalSum() {
+        if (!this.loop) return;
+        return this.loop.getElapsedTime();
     }
-    isPaused() {
-        return this.paused;
+    getAvgInterval() {
+        const intervalSum = this.getIntervalSum() ?? 0;
+        if (!this.hasValidInterval(intervalSum)) return;
+        return intervalSum / this.framesCount;
     }
-    resume() {
-        this.paused = false;
+    getAvgFps() {
+        const intervalSum = this.getIntervalSum() ?? 0;
+        if (!this.hasValidInterval(intervalSum)) return;
+        return this.framesCount / intervalSum * 1000;
     }
-    record() {
-        this.recording = true;
+    hasValidInterval(intervalSum) {
+        return intervalSum > 0;
     }
-    isRecording() {
-        return this.recording;
+    getRecordingStats() {
+        return this.recordingStats;
     }
     getAudioSampleRate() {
-        if (this.audioRecorder) return this.audioRecorder.getSampleRate();
-        return -1;
+        return this.recordingAudioSampleRate ?? this.userMedia?.getAudioSampleRate();
+    }
+    stop(params) {
+        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 = params?.limitReached;
+        this.emit("STOPPING", {
+            limitReached
+        });
+        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) {
+                this.recordingStats.samplesCount = this.samplesCount;
+                this.recordingStats.sampleRate = 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() {
+        this.options.logger.debug("Recorder: reInitializeAudio()");
+        this.clearUserMediaTimeout();
+        this.userMediaLoading = false;
+        this.userMedia?.stop();
+        this.recordingDimensions = void 0;
+        this.userMediaLoaded = this.key = this.canvas = this.ctx = void 0;
+        this.loadUserMedia();
+    }
+    reset() {
+        this.cancelCameraRecovery();
+        if (!this.unloaded) {
+            this.options.logger.debug("Recorder: reset()");
+            this.emit("RESETTING");
+            this.cancelAnimationFrame();
+            this.userMedia?.stop();
+            this.replay.reset();
+            this.userMediaLoaded = this.key = this.canvas = this.ctx = this.recordingBuffer = void 0;
+        }
+    }
+    validate() {
+        return Boolean(this.key) && void 0 === this.canvas;
     }
-    getCharacteristics() {
-        return {
-            audioSampleRate: this.getAudioSampleRate(),
-            muted: this.rawVisualUserMedia?.muted,
-            width: this.rawVisualUserMedia?.width,
-            height: this.rawVisualUserMedia?.height,
-            videoWidth: this.rawVisualUserMedia?.videoWidth,
-            videoHeight: this.rawVisualUserMedia?.videoHeight
-        };
+    pause(params) {
+        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}`);
+        this.userMedia?.pause();
+        loop.stop();
+        this.emit("PAUSED");
+        this.sendPings();
     }
-    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)=>{
-            this.logEvent(e.type, {
-                readyState: this.rawVisualUserMedia?.readyState
-            });
-            this.rawVisualUserMedia?.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)=>{
-            this.rawVisualUserMedia?.addEventListener(eventName, this.outputEvent, false);
-        });
+    resume() {
+        if (this.cameraRecovery || !this.userMedia?.hasLiveStream()) {
+            this.recoverCamera();
+            this.resumeAfterCameraRecovery = Boolean(this.cameraRecovery);
+            return;
+        }
+        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();
     }
-}
-const visuals_userMedia = UserMedia;
-var Buffer = __webpack_require__("dY").hp;
-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;
-}
-const PIPE_SYMBOL = "°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°`°º¤ø,¸ ";
-class Recorder extends util_Despot {
-    hasExceededWebSocketSendBuffer(buffer, opts) {
-        return buffer.length > 0 && !this.pendingWrites.enqueue(buffer, opts);
+    onFlushed(opts) {
+        const frameNumber = opts.frameNumber;
+        if (1 === frameNumber) this.emit("FIRST_FRAME_SENT");
     }
-    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
+    draw(_deltaTime, elapsedTime) {
+        if (this.recordingTransportFailed) return;
+        if (!this.userMedia) throw new Error("No user media defined, unable to draw on canvas");
+        try {
+            if (!this.isPaused() && this.stream && this.ctx) {
+                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 = this.frame?.toBuffer();
+                const recordingBufferLength = 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.emit("ERROR", {
+                exc
             });
-            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);
+        }
     }
-    writeToStream(stream, buffer, opts) {
-        const onFlushedCallback = 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
+    createLoop() {
+        const newLoop = animitter({
+            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();
                     });
-                }
+                });
             });
-            if (!canContinue) {
-                this.streamBackpressured = true;
-                this.startBackpressureTimeout();
-                this.pauseForBackpressure();
-                return false;
+            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 true;
+            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({
-                message: "Failed writing to server",
-                explanation: `stream.write() failed because of ${string_pretty(exc)}`,
-                options: this.options,
-                exc
+                exc,
+                options: this.options
             });
-            this.handleWriteFailure(err);
-            return false;
+            this.emit("ERROR", {
+                err
+            });
+            return;
         }
-    }
-    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.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;
         }
-        this.resumeRecordingAfterDrain();
-    }
-    isStaleStream(stream) {
-        return this.stream !== stream || stream.destroyed;
-    }
-    canPauseForBackpressure() {
-        return Boolean(this.recordingActive && !this.userMedia?.isPaused() && this.loop?.isRunning());
-    }
-    pauseForBackpressure() {
-        if (!this.canPauseForBackpressure()) return;
-        this.resumeAfterDrain = true;
-        this.loop.stop();
-    }
-    resumeRecordingAfterDrain() {
-        if (!this.resumeAfterDrain) return;
-        this.resumeAfterDrain = false;
-        if (this.canResumeAfterDrain()) this.loop?.start();
-    }
-    canResumeAfterDrain() {
-        return this.recordingActive && !this.userMedia?.isPaused();
-    }
-    handleWriteFailure(err) {
-        if (this.mediaTransmissionStarted) return void this.failMediaTransmission(err);
-        this.emit("ERROR", {
-            err
-        });
-    }
-    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
-        });
-    }
-    startBackpressureTimeout() {
-        if (!this.shouldStartBackpressureTimeout()) return;
-        this.backpressureTimeout = window.setTimeout(()=>{
-            this.backpressureTimeout = void 0;
-            if (this.shouldIgnoreBackpressureTimeout()) return;
+        if (!this.canvas.height) {
             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.",
+                message: "Canvas has an invalid height.",
                 options: this.options
             });
-            this.failMediaTransmission(err);
-        }, this.options.timeouts.connection);
-    }
-    shouldStartBackpressureTimeout() {
-        return void 0 === this.backpressureTimeout && this.mediaTransmissionStarted;
-    }
-    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
-            }
-        });
-        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);
-    }
-    shouldReportStreamClose() {
-        return !this.connecting && !this.blocking;
-    }
-    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"
+            this.emit("ERROR", {
+                err
             });
-        }, 0);
-    }
-    shouldIgnoreStreamClose() {
-        return this.recordingTransportFailed || Boolean(this.unloaded) || this.validate();
-    }
-    handleStreamError(url2Connect, err) {
-        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: this.lastSocketError ?? err
+        this.recordingDimensions = {
+            width: this.canvas.width,
+            height: this.canvas.height
+        };
+        this.frame = new canvas_to_buffer(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
         });
-        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
-            })
+        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();
     }
-    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;
-    }
-    onAudioSample(audioSample) {
-        if (this.recordingTransportFailed || this.cameraRecovery) return;
-        const sampleRate = this.userMedia?.getAudioSampleRate();
-        if (sampleRate && sampleRate > 0) this.recordingAudioSampleRate ??= sampleRate;
-        this.samplesCount++;
-        this.mediaTransmissionStarted = true;
-        const audioBuffer = audioSample.toBuffer();
-        this.writeStream(audioBuffer);
+    setAnimationFrameObject(newObj) {
+        if (this.loop) {
+            const isRecording = this.isRecording();
+            this.loop.stop();
+            this.loop.setRequestAnimationFrameObject(newObj);
+            if (isRecording) this.loop.start();
+        }
     }
-    show() {
-        html_showElement(this.recorderElement);
+    restoreAnimationFrameObject() {
+        this.options.logger.debug("Recorder: restoreAnimationFrameObject()");
+        if (this.originalAnimationFrameObject) this.setAnimationFrameObject(this.originalAnimationFrameObject);
     }
-    onUserMediaReady(params) {
-        try {
-            this.options.logger.debug(`Recorder: onUserMediaReady(${params ? string_pretty(params) : ""})`);
-            const switchingFacingMode = params?.switchingFacingMode;
-            if (params?.recovering) {
-                if (!this.userMedia?.hasLiveStream()) return void this.failCameraRecovery(new Error("The restored camera has no live tracks."));
-                if (void 0 !== this.recordingAudioSampleRate && this.userMedia.getAudioSampleRate() !== this.recordingAudioSampleRate) return void this.failCameraRecovery(new Error("The audio sample rate changed during recovery."));
-            }
-            this.userMediaLoading = this.blocking = this.unloaded = this.submitting = false;
-            this.userMediaLoaded = true;
-            this.clearUserMediaTimeout();
-            if (!switchingFacingMode && !params?.recovering) this.loop = this.createLoop();
-            this.show();
-            if (params?.recordWhenReady) this.record();
-            this.emit("USER_MEDIA_READY", {
-                switchingFacingMode: params?.switchingFacingMode,
-                recovering: params?.recovering,
-                paused: this.isPaused(),
-                recordWhenReady: params?.recordWhenReady
-            });
-            if (params?.recovering) this.finishCameraRecovery(true);
-        } catch (exc) {
-            if (params?.recovering) this.failCameraRecovery(exc);
-            else this.emit("ERROR", {
-                exc
-            });
-        }
+    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
+        });
     }
-    clearRetryTimeout() {
-        if (void 0 === this.retryTimeout) return;
-        this.options.logger.debug("Recorder: clearRetryTimeout()");
-        window.clearTimeout(this.retryTimeout);
-        this.retryTimeout = void 0;
+    isPaused() {
+        return this.userMedia?.isPaused() && !this.loop?.isRunning();
     }
-    clearConnectionTimeout() {
-        if (void 0 === this.connectionTimeout) return;
-        this.options.logger.debug("Recorder: clearConnectionTimeout()");
-        window.clearTimeout(this.connectionTimeout);
-        this.connectionTimeout = void 0;
+    isUserMediaPaused() {
+        return this.userMedia?.isPaused() ?? false;
     }
-    clearBackpressureTimeout() {
-        if (void 0 === this.backpressureTimeout) return;
-        window.clearTimeout(this.backpressureTimeout);
-        this.backpressureTimeout = void 0;
+    isCaptureLoopRunning() {
+        return this.loop?.isRunning() ?? false;
     }
-    clearReconnectTimeout() {
-        if (void 0 === this.reconnectTimeout) return;
-        this.options.logger.debug("Recorder: clearReconnectTimeout()");
-        window.clearTimeout(this.reconnectTimeout);
-        this.reconnectTimeout = void 0;
+    stopCaptureLoop() {
+        this.loop?.stop();
     }
-    handleConnectionFailure(params) {
-        if (this.retryConnection(params)) return;
-        this.failConnection(params);
+    startCaptureLoop() {
+        this.loop?.start();
     }
-    retryConnection(params) {
-        if (!this.canRetryConnection()) return false;
-        if (void 0 !== this.reconnectTimeout) return true;
-        const delayMs = Math.min(1000 * 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;
+    isRecording() {
+        return Boolean(this.loop?.isRunning() && !this.isPaused() && !this.isNotifying() && this.stream && !this.stream.destroyed);
     }
-    canRetryConnection() {
-        return Boolean(this.reconnecting && this.userMediaLoaded && this.isOnline() && !this.unloaded && !this.blocking);
+    getRecordingDimensions() {
+        return this.recordingDimensions && {
+            ...this.recordingDimensions
+        };
     }
-    shouldContinueReconnect() {
-        return this.reconnecting && !this.unloaded && !this.blocking;
+    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;
     }
-    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();
+}
+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;
     }
-    isOnline() {
-        return navigator.onLine;
+    const chosenRatio = 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;
     }
-    failConnection(params) {
-        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: closeEvent?.code,
-            closeReason: closeEvent?.reason,
-            elapsedMs,
-            online,
-            secureContext: globalThis.isSecureContext,
-            socketReadyState: this.stream?.socket.readyState,
-            timeoutMs: this.options.timeouts.connection,
-            url: url2Connect,
-            unloaded: this.unloaded,
-            userMediaLoaded: this.userMediaLoaded,
-            userMediaLoading: this.userMediaLoading,
-            wasClean: 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.`;
+    if (!height || height < 1) throw error_createError({
+        message: `Height ${height} cannot be smaller than 1 when calculating width.`,
+        options
+    });
+    const chosenRatio = 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 {
+            if (this.context.options.video.width) {
+                const recorderWidth = this.getRecorderWidth(true);
+                if (recorderWidth?.value) recorderElement.width = recorderWidth.value;
+                else recorderElement.style.removeProperty("width");
+            }
+            if (this.context.options.video.height) {
+                const recorderHeight = this.getRecorderHeight(true);
+                if (recorderHeight?.value) recorderElement.height = recorderHeight.value;
+                else recorderElement.style.removeProperty("height");
+            }
         }
-        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();
+    getRecorderWidth(responsive) {
+        const userMedia = this.context.getUserMedia();
+        if (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;
     }
-    calculateFrameProgress() {
-        return `${(this.confirmedFrameNumber / (this.framesCount || 1) * 100).toFixed(2)}%`;
+    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
+            };
+        }
+        return recorderHeight;
     }
-    calculateSampleProgress() {
-        return `${(this.confirmedSampleNumber / (this.samplesCount || 1) * 100).toFixed(2)}%`;
+    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;
     }
-    updateOverallProgress() {
-        this.frameProgress = this.calculateFrameProgress();
-        if (isAudioEnabled(this.options)) this.sampleProgress = this.calculateSampleProgress();
-        this.emit("PROGRESS", {
-            frameProgress: this.frameProgress,
-            sampleProgress: this.sampleProgress
-        });
+    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());
     }
-    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();
+    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;
     }
-    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();
+    constructor(context){
+        dimensions_define_property(this, "context", void 0);
+        this.context = context;
     }
-    preview(args) {
-        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 = args.duration ?? -1;
-        this.emit("PREVIEW", {
-            key: this.key,
-            width: widthDimension?.value,
-            height: heightDimension?.value,
-            hasAudio,
-            duration
-        });
-        if (this.stopTime) this.waitingTime = Date.now() - this.stopTime;
-        this.recordingStats ??= {};
-        this.recordingStats.waitingTime = this.waitingTime;
+}
+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 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;
+function getAudioContextClass() {
+    return window.AudioContext;
+}
+class AudioRecorder {
+    hasAudioContext() {
+        return Boolean(getAudioContextClass()) && Boolean(this.getAudioContext());
     }
-    initSocket(cb) {
-        if (this.connected) {
-            this.options.logger.debug("Recorder: already **connected**. Not going to initialize a new WebSocket connection.");
-            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
-            });
-            return;
+    getAudioContext() {
+        if (!this.vcAudioContext) {
+            const AudioContext = getAudioContextClass();
+            this.vcAudioContext = new AudioContext();
         }
-        this.options.logger.debug(`Recorder: initializing web socket stream to ${url2Connect}`);
-        let nativeSocket;
-        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);
-            });
-        } 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;
+        return this.vcAudioContext;
+    }
+    onAudioProcess(e, cb) {
+        if (!this.userMedia.isRecording() || this.userMedia.isPaused()) return;
+        const float32Array = e.inputBuffer.getChannelData(0);
+        cb(new audio_sample(float32Array));
+    }
+    disconnect() {
+        if (this.scriptProcessor) {
+            this.scriptProcessor.onaudioprocess = null;
+            this.scriptProcessor.disconnect();
         }
+        this.audioInput?.disconnect();
+        this.volume?.disconnect();
+    }
+    init(localMediaStream) {
+        this.options.logger.debug("AudioRecorder: init()");
+        this.disconnect();
+        const volume = this.getAudioContext().createGain();
+        this.volume = volume;
         try {
-            this.stream = websocket_stream(nativeSocket);
+            this.audioInput = this.getAudioContext().createMediaStreamSource(localMediaStream);
         } 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)=>{
-                this.options.logger.debug(`${PIPE_SYMBOL}Stream *connect* event emitted with args: ${string_pretty(args)}`);
-                this.clearConnectionTimeout();
-                const isClosing = 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");
-                    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)}`);
+            throw error_createError({
+                message: "Webcam has no audio",
+                exc,
+                options: this.options
             });
         }
+        let { bufferSize } = this.options.audio;
+        if ("auto" === bufferSize) bufferSize = util_getBrowser(this.options).isFirefox() ? 512 : 2048;
+        if (void 0 === bufferSize || !is_power_of_two(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);
     }
-    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;
+    record(cb) {
+        this.options.logger.debug("AudioRecorder: record()");
+        if (this.scriptProcessor) this.scriptProcessor.onaudioprocess = (e)=>{
+            this.onAudioProcess(e, cb);
+        };
     }
-    userMediaErrorCallback(err, usedConstraints) {
-        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 = 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 (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
-            });
-        } 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({
+    async resume() {
+        const context = this.getAudioContext();
+        if ("running" !== context.state) await context.resume();
+    }
+    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,
-                message: "Unable to process this error since there are no error listeners anymore.",
                 options: this.options
-            });
-        }
+            }));
+            this.options.logger.error(err);
+        });
     }
-    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
-            });
-        }
-        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)=>{
+    getSampleRate() {
+        if (this.hasAudioContext()) return this.getAudioContext().sampleRate;
+        return -1;
+    }
+    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;
+    }
+}
+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_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();
             });
-            this.userMediaLoading = false;
-            this.clearUserMediaTimeout();
-            this.userMediaErrorCallback(exc, {
-                audio: isAudioEnabled(this.options)
-            });
-        }
+        } 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 {
-            localStream.getTracks().forEach((track)=>{
-                track.stop();
-            });
-            this.userMediaLoading = false;
-            this.clearUserMediaTimeout();
-            this.cancelCameraRecovery();
+            if (this.rawVisualUserMedia) {
+                this.rawVisualUserMedia.srcObject = null;
+                this.rawVisualUserMedia.removeAttribute("src");
+            }
+            this.currentVisualStream = void 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);
+    async restorePlayback() {
+        if (!this.rawVisualUserMedia) throw new Error("No camera preview is available.");
+        await this.rawVisualUserMedia.play();
+        await this.audioRecorder?.resume();
+    }
+    hasLiveStream() {
+        const videoReady = this.currentVisualStream?.getVideoTracks().some((track)=>"live" === track.readyState && track.enabled && !track.muted);
+        const audioReady = !isAudioEnabled(this.options) || this.currentVisualStream?.getAudioTracks().some((track)=>"live" === track.readyState && track.enabled && !track.muted);
+        return Boolean(this.currentVisualStream?.active && videoReady && audioReady);
+    }
+    hasEnded() {
+        if (this.rawVisualUserMedia?.ended) return this.rawVisualUserMedia.ended;
+        return !this.currentVisualStream?.active;
+    }
+    hasInvalidDimensions() {
+        if (!this.rawVisualUserMedia) return false;
+        const { videoWidth, videoHeight } = this.rawVisualUserMedia;
+        return videoWidth > 0 && videoWidth < 3 || videoHeight > 0 && videoHeight < 3;
+    }
+    logEvent(eventType, params) {
+        this.options.logger.debug(`UserMedia: ... ${EVENT_ASCII} event ${eventType}: ${string_pretty(params)}`);
+    }
+    unloadRemainingEventListeners() {
+        this.options.logger.debug("UserMedia: unloadRemainingEventListeners()");
+        this.clearInitializationListeners?.();
+        mediaEvents.forEach((eventName)=>{
+            this.rawVisualUserMedia?.removeEventListener(eventName, this.outputEvent);
         });
+        this.rawVisualUserMedia?.removeEventListener("error", this.handleMediaError);
+    }
+    audioRecord(audioCallback) {
+        this.removeListener("SENDING_FIRST_FRAME");
+        this.audioRecorder?.record(audioCallback);
     }
-    configureVideoConstraints(constraints, params) {
-        const videoConstraints = "object" == typeof constraints.video ? constraints.video : void 0;
-        if (!videoConstraints) return;
-        if (params?.switchingFacingMode || params?.recovering) videoConstraints.facingMode = params.switchingFacingMode || this.facingMode;
-        if (this.options.video.width) videoConstraints.width = {
-            ideal: this.options.video.width
+    init(localMediaStream, videoCallback, audioCallback, endedEarlyCallback, params) {
+        this.clearInitializationListeners?.();
+        this.stop(localMediaStream, {
+            aboutToInitialize: true,
+            preserveRecordingState: Boolean(params?.switchingFacingMode || params?.recovering)
+        });
+        const initializationId = ++this.initializationId;
+        this.onPlayReached = false;
+        this.onLoadedMetaDataReached = false;
+        this.playingPromiseReached = false;
+        this.videoTrackLabel = void 0;
+        if (isAudioEnabled(this.options)) this.audioRecorder ??= new media_AudioRecorder(this, this.options);
+        const unloadAllEventListeners = ()=>{
+            this.options.logger.debug("UserMedia: unloadAllEventListeners()");
+            this.unloadRemainingEventListeners();
+            this.removeListener("SENDING_FIRST_FRAME");
+            this.rawVisualUserMedia?.removeEventListener("play", onPlay);
+            this.rawVisualUserMedia?.removeEventListener("loadedmetadata", onLoadedMetaData);
+        };
+        this.clearInitializationListeners = ()=>{
+            this.rawVisualUserMedia?.removeEventListener("play", onPlay);
+            this.rawVisualUserMedia?.removeEventListener("loadedmetadata", onLoadedMetaData);
+            this.clearInitializationListeners = void 0;
+        };
+        const play = ()=>{
+            try {
+                this.rawVisualUserMedia?.load();
+                if (this.rawVisualUserMedia?.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 && !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 = ()=>{
+            const readyState = 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 = ()=>{
+                    if (initializationId !== this.initializationId || this.currentVisualStream !== localMediaStream) return;
+                    if (this.recording) this.audioRecord(audioCallback);
+                    else this.on("SENDING_FIRST_FRAME", ()=>{
+                        this.audioRecord(audioCallback);
+                    });
+                    this.clearInitializationListeners?.();
+                    videoCallback();
+                };
+                if (params?.recovering) this.audioRecorder.resume().then(onAudioReady).catch(endedEarlyCallback);
+                else onAudioReady();
+            } catch (exc) {
+                unloadAllEventListeners();
+                this.stop(void 0, {
+                    preserveRecordingState: Boolean(params?.recovering)
+                });
+                endedEarlyCallback(exc);
+            }
+            else {
+                this.clearInitializationListeners?.();
+                videoCallback();
+            }
+        };
+        const onPlay = ()=>{
+            try {
+                this.logEvent("play", {
+                    readyState: this.rawVisualUserMedia?.readyState,
+                    audio: isAudioEnabled(this.options),
+                    width: this.rawVisualUserMedia?.width,
+                    height: this.rawVisualUserMedia?.height,
+                    videoWidth: this.rawVisualUserMedia?.videoWidth,
+                    videoHeight: this.rawVisualUserMedia?.videoHeight
+                });
+                this.rawVisualUserMedia?.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);
+            }
         };
-        else {
-            const limitedWidth = this.limitWidth();
-            if (limitedWidth?.value) videoConstraints.width = {
-                ideal: limitedWidth.value
-            };
-        }
-        if (this.options.video.height) videoConstraints.height = {
-            ideal: this.options.video.height
+        const onLoadedMetaData = ()=>{
+            this.logEvent("loadedmetadata", {
+                readyState: this.rawVisualUserMedia?.readyState,
+                paused: this.rawVisualUserMedia?.paused,
+                width: this.rawVisualUserMedia?.width,
+                height: this.rawVisualUserMedia?.height,
+                videoWidth: this.rawVisualUserMedia?.videoWidth,
+                videoHeight: this.rawVisualUserMedia?.videoHeight
+            });
+            this.rawVisualUserMedia?.removeEventListener("loadedmetadata", onLoadedMetaData);
+            if (!this.hasEnded() && !this.hasInvalidDimensions()) {
+                this.emit("LOADED_META_DATA");
+                this.onLoadedMetaDataReached = true;
+                fireCallbacks();
+            }
         };
-    }
-    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 (errorListeners?.length) this.emit("ERROR", {
-                exc
+            const videoTrack = media_getFirstVideoTrack(localMediaStream);
+            this.videoTrackLabel = 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 {
-                this.options.logger.debug("Recorder: no error listeners attached but throwing exception further");
-                throw exc;
+                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");
+            this.rawVisualUserMedia?.addEventListener("loadedmetadata", onLoadedMetaData);
+            this.rawVisualUserMedia?.addEventListener("play", onPlay);
+            this.rawVisualUserMedia?.removeEventListener("error", this.handleMediaError);
+            this.rawVisualUserMedia?.addEventListener("error", this.handleMediaError);
+            this.setVisualStream(localMediaStream);
+            play();
+        } catch (exc) {
+            unloadAllEventListeners();
+            endedEarlyCallback(exc);
         }
     }
-    executeCommand(command) {
-        if (this.unloaded) return;
+    getVideoTrackLabel() {
+        return this.videoTrackLabel;
+    }
+    isReady() {
+        return Boolean(this.rawVisualUserMedia?.srcObject || this.rawVisualUserMedia?.currentSrc);
+    }
+    stop(visualStream, params) {
         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":
-                    {
-                        let explanation = "(No explanation given)";
-                        if (command.args?.err?.message) explanation = command.args.err.message;
-                        const err = error_createError({
-                            message: "Websocket error from Videomail server",
-                            explanation,
-                            err: deserializeError(command.args?.err),
-                            options: this.options
-                        });
-                        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;
-                    }
+            let chosenStream = visualStream;
+            if (!params?.aboutToInitialize) {
+                this.initializationId++;
+                this.clearInitializationListeners?.();
+                chosenStream ??= this.currentVisualStream;
+                const tracks = chosenStream?.getTracks();
+                if (tracks) tracks.forEach((track)=>{
+                    track.stop();
+                });
+                this.setVisualStream();
+                this.audioRecorder?.stop();
+                this.audioRecorder = void 0;
             }
+            if (!params?.preserveRecordingState) this.paused = this.recording = false;
         } catch (exc) {
             this.emit("ERROR", {
                 exc
             });
         }
     }
-    isNotifying() {
-        return this.visuals.isNotifying();
-    }
-    isHidden() {
-        return !this.recorderElement || html_isHidden(this.recorderElement);
-    }
-    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);
-            });
-        }
-    }
-    cancelAnimationFrame() {
-        this.loop?.dispose();
-    }
-    getIntervalSum() {
-        if (!this.loop) return;
-        return this.loop.getElapsedTime();
-    }
-    getAvgInterval() {
-        const intervalSum = this.getIntervalSum() ?? 0;
-        if (!this.hasValidInterval(intervalSum)) return;
-        return intervalSum / this.framesCount;
-    }
-    getAvgFps() {
-        const intervalSum = this.getIntervalSum() ?? 0;
-        if (!this.hasValidInterval(intervalSum)) return;
-        return this.framesCount / intervalSum * 1000;
-    }
-    hasValidInterval(intervalSum) {
-        return intervalSum > 0;
-    }
-    getRecordingStats() {
-        return this.recordingStats;
-    }
-    getAudioSampleRate() {
-        return this.recordingAudioSampleRate ?? this.userMedia?.getAudioSampleRate();
-    }
-    stop(params) {
-        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 = params?.limitReached;
-        this.emit("STOPPING", {
-            limitReached
-        });
-        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) {
-                this.recordingStats.samplesCount = this.samplesCount;
-                this.recordingStats.sampleRate = this.recordingAudioSampleRate ?? this.userMedia.getAudioSampleRate();
-            }
-            this.writeCommand("stop", this.recordingStats, ()=>{
-                this.emit("STOPPED", {
-                    recordingStats: this.recordingStats
-                });
-            });
-            this.reset();
-        }, 60);
+    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;
     }
-    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);
+    getVideoHeight() {
+        if (!this.rawVisualUserMedia) return;
+        return this.rawVisualUserMedia.videoHeight || this.rawVisualUserMedia.height;
     }
-    reInitializeAudio() {
-        this.options.logger.debug("Recorder: reInitializeAudio()");
-        this.clearUserMediaTimeout();
-        this.userMediaLoading = false;
-        this.userMedia?.stop();
-        this.recordingDimensions = void 0;
-        this.userMediaLoaded = this.key = this.canvas = this.ctx = void 0;
-        this.loadUserMedia();
+    getVideoWidth() {
+        if (!this.rawVisualUserMedia) return;
+        return this.rawVisualUserMedia.videoWidth || this.rawVisualUserMedia.width;
     }
-    unload(params) {
-        if (this.unloaded || !this.built) return;
-        const e = 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;
+    hasVideoWidth() {
+        const videoWidth = this.getVideoWidth();
+        return videoWidth && videoWidth > 0;
     }
-    reset() {
-        this.cancelCameraRecovery();
-        if (!this.unloaded) {
-            this.options.logger.debug("Recorder: reset()");
-            this.emit("RESETTING");
-            this.cancelAnimationFrame();
-            this.userMedia?.stop();
-            this.replay.reset();
-            this.userMediaLoaded = this.key = this.canvas = this.ctx = this.recordingBuffer = void 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 = widthDimension?.value;
         }
+        widthDimension.value = rawWidth;
+        return widthDimension;
     }
-    clearUserMediaTimeout() {
-        if (void 0 !== this.userMediaTimeout) {
-            this.options.logger.debug("Recorder: clearUserMediaTimeout()");
-            window.clearTimeout(this.userMediaTimeout);
-            this.userMediaTimeout = void 0;
+    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;
     }
-    clearStopTimeout() {
-        if (void 0 === this.stopTimeout) return;
-        window.clearTimeout(this.stopTimeout);
-        this.stopTimeout = void 0;
-    }
-    validate() {
-        return Boolean(this.key) && void 0 === this.canvas;
+    getRawVisuals() {
+        return this.rawVisualUserMedia;
     }
-    isReady() {
-        return this.userMedia?.isReady();
+    pause() {
+        this.paused = true;
     }
-    finishCameraRecovery(restored) {
-        this.clearUserMediaTimeout();
-        const resolve = this.resolveCameraRecovery;
-        const resumeRequested = restored && this.resumeAfterCameraRecovery;
-        this.cameraRecovery = void 0;
-        this.resolveCameraRecovery = void 0;
-        this.resumeAfterCameraRecovery = false;
-        resolve?.(restored);
-        if (resumeRequested && this.isPaused()) this.resume();
+    isPaused() {
+        return this.paused;
     }
-    cancelCameraRecovery() {
-        if (!this.cameraRecovery) return;
-        this.mediaRequestId++;
-        this.userMediaLoading = false;
-        this.userMediaLoaded = false;
-        this.clearUserMediaTimeout();
-        this.userMedia?.stop(void 0, {
-            preserveRecordingState: true
-        });
-        this.finishCameraRecovery(false);
+    resume() {
+        this.paused = false;
     }
-    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
-        });
+    record() {
+        this.recording = true;
     }
-    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;
+    isRecording() {
+        return this.recording;
     }
-    pause(params) {
-        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}`);
-        this.userMedia?.pause();
-        this.loop.stop();
-        this.emit("PAUSED");
-        this.sendPings();
+    getAudioSampleRate() {
+        if (this.audioRecorder) return this.audioRecorder.getSampleRate();
+        return -1;
     }
-    resume() {
-        if (this.cameraRecovery || !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();
+    getCharacteristics() {
+        return {
+            audioSampleRate: this.getAudioSampleRate(),
+            muted: this.rawVisualUserMedia?.muted,
+            width: this.rawVisualUserMedia?.width,
+            height: this.rawVisualUserMedia?.height,
+            videoWidth: this.rawVisualUserMedia?.videoWidth,
+            videoHeight: this.rawVisualUserMedia?.videoHeight
+        };
     }
-    onFlushed(opts) {
-        const frameNumber = opts.frameNumber;
-        if (1 === frameNumber) this.emit("FIRST_FRAME_SENT");
+    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)=>{
+            this.logEvent(e.type, {
+                readyState: this.rawVisualUserMedia?.readyState
+            });
+            this.rawVisualUserMedia?.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)=>{
+            this.rawVisualUserMedia?.addEventListener(eventName, this.outputEvent, false);
+        });
     }
-    draw(_deltaTime, elapsedTime) {
-        if (this.recordingTransportFailed) return;
-        if (!this.userMedia) throw new Error("No user media defined, unable to draw on canvas");
+}
+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) {
-                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 = this.frame?.toBuffer();
-                const recordingBufferLength = 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":
+                    {
+                        let explanation = "(No explanation given)";
+                        if (command.args?.err?.message) explanation = command.args.err.message;
+                        const err = error_createError({
+                            message: "Websocket error from Videomail server",
+                            explanation,
+                            err: deserializeError(command.args?.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", {
@@ -7928,156 +8282,34 @@ class Recorder extends util_Despot {
             });
         }
     }
-    createLoop() {
-        const newLoop = animitter({
-            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(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 = 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 (recorderWidth?.value) this.recorderElement.width = recorderWidth.value;
-                else this.recorderElement.style.removeProperty("width");
-            }
-            if (this.options.video.height) {
-                const recorderHeight = this.getRecorderHeight(true);
-                if (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()");
@@ -8149,100 +8381,20 @@ class Recorder extends util_Despot {
         }
         this.built = true;
     }
-    isPaused() {
-        return this.userMedia?.isPaused() && !this.loop.isRunning();
-    }
-    isRecording() {
-        return Boolean(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) {
-        if (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 && {
-            ...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;
@@ -8259,14 +8411,14 @@ class Recorder extends util_Despot {
     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;
@@ -9158,7 +9310,8 @@ class Container extends util_Despot {
         }
         else runValidation = false;
         if (runValidation) {
-            const targetName = event?.target?.name;
+            const target = event?.target;
+            const targetName = target instanceof Element ? target.getAttribute("name") : void 0;
             if (targetName) this.emit("VALIDATING", {
                 targetName
             });
@@ -9193,27 +9346,10 @@ class Container extends util_Despot {
                     }
                 }
                 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;