react-mse-player 1.0.5 → 1.1.0

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -28,13 +28,112 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+var VideoShell = function (_a) {
+    var videoRef = _a.videoRef, _b = _a.width, width = _b === void 0 ? "100%" : _b, _c = _a.height, height = _c === void 0 ? "100%" : _c, _d = _a.controls, controls = _d === void 0 ? false : _d, _e = _a.autoPlay, autoPlay = _e === void 0 ? true : _e, _f = _a.objectFit, objectFit = _f === void 0 ? "contain" : _f, _g = _a.className, className = _g === void 0 ? "" : _g, _h = _a.style, style = _h === void 0 ? {} : _h, isLoading = _a.isLoading, status = _a.status, error = _a.error;
+    return (React.createElement("div", { className: className, style: __assign({ position: "relative", width: width, height: height }, style) },
+        React.createElement("video", { ref: videoRef, controls: controls, playsInline: true, muted: true, autoPlay: autoPlay, style: {
+                display: "block",
+                width: "100%",
+                height: "100%",
+                backgroundColor: "black",
+                objectFit: objectFit,
+            } }),
+        (isLoading || status === "error") && (React.createElement("div", { style: {
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                gap: 12,
+            } },
+            error && error.toString().toLowerCase().includes("stream not found") ? (React.createElement("div", { style: { color: "white", fontSize: 16 } }, "Stream not found")) : error && error.toString().toLowerCase().includes("connection failed") ? (React.createElement("div", { style: { color: "white", fontSize: 16 } }, "Connection failed")) : status === "error" ? (React.createElement("div", { style: { color: "white", fontSize: 16 } }, error)) : (React.createElement(React.Fragment, null,
+                React.createElement("div", { style: {
+                        width: 40,
+                        height: 40,
+                        border: "4px solid rgba(255,255,255,0.3)",
+                        borderTop: "4px solid white",
+                        borderRadius: "50%",
+                        animation: "spin 1s linear infinite",
+                    } }),
+                status === "reconnecting" && (React.createElement("div", { style: { color: "white", fontSize: 16 } }, "Reconnecting...")))),
+            React.createElement("style", null, "@keyframes spin { to { transform: rotate(360deg); } }")))));
+};
+
+function toWsUrl(src) {
+    if (src.startsWith("http"))
+        return "ws" + src.substring(4);
+    if (src.startsWith("/"))
+        return "ws" + window.location.origin.substring(4) + src;
+    return src;
+}
+function useVideoPlayer(onStatus, onError) {
+    var _a = useState("connecting"), status = _a[0], setStatus = _a[1];
+    var _b = useState(null), error = _b[0], setError = _b[1];
+    var _c = useState(false), isPlaying = _c[0], setIsPlaying = _c[1];
+    var onStatusRef = useRef(onStatus);
+    var onErrorRef = useRef(onError);
+    useEffect(function () { onStatusRef.current = onStatus; }, [onStatus]);
+    useEffect(function () { onErrorRef.current = onError; }, [onError]);
+    var updateStatus = function (s) {
+        var _a;
+        setStatus(s);
+        (_a = onStatusRef.current) === null || _a === void 0 ? void 0 : _a.call(onStatusRef, s);
+    };
+    var updateError = function (e) {
+        var _a;
+        setError(e);
+        (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, e);
+    };
+    return { status: status, error: error, isPlaying: isPlaying, setIsPlaying: setIsPlaying, updateStatus: updateStatus, updateError: updateError };
+}
+
 var MSEVideoStream = function (_a) {
-    var src = _a.src, _b = _a.width, width = _b === void 0 ? "100%" : _b, _c = _a.height, height = _c === void 0 ? "100%" : _c, _d = _a.controls, controls = _d === void 0 ? false : _d, _e = _a.autoPlay, autoPlay = _e === void 0 ? true : _e, _f = _a.media, media = _f === void 0 ? "video,audio" : _f, onStatus = _a.onStatus, onError = _a.onError, _g = _a.className, className = _g === void 0 ? "" : _g, _h = _a.style, style = _h === void 0 ? {} : _h, _j = _a.dataTimeout, dataTimeout = _j === void 0 ? 3000 : _j, _k = _a.objectFit, objectFit = _k === void 0 ? "contain" : _k;
+    var src = _a.src, _b = _a.width, width = _b === void 0 ? "100%" : _b, _c = _a.height, height = _c === void 0 ? "100%" : _c, _d = _a.controls, controls = _d === void 0 ? false : _d, _e = _a.autoPlay, autoPlay = _e === void 0 ? true : _e, _f = _a.media, media = _f === void 0 ? "video,audio" : _f, onStatus = _a.onStatus, onError = _a.onError, _g = _a.className, className = _g === void 0 ? "" : _g, _h = _a.style, style = _h === void 0 ? {} : _h, _j = _a.dataTimeout, dataTimeout = _j === void 0 ? 10000 : _j, _k = _a.objectFit, objectFit = _k === void 0 ? "contain" : _k, _l = _a.debug, debug = _l === void 0 ? false : _l;
     var videoRef = useRef(null);
     var stateRef = useRef({
         ws: null,
@@ -51,28 +150,8 @@ var MSEVideoStream = function (_a) {
     });
     // Track connection start time for smart reconnect delay
     var connectTSRef = useRef(0);
-    var _l = useState("connecting"), status = _l[0], setStatus = _l[1];
-    var _m = useState(null), error = _m[0], setError = _m[1];
-    var _o = useState(false); _o[0]; var setHasReceivedData = _o[1];
-    var _p = useState(false), isPlaying = _p[0], setIsPlaying = _p[1];
-    var onStatusRef = useRef(onStatus);
-    var onErrorRef = useRef(onError);
-    useEffect(function () {
-        onStatusRef.current = onStatus;
-    }, [onStatus]);
-    useEffect(function () {
-        onErrorRef.current = onError;
-    }, [onError]);
-    var updateStatus = function (s) {
-        var _a;
-        setStatus(s);
-        (_a = onStatusRef.current) === null || _a === void 0 ? void 0 : _a.call(onStatusRef, s);
-    };
-    var updateError = function (e) {
-        var _a;
-        setError(e);
-        (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, e);
-    };
+    var _m = useState(false), setHasReceivedData = _m[1];
+    var _o = useVideoPlayer(onStatus, onError), status = _o.status, error = _o.error, isPlaying = _o.isPlaying, setIsPlaying = _o.setIsPlaying, updateStatus = _o.updateStatus, updateError = _o.updateError;
     // Codecs list from VideoRTC
     var codecsRef = useRef([
         "avc1.640029", // H.264 high 4.1 (Chromecast 1st and 2nd Gen)
@@ -107,10 +186,7 @@ var MSEVideoStream = function (_a) {
                 videoRef.current.play().catch(function () { });
             }
         };
-        // Track when video actually starts playing to hide spinner
-        var handlePlaying = function () {
-            setIsPlaying(true);
-        };
+        var handlePlaying = function () { return setIsPlaying(true); };
         videoRef.current.addEventListener("pause", handlePause);
         videoRef.current.addEventListener("playing", handlePlaying);
         var cleanup = function () {
@@ -130,7 +206,6 @@ var MSEVideoStream = function (_a) {
                 state.sbUpdateHandler = null;
             }
             if (state.ws) {
-                // Prevent onclose iteration if we are manually closing
                 state.ws.onclose = null;
                 state.ws.close();
                 state.ws = null;
@@ -162,16 +237,25 @@ var MSEVideoStream = function (_a) {
             setHasReceivedData(false);
             setIsPlaying(false);
         };
-        var reconnect = function () {
+        var reconnect = function (reason) {
             if (!state.isMounted || state.isReconnecting)
                 return;
+            if (debug)
+                console.log("[MSEVideoStream] Starting reconnect sequence. Reason: ".concat(reason));
             state.isReconnecting = true;
             cleanup();
             updateStatus("reconnecting");
             state.reconnectTimer = setTimeout(function () {
                 state.isReconnecting = false;
                 if (state.isMounted) {
-                    connect();
+                    try {
+                        connect();
+                    }
+                    catch (e) {
+                        if (debug)
+                            console.error("[MSEVideoStream] Reconnect failed synchronously:", e);
+                        reconnect("SyncError");
+                    }
                 }
             }, 2000);
         };
@@ -179,26 +263,23 @@ var MSEVideoStream = function (_a) {
             if (state.stalledCheckTimer)
                 clearInterval(state.stalledCheckTimer);
             state.stalledCheckTimer = setInterval(function () {
-                // Only check for stalls if we've received at least one data packet
                 if (!state.hasReceivedData || !state.lastDataTime)
                     return;
                 var now = Date.now();
-                // If background, use lenient 15s threshold to allow for browser throttling
-                // If foreground, use standard timeout (default 3s)
                 var threshold = document.hidden ? 15000 : dataTimeout;
                 if (now - state.lastDataTime > threshold) {
-                    // console.warn("Stall detected", now - state.lastDataTime);
-                    reconnect();
+                    if (debug)
+                        console.warn("[MSEVideoStream] Stall detected! Time since last data: ".concat(now - state.lastDataTime, "ms, Threshold: ").concat(threshold, "ms"));
+                    reconnect("Stall");
                 }
             }, 1000);
         };
         var onMSE = function (ms, codecString) {
             if (!state.ms)
-                return; // Cleanup happened?
+                return;
             var sb = ms.addSourceBuffer(codecString);
             sb.mode = "segments";
             state.sbUpdateHandler = function () {
-                // 1. Append pending data
                 if (!sb.updating && state.buffer.length > 0) {
                     try {
                         var data = state.buffer.data.subarray(0, state.buffer.length);
@@ -209,7 +290,6 @@ var MSEVideoStream = function (_a) {
                         /* ignore */
                     }
                 }
-                // 2. Buffer management and smooth playback sync (VideoRTC logic)
                 if (!sb.updating &&
                     sb.buffered &&
                     sb.buffered.length > 0 &&
@@ -218,28 +298,20 @@ var MSEVideoStream = function (_a) {
                     var end = sb.buffered.end(sb.buffered.length - 1);
                     var start = end - 5;
                     var start0 = sb.buffered.start(0);
-                    // Trim everything older than 5 seconds from the end
                     if (start > start0) {
                         try {
                             sb.remove(start0, start);
-                            // Set live seekable range so the browser knows where we are
                             if (ms.setLiveSeekableRange) {
                                 ms.setLiveSeekableRange(start, end);
                             }
                         }
                         catch (e) { }
                     }
-                    // Jump forward if we fell behind the buffer window
                     if (video.currentTime < start) {
                         video.currentTime = start;
                     }
-                    // Smooth playrate adjustment
                     var gap = end - video.currentTime;
-                    // "gap > 0.1 ? gap : 0.1" logic from VideoRTC
-                    // This effectively slows down playback if we are too close to end (to avoid stall)
-                    // And speeds up playback to match gap if we are behind.
                     video.playbackRate = gap > 0.1 ? gap : 0.1;
-                    // Ensure we are playing
                     if (video.paused && !video.ended && video.readyState > 2) {
                         video.play().catch(function () { });
                     }
@@ -248,7 +320,6 @@ var MSEVideoStream = function (_a) {
             sb.addEventListener("updateend", state.sbUpdateHandler);
             state.sb = sb;
             updateStatus("streaming");
-            // Start checking for stalls once we have the source buffer set up
             state.lastDataTime = Date.now();
             startStalledCheck();
         };
@@ -298,22 +369,27 @@ var MSEVideoStream = function (_a) {
                     videoRef.current.src = URL.createObjectURL(state.ms);
                     videoRef.current.srcObject = null;
                 }
-                // Ensure play is called
                 videoRef.current.play().catch(function () { });
             }
         };
         var connect = function () {
             updateStatus("connecting");
             connectTSRef.current = Date.now();
-            state.lastDataTime = Date.now(); // Initialize to avoid immediate stall detection
-            var wsURL = src;
-            if (wsURL.startsWith("http")) {
-                wsURL = "ws" + wsURL.substring(4);
+            state.lastDataTime = Date.now();
+            var wsURL = toWsUrl(src);
+            if (debug)
+                console.log("[MSEVideoStream] Connecting to:", wsURL);
+            var ws;
+            try {
+                ws = new WebSocket(wsURL);
             }
-            else if (wsURL.startsWith("/")) {
-                wsURL = "ws" + window.location.origin.substring(4) + wsURL;
+            catch (err) {
+                if (debug)
+                    console.error("[MSEVideoStream] WebSocket creation failed synchronously:", err);
+                updateError(err);
+                reconnect("WSCreationFail");
+                return;
             }
-            var ws = new WebSocket(wsURL);
             ws.binaryType = "arraybuffer";
             state.ws = ws;
             ws.onopen = function () {
@@ -328,24 +404,30 @@ var MSEVideoStream = function (_a) {
                         onMSE(state.ms, msg.value);
                     }
                     else if (msg.type === "error") {
-                        console.warn("MSE Error:", msg.value);
+                        if (debug)
+                            console.warn("MSE Error:", msg.value);
                         updateError(msg.value);
-                        reconnect();
+                        reconnect("ServerMsgError");
                     }
                 }
                 else {
-                    appendData(ev.data);
+                    try {
+                        appendData(ev.data);
+                    }
+                    catch (e) {
+                        if (debug)
+                            console.error("AppendData error", e);
+                    }
                 }
             };
             ws.onclose = function () {
                 if (state.ws === ws) {
                     state.ws = null;
                     updateStatus("closed");
-                    reconnect();
+                    reconnect("WSClosed");
                 }
             };
             ws.onerror = function () {
-                // VideoRTC mostly handles onclose for reconnect logic
                 updateError("Connection failed");
             };
         };
@@ -362,38 +444,240 @@ var MSEVideoStream = function (_a) {
     var isLoading = status === "connecting" ||
         status === "reconnecting" ||
         (status === "streaming" && !isPlaying);
-    return (React.createElement("div", { className: className, style: __assign({ position: "relative", width: width, height: height }, style) },
-        React.createElement("video", { ref: videoRef, controls: controls, playsInline: true, muted: true, autoPlay: autoPlay, style: {
-                display: "block",
-                width: "100%",
-                height: "100%",
-                backgroundColor: "black",
-                objectFit: objectFit,
-            } }),
-        (isLoading || status === "error") && (React.createElement("div", { style: {
-                position: "absolute",
-                top: "50%",
-                left: "50%",
-                transform: "translate(-50%, -50%)",
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                gap: 12,
-            } },
-            error &&
-                error.toString().toLowerCase().includes("stream not found") ? (React.createElement("div", { style: { color: "white", fontSize: 16 } }, "Stream not found")) : error &&
-                error.toString().toLowerCase().includes("connection failed") ? (React.createElement("div", { style: { color: "white", fontSize: 16 } }, "Connection failed")) : status === "error" ? (React.createElement("div", { style: { color: "white", fontSize: 16 } }, error)) : (React.createElement(React.Fragment, null,
-                React.createElement("div", { style: {
-                        width: 40,
-                        height: 40,
-                        border: "4px solid rgba(255,255,255,0.3)",
-                        borderTop: "4px solid white",
-                        borderRadius: "50%",
-                        animation: "spin 1s linear infinite",
-                    } }),
-                status === "reconnecting" && (React.createElement("div", { style: { color: "white", fontSize: 16 } }, "Reconnecting...")))),
-            React.createElement("style", null, "@keyframes spin { to { transform: rotate(360deg); } }")))));
+    return (React.createElement(VideoShell, { videoRef: videoRef, width: width, height: height, controls: controls, autoPlay: autoPlay, objectFit: objectFit, className: className, style: style, isLoading: isLoading, status: status, error: error }));
+};
+
+var DEFAULT_PC_CONFIG = {
+    bundlePolicy: "max-bundle",
+    iceServers: [
+        {
+            urls: ["stun:stun.cloudflare.com:3478", "stun:stun.l.google.com:19302"],
+        },
+    ],
+};
+var RECONNECT_TIMEOUT = 15000;
+var RECONNECT_DELAY = 2000;
+var WebRTCVideoStream = function (_a) {
+    var src = _a.src, _b = _a.width, width = _b === void 0 ? "100%" : _b, _c = _a.height, height = _c === void 0 ? "100%" : _c, _d = _a.controls, controls = _d === void 0 ? false : _d, _e = _a.autoPlay, autoPlay = _e === void 0 ? true : _e, _f = _a.media, media = _f === void 0 ? "video,audio" : _f, _g = _a.mode, mode = _g === void 0 ? "webrtc" : _g, pcConfig = _a.pcConfig, onStatus = _a.onStatus, onError = _a.onError, _h = _a.className, className = _h === void 0 ? "" : _h, _j = _a.style, style = _j === void 0 ? {} : _j, _k = _a.objectFit, objectFit = _k === void 0 ? "contain" : _k, _l = _a.debug, debug = _l === void 0 ? false : _l;
+    var videoRef = useRef(null);
+    var stateRef = useRef({
+        ws: null,
+        pc: null,
+        isMounted: true,
+        isReconnecting: false,
+        reconnectTimer: null,
+        connectTS: 0,
+    });
+    var _m = useVideoPlayer(onStatus, onError), status = _m.status, error = _m.error, isPlaying = _m.isPlaying, setIsPlaying = _m.setIsPlaying, updateStatus = _m.updateStatus, updateError = _m.updateError;
+    useEffect(function () {
+        if (!src || !videoRef.current)
+            return;
+        var state = stateRef.current;
+        state.isMounted = true;
+        state.isReconnecting = false;
+        var effectPcConfig = pcConfig !== null && pcConfig !== void 0 ? pcConfig : DEFAULT_PC_CONFIG;
+        var handlePlaying = function () { return setIsPlaying(true); };
+        videoRef.current.addEventListener("playing", handlePlaying);
+        var cleanup = function () {
+            if (state.reconnectTimer) {
+                clearTimeout(state.reconnectTimer);
+                state.reconnectTimer = null;
+            }
+            if (state.pc) {
+                state.pc.getSenders().forEach(function (sender) { var _a; return (_a = sender.track) === null || _a === void 0 ? void 0 : _a.stop(); });
+                state.pc.close();
+                state.pc = null;
+            }
+            if (state.ws) {
+                state.ws.onclose = null;
+                state.ws.close();
+                state.ws = null;
+            }
+            if (videoRef.current) {
+                videoRef.current.srcObject = null;
+            }
+        };
+        var reconnect = function (reason) {
+            if (!state.isMounted || state.isReconnecting)
+                return;
+            if (debug)
+                console.log("[WebRTCVideoStream] Reconnecting. Reason: ".concat(reason));
+            state.isReconnecting = true;
+            cleanup();
+            updateStatus("reconnecting");
+            setIsPlaying(false);
+            var elapsed = Date.now() - state.connectTS;
+            var delay = Math.max(RECONNECT_DELAY, RECONNECT_TIMEOUT - elapsed);
+            state.reconnectTimer = setTimeout(function () {
+                state.isReconnecting = false;
+                if (state.isMounted)
+                    connect();
+            }, delay);
+        };
+        var createOffer = function (pc) { return __awaiter(void 0, void 0, void 0, function () {
+            var stream, e_1, _i, _a, kind, offer;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!media.includes("microphone")) return [3 /*break*/, 4];
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, navigator.mediaDevices.getUserMedia({ audio: true })];
+                    case 2:
+                        stream = _b.sent();
+                        stream.getTracks().forEach(function (track) {
+                            return pc.addTransceiver(track, { direction: "sendonly" });
+                        });
+                        return [3 /*break*/, 4];
+                    case 3:
+                        e_1 = _b.sent();
+                        console.warn("[WebRTCVideoStream] Microphone access denied:", e_1);
+                        return [3 /*break*/, 4];
+                    case 4:
+                        for (_i = 0, _a = ["video", "audio"]; _i < _a.length; _i++) {
+                            kind = _a[_i];
+                            if (media.includes(kind)) {
+                                pc.addTransceiver(kind, { direction: "recvonly" });
+                            }
+                        }
+                        return [4 /*yield*/, pc.createOffer()];
+                    case 5:
+                        offer = _b.sent();
+                        return [4 /*yield*/, pc.setLocalDescription(offer)];
+                    case 6:
+                        _b.sent();
+                        return [2 /*return*/, offer];
+                }
+            });
+        }); };
+        var connect = function () {
+            updateStatus("connecting");
+            updateError(null);
+            state.connectTS = Date.now();
+            var wsURL = toWsUrl(src);
+            if (debug)
+                console.log("[WebRTCVideoStream] Connecting to:", wsURL);
+            var ws;
+            try {
+                ws = new WebSocket(wsURL);
+            }
+            catch (err) {
+                if (debug)
+                    console.error("[WebRTCVideoStream] WebSocket creation failed:", err);
+                updateError(err);
+                reconnect("WSCreationFail");
+                return;
+            }
+            state.ws = ws;
+            ws.onopen = function () {
+                if (debug)
+                    console.log("[WebRTCVideoStream] WebSocket open, setting up PeerConnection");
+                updateStatus("open");
+                var pc = new RTCPeerConnection(effectPcConfig);
+                state.pc = pc;
+                pc.addEventListener("icecandidate", function (ev) {
+                    if (ev.candidate && mode === "webrtc/tcp" && ev.candidate.protocol === "udp")
+                        return;
+                    var candidate = ev.candidate ? ev.candidate.toJSON().candidate : "";
+                    ws.send(JSON.stringify({ type: "webrtc/candidate", value: candidate }));
+                });
+                pc.addEventListener("connectionstatechange", function () {
+                    var _a;
+                    if (debug)
+                        console.log("[WebRTCVideoStream] PC state:", pc.connectionState);
+                    if (pc.connectionState === "connected") {
+                        updateStatus("connected");
+                        var tracks = pc
+                            .getTransceivers()
+                            .filter(function (tr) { return tr.currentDirection === "recvonly"; })
+                            .map(function (tr) { return tr.receiver.track; });
+                        if (videoRef.current && tracks.length > 0) {
+                            videoRef.current.srcObject = new MediaStream(tracks);
+                            videoRef.current.play().catch(function () {
+                                if (videoRef.current && !videoRef.current.muted) {
+                                    videoRef.current.muted = true;
+                                    videoRef.current.play().catch(function (e) { return console.warn(e); });
+                                }
+                            });
+                        }
+                        // WebRTC is up — close the WS (signalling only)
+                        (_a = state.ws) === null || _a === void 0 ? void 0 : _a.close();
+                        state.ws = null;
+                    }
+                    else if (pc.connectionState === "failed" ||
+                        pc.connectionState === "disconnected") {
+                        pc.close();
+                        state.pc = null;
+                        reconnect("PCState:".concat(pc.connectionState));
+                    }
+                });
+                ws.onmessage = function (ev) {
+                    if (typeof ev.data !== "string")
+                        return;
+                    var msg = JSON.parse(ev.data);
+                    if (debug)
+                        console.log("[WebRTCVideoStream] WS message:", msg.type);
+                    switch (msg.type) {
+                        case "webrtc/candidate":
+                            if (mode === "webrtc/tcp" && msg.value.includes(" udp "))
+                                return;
+                            pc.addIceCandidate({ candidate: msg.value, sdpMid: "0" }).catch(function (e) {
+                                return console.warn("[WebRTCVideoStream] addIceCandidate error:", e);
+                            });
+                            break;
+                        case "webrtc/answer":
+                            pc.setRemoteDescription({ type: "answer", sdp: msg.value }).catch(function (e) {
+                                return console.warn("[WebRTCVideoStream] setRemoteDescription error:", e);
+                            });
+                            break;
+                        case "error":
+                            if (!msg.value.includes("webrtc"))
+                                return;
+                            updateError(msg.value);
+                            pc.close();
+                            state.pc = null;
+                            reconnect("ServerError");
+                            break;
+                    }
+                };
+                createOffer(pc)
+                    .then(function (offer) {
+                    ws.send(JSON.stringify({ type: "webrtc/offer", value: offer.sdp }));
+                })
+                    .catch(function (e) {
+                    console.error("[WebRTCVideoStream] createOffer failed:", e);
+                    updateError(e);
+                    reconnect("OfferFailed");
+                });
+            };
+            ws.onclose = function () {
+                if (state.ws === ws) {
+                    state.ws = null;
+                    if (!state.pc || state.pc.connectionState !== "connected") {
+                        updateStatus("closed");
+                        reconnect("WSClosed");
+                    }
+                }
+            };
+            ws.onerror = function () {
+                updateError("Connection failed");
+            };
+        };
+        connect();
+        return function () {
+            state.isMounted = false;
+            if (videoRef.current) {
+                videoRef.current.removeEventListener("playing", handlePlaying);
+            }
+            cleanup();
+        };
+    }, [src, media, mode]);
+    var isLoading = status === "connecting" ||
+        status === "reconnecting" ||
+        (status === "connected" && !isPlaying);
+    return (React.createElement(VideoShell, { videoRef: videoRef, width: width, height: height, controls: controls, autoPlay: autoPlay, objectFit: objectFit, className: className, style: style, isLoading: isLoading, status: status, error: error }));
 };
 
-export { MSEVideoStream, MSEVideoStream as default };
+export { MSEVideoStream, WebRTCVideoStream, MSEVideoStream as default };
 //# sourceMappingURL=index.esm.js.map