@flyfish-dev/rtsp-player 0.1.23

package/dist/rtsp-player.esm.js

@@ -0,0 +1,922 @@
+// RTSP SDK 0.1.23 - generated by scripts/build-sdk.mjs
+const DEFAULT_TAG_NAME = "rtsp-player";
+const DEFAULT_WIDTH = "640px";
+const DEFAULT_HEIGHT = "360px";
+
+const globalConfig = {
+  extensionId: "",
+  tagName: DEFAULT_TAG_NAME,
+  runtime: "extension",
+};
+
+const frameOwners = new WeakMap();
+const MAX_RECOVERY_ATTEMPTS = 6;
+const RECOVERY_BASE_DELAY_MS = 700;
+const RECOVERY_MAX_DELAY_MS = 8000;
+const WEBSOCKET_FIRST_FRAME_TIMEOUT_MS = 45000;
+const WEBSOCKET_KEYFRAME_NOTICE_MS = 3000;
+const WEBRTC_FIRST_FRAME_TIMEOUT_MS = 5000;
+
+function currentScriptExtensionId() {
+  if (typeof document === "undefined") return "";
+  const script = document.currentScript;
+  return script?.dataset?.extensionId || "";
+}
+
+function normalizeExtensionId(value) {
+  return String(value || "").trim().replace(/^chrome-extension:\/\//, "").replace(/\/.*$/, "");
+}
+
+function extensionOrigin(extensionId) {
+  const id = normalizeExtensionId(extensionId);
+  return id ? `chrome-extension://${id}` : "";
+}
+
+function toCssSize(value, fallback) {
+  if (value === undefined || value === null || value === "") return fallback;
+  const text = String(value);
+  return /^\d+$/.test(text) ? `${text}px` : text;
+}
+
+function setBooleanAttribute(el, name, enabled) {
+  if (enabled === undefined) return;
+  if (enabled) el.setAttribute(name, "");
+  else el.removeAttribute(name);
+}
+
+function normalizeRuntime(value) {
+  const text = String(value || "").trim().toLowerCase();
+  if (text === "desktop" || text === "auto" || text === "extension") return text;
+  return "extension";
+}
+
+function normalizeMediaTransport(value) {
+  const text = String(value || "").trim().toLowerCase();
+  if (text === "webrtc" || text === "ws-annexb" || text === "auto") return text;
+  return "auto";
+}
+
+function normalizeCodec(value) {
+  const text = String(value || "").trim().toLowerCase();
+  if (text === "h265" || text === "hevc") return "h265";
+  if (text === "h264" || text === "avc") return "h264";
+  return "auto";
+}
+
+function desktopBridge() {
+  if (typeof window === "undefined") return null;
+  return window.rtspNative || window.__RTSP_DESKTOP__ || null;
+}
+
+function canUseDesktopRuntime() {
+  return Boolean(desktopBridge()?.startStream);
+}
+
+function dispatch(el, type, detail = {}) {
+  el.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+}
+
+export const RTSP_PLAYER_VERSION = "0.1.23";
+
+export function configureRTSP(options = {}) {
+  if (options.extensionId !== undefined) {
+    globalConfig.extensionId = normalizeExtensionId(options.extensionId);
+  }
+  if (options.tagName) {
+    globalConfig.tagName = String(options.tagName);
+  }
+  if (options.runtime) {
+    globalConfig.runtime = normalizeRuntime(options.runtime);
+  }
+  return { ...globalConfig };
+}
+
+export async function probeRTSPCapabilities(codec = "auto") {
+  const want = normalizeCodec(codec);
+  const capabilities = {
+    desktopRuntime: canUseDesktopRuntime(),
+    webcodecs: "VideoDecoder" in globalThis,
+    webrtc: "RTCPeerConnection" in globalThis,
+    h264WebRTC: false,
+    h265WebRTC: false,
+    h264WebCodecs: false,
+    h265WebCodecs: false,
+  };
+  try {
+    const receiverCaps = globalThis.RTCRtpReceiver?.getCapabilities?.("video");
+    const names = (receiverCaps?.codecs || []).map((item) => String(item.mimeType || "").toLowerCase());
+    capabilities.h264WebRTC = names.includes("video/h264");
+    capabilities.h265WebRTC = names.includes("video/h265") || names.includes("video/hevc");
+  } catch {}
+  if (capabilities.webcodecs) {
+    try {
+      capabilities.h264WebCodecs = Boolean((await VideoDecoder.isConfigSupported({
+        codec: "avc1.42E01E",
+        hardwareAcceleration: "prefer-hardware",
+        optimizeForLatency: true,
+      })).supported);
+    } catch {}
+    try {
+      capabilities.h265WebCodecs = Boolean((await VideoDecoder.isConfigSupported({
+        codec: "hvc1.1.6.L93.B0",
+        hardwareAcceleration: "prefer-hardware",
+        optimizeForLatency: true,
+      })).supported);
+    } catch {}
+  }
+  capabilities.requestedCodec = want;
+  return capabilities;
+}
+
+export function defineRTSPPlayer(tagName = globalConfig.tagName || DEFAULT_TAG_NAME, options = {}) {
+  if (typeof window === "undefined" || typeof customElements === "undefined") {
+    return undefined;
+  }
+
+  configureRTSP(options);
+  const name = String(tagName || DEFAULT_TAG_NAME);
+  const existing = customElements.get(name);
+  if (existing) return existing;
+
+  class RTSPPlayerElement extends HTMLElement {
+    static get observedAttributes() {
+      return [
+        "url",
+        "src",
+        "width",
+        "height",
+        "autoplay",
+        "controls",
+        "muted",
+        "transport",
+        "media-transport",
+        "rtsp-transport",
+        "codec",
+        "runtime",
+        "extension-id",
+      ];
+    }
+
+    constructor() {
+      super();
+      this._iframe = null;
+      this._loaded = false;
+      this._player = null;
+      this._pc = null;
+      this._video = null;
+      this._mode = "";
+      this._streamId = "";
+      this._streamToken = "";
+      this._playGeneration = 0;
+      this._recoveryAttempts = 0;
+      this._recoveryTimer = 0;
+      this._userStopped = false;
+      this.attachShadow({ mode: "open" });
+    }
+
+    connectedCallback() {
+      this._render();
+    }
+
+    disconnectedCallback() {
+      this.stop();
+      if (this._iframe?.contentWindow) {
+        frameOwners.delete(this._iframe.contentWindow);
+      }
+    }
+
+    attributeChangedCallback(name) {
+      if (name === "runtime" || name === "extension-id") {
+        this.stop();
+        this._iframe = null;
+        this._loaded = false;
+        if (this.shadowRoot) this.shadowRoot.innerHTML = "";
+        this._render();
+        return;
+      }
+      this._resize();
+      if (this._mode === "extension") this._sendInit();
+      else if (this.hasAttribute("autoplay") && (name === "url" || name === "src")) this.play();
+    }
+
+    play(url) {
+      if (url) this.setAttribute("url", url);
+      if (this._mode === "extension") this._sendInit();
+      else this._startDesktop();
+    }
+
+    stop() {
+      this._userStopped = true;
+      this._playGeneration += 1;
+      this._clearRecoveryTimer();
+      this._recoveryAttempts = 0;
+      const streamId = this._streamId;
+      this._streamId = "";
+      this._streamToken = "";
+      if (this._iframe?.contentWindow) {
+        this._iframe.contentWindow.postMessage({ type: "RTSP_PLAYER_STOP" }, this._origin());
+      }
+      if (this._player) {
+        this._player.close();
+        this._player = null;
+      }
+      if (this._pc) {
+        try { this._pc.close(); } catch {}
+        this._pc = null;
+      }
+      if (this._video) {
+        try { this._video.srcObject = null; } catch {}
+        this._video.remove();
+        this._video = null;
+      }
+      const bridge = desktopBridge();
+      if (streamId && bridge?.stopStream) {
+        bridge.stopStream({ streamId }).catch?.(() => {});
+      }
+    }
+
+    async capabilities() {
+      return probeRTSPCapabilities(this._codec());
+    }
+
+    _runtime() {
+      const requested = normalizeRuntime(this.getAttribute("runtime") || globalConfig.runtime);
+      if (requested === "auto") return canUseDesktopRuntime() ? "desktop" : "extension";
+      return requested;
+    }
+
+    _extensionId() {
+      return normalizeExtensionId(
+        this.getAttribute("extension-id") ||
+        globalConfig.extensionId ||
+        window.RTSP_EXTENSION_ID ||
+        window.RTSP_WEB_PLAYER_EXTENSION_ID ||
+        currentScriptExtensionId(),
+      );
+    }
+
+    _origin() {
+      return extensionOrigin(this._extensionId());
+    }
+
+    _url() {
+      return this.getAttribute("url") || this.getAttribute("src") || "";
+    }
+
+    _rtspTransport() {
+      const explicit = this.getAttribute("rtsp-transport");
+      const legacy = this.getAttribute("transport");
+      if (explicit) return explicit;
+      if (legacy === "tcp" || legacy === "udp") return legacy;
+      return "tcp";
+    }
+
+    _mediaTransport() {
+      return normalizeMediaTransport(this.getAttribute("media-transport") || this.getAttribute("transport") || "auto");
+    }
+
+    _codec() {
+      return normalizeCodec(this.getAttribute("codec") || "auto");
+    }
+
+    _render() {
+      if (!this.shadowRoot || this.shadowRoot.innerHTML) return;
+      this._resize();
+      const runtime = this._runtime();
+      if (runtime === "desktop") this._renderDesktop();
+      else this._renderExtension();
+    }
+
+    _renderExtension() {
+      this._mode = "extension";
+      this.shadowRoot.innerHTML = `
+        <style>
+          :host{display:inline-block;background:#050505;min-width:160px;min-height:90px;contain:content;}
+          .rtsp-host{width:100%;height:100%;background:#050505;position:relative;overflow:hidden;border-radius:6px;}
+          iframe{width:100%;height:100%;border:0;background:#050505;display:block;}
+          .missing{height:100%;min-height:120px;display:flex;align-items:center;justify-content:center;background:#151515;color:#ddd;font:12px system-ui,sans-serif;text-align:center;padding:12px;box-sizing:border-box;}
+          .gateway-guide{height:100%;min-height:170px;display:grid;align-content:center;gap:10px;padding:18px;background:#111312;color:#e9ede8;font:13px system-ui,sans-serif;box-sizing:border-box;}
+          .gateway-guide strong{color:#f4f5f2;font-size:15px;}
+          .gateway-guide span{color:#b6bbb4;line-height:1.5;}
+          .gateway-guide a{display:inline-flex;width:max-content;max-width:100%;align-items:center;min-height:34px;padding:0 10px;border:1px solid #435048;border-radius:6px;background:#223423;color:#ecfff0;text-decoration:none;}
+        </style>
+        <div class="rtsp-host"></div>
+      `;
+      const host = this.shadowRoot.querySelector(".rtsp-host");
+      const origin = this._origin();
+      if (!origin) {
+        host.innerHTML = this._gatewayGuideHTML(
+          "需要安装 RTSP Gateway",
+          "普通网页不能直接访问 rtsp://。请先安装 RTSP Gateway 与 Chrome 扩展，或在 Electron/Tauri 中使用 desktop runtime bridge。",
+        );
+        return;
+      }
+      const iframe = document.createElement("iframe");
+      iframe.src = `${origin}/player/player.html`;
+      iframe.allow = "autoplay; fullscreen";
+      iframe.referrerPolicy = "no-referrer";
+      iframe.addEventListener("load", () => {
+        this._loaded = true;
+        frameOwners.set(iframe.contentWindow, this);
+        this._sendInit();
+      });
+      host.appendChild(iframe);
+      this._iframe = iframe;
+    }
+
+    _renderDesktop() {
+      this._mode = "desktop";
+      this.shadowRoot.innerHTML = `
+        <style>
+          :host{display:inline-block;background:#050505;min-width:160px;min-height:90px;contain:content;}
+          .rtsp-host{width:100%;height:100%;background:#050505;position:relative;overflow:hidden;border-radius:6px;}
+          canvas{width:100%;height:100%;display:block;background:#050505;}
+          .status{position:absolute;left:10px;right:10px;bottom:10px;padding:8px 10px;border-radius:6px;background:rgba(0,0,0,.62);color:#f5f5f5;font:12px system-ui,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+          .status.ok{color:#9ad29d}.status.error{color:#e08d7a}
+          .gateway-guide{position:absolute;inset:0;display:grid;align-content:center;gap:10px;padding:18px;background:#111312;color:#e9ede8;font:13px system-ui,sans-serif;box-sizing:border-box;}
+          .gateway-guide strong{color:#f4f5f2;font-size:15px;}
+          .gateway-guide span{color:#b6bbb4;line-height:1.5;}
+          .gateway-guide a{display:inline-flex;width:max-content;max-width:100%;align-items:center;min-height:34px;padding:0 10px;border:1px solid #435048;border-radius:6px;background:#223423;color:#ecfff0;text-decoration:none;}
+        </style>
+        <div class="rtsp-host">
+          <canvas part="canvas"></canvas>
+          <div class="status" part="status">Desktop runtime ready.</div>
+        </div>
+      `;
+      if (this.hasAttribute("autoplay") && this._url()) this._startDesktop();
+    }
+
+    _resize() {
+      this.style.width = toCssSize(this.getAttribute("width") || this.style.width, DEFAULT_WIDTH);
+      this.style.height = toCssSize(this.getAttribute("height") || this.style.height, DEFAULT_HEIGHT);
+    }
+
+    _sendInit() {
+      const origin = this._origin();
+      if (!this._loaded || !this._iframe?.contentWindow || !origin) return;
+      this._iframe.contentWindow.postMessage({
+        type: "RTSP_PLAYER_INIT",
+        url: this._url(),
+        autoplay: this.hasAttribute("autoplay"),
+        controls: this.hasAttribute("controls"),
+        muted: this.hasAttribute("muted"),
+        transport: this._rtspTransport(),
+        rtspTransport: this._rtspTransport(),
+        mediaTransport: this._mediaTransport(),
+        codec: this._codec(),
+      }, origin);
+    }
+
+    async _startDesktop() {
+      const bridge = desktopBridge();
+      const url = this._url().trim();
+      if (!bridge?.startStream) {
+        this._showGatewayGuide(
+          "未检测到 RTSP Gateway bridge",
+          "Web 组件免插件接入需要先安装 Gateway，并在页面中注入 window.rtspNative 或 window.__RTSP_DESKTOP__。",
+        );
+        this._status("Desktop runtime bridge is not available.", "error");
+        dispatch(this, "error", { error: "Desktop runtime bridge is not available." });
+        return;
+      }
+      if (!/^rtsps?:\/\//i.test(url)) {
+        this._status("RTSP URL must start with rtsp:// or rtsps://.", "error");
+        return;
+      }
+      this._stopMediaOnly();
+      this._userStopped = false;
+      this._clearRecoveryTimer();
+      this._recoveryAttempts = 0;
+      const generation = ++this._playGeneration;
+      dispatch(this, "starting", { runtime: "desktop", transport: this._mediaTransport(), codec: this._codec() });
+      this._status("Starting desktop runtime...");
+      const mediaTransport = this._mediaTransport();
+      const codec = this._codec();
+      if ((mediaTransport === "auto" || mediaTransport === "webrtc") && await this._canAttemptWebRTC(codec)) {
+        const started = await this._startWebRTC(bridge, url, codec, generation);
+        if (started) return;
+      }
+      await this._startWebSocket(bridge, url, codec, generation);
+    }
+
+    async _canAttemptWebRTC(codec) {
+      if (!("RTCPeerConnection" in window)) return false;
+      const caps = await probeRTSPCapabilities(codec);
+      if (codec === "h265") return caps.h265WebRTC;
+      if (codec === "h264") return caps.h264WebRTC;
+      return caps.h265WebRTC || caps.h264WebRTC;
+    }
+
+    async _startWebRTC(bridge, url, codec, generation) {
+      if (!bridge.createWebRTCOffer || !bridge.startStream) return false;
+      const lifecycle = await bridge.startStream({
+        url,
+        codec,
+        transport: this._rtspTransport(),
+        mediaTransport: "webrtc",
+        origin: location.origin,
+      });
+      if (!lifecycle?.ok || !lifecycle.streamId) {
+        this._status(lifecycle?.error || "Desktop runtime WebRTC start failed.");
+        return false;
+      }
+      this._streamId = lifecycle.streamId || "";
+      this._streamToken = lifecycle.streamToken || "";
+      const pc = new RTCPeerConnection({ iceServers: [] });
+      this._pc = pc;
+      const stream = new MediaStream();
+      let gotTrack = false;
+      pc.addTransceiver("video", { direction: "recvonly" });
+      pc.addEventListener("connectionstatechange", () => {
+        const state = pc.connectionState;
+        if (gotTrack && (state === "failed" || state === "disconnected")) {
+          this._scheduleRecovery(generation, `webrtc-connection-${state}`, { codec, state });
+        }
+      });
+      pc.ontrack = (event) => {
+        gotTrack = true;
+        event.track?.addEventListener?.("ended", () => this._scheduleRecovery(generation, "webrtc-track-ended", { codec }));
+        stream.addTrack(event.track);
+        this._attachVideoStream(stream, generation);
+        this._status(`WebRTC ${codec || "auto"} ready.`, "ok");
+        dispatch(this, "ready", { runtime: "desktop", mediaTransport: "webrtc", codec });
+      };
+      const offer = await pc.createOffer();
+      await pc.setLocalDescription(offer);
+      await waitForIceGathering(pc);
+      const response = await bridge.createWebRTCOffer({
+        url,
+        codec,
+        origin: location.origin,
+        streamId: this._streamId,
+        streamToken: this._streamToken,
+        offer: pc.localDescription?.sdp || offer.sdp,
+      });
+      if (!response?.ok || !response.answer) {
+        this._status(response?.error || "WebRTC unavailable, falling back to WebSocket.");
+        try { pc.close(); } catch {}
+        this._pc = null;
+        await bridge.stopStream?.({ streamId: this._streamId }).catch?.(() => {});
+        this._streamId = "";
+        this._streamToken = "";
+        return false;
+      }
+      await pc.setRemoteDescription({ type: "answer", sdp: response.answer });
+      codec = response.codec || codec;
+      await delay(WEBRTC_FIRST_FRAME_TIMEOUT_MS);
+      if (gotTrack) return true;
+      this._status("WebRTC negotiated but no video arrived; falling back to WebSocket.");
+      try { pc.close(); } catch {}
+      this._pc = null;
+      await bridge.stopStream?.({ streamId: this._streamId }).catch?.(() => {});
+      this._streamId = "";
+      this._streamToken = "";
+      return false;
+    }
+
+    async _startWebSocket(bridge, url, codec, generation) {
+      const response = await bridge.startStream({
+        url,
+        codec,
+        transport: this._rtspTransport(),
+        mediaTransport: "ws-annexb",
+        origin: location.origin,
+      });
+      if (!response?.ok || !response.wsUrl) {
+        const error = response?.error || "Desktop runtime start failed.";
+        if (this._recoveryAttempts > 0) {
+          this._scheduleRecovery(generation, "desktop-start-failed", { error });
+          return;
+        }
+        this._status(error, "error");
+        dispatch(this, "error", { error });
+        return;
+      }
+      this._streamId = response.streamId || "";
+      this._streamToken = response.streamToken || "";
+      const canvas = this.shadowRoot.querySelector("canvas");
+      this._player = new AnnexBWebCodecsPlayer(canvas, {
+        onStatus: (message, tone) => this._status(message, tone),
+        onReady: () => dispatch(this, "ready", { runtime: "desktop", mediaTransport: "ws-annexb", codec }),
+        onError: (error) => dispatch(this, "error", { error }),
+        onHealthy: () => this._markHealthy(generation),
+        onRecoverableError: (reason, details) => this._scheduleRecovery(generation, reason, details),
+      });
+      this._player.connect(response.wsUrl);
+    }
+
+    _attachVideoStream(stream, generation) {
+      const video = document.createElement("video");
+      video.muted = true;
+      video.autoplay = true;
+      video.playsInline = true;
+      video.srcObject = stream;
+      video.play().catch(() => {});
+      this._video = video;
+      const canvas = this.shadowRoot.querySelector("canvas");
+      const ctx = canvas.getContext("2d");
+      let lastFrameAt = 0;
+      let reportedHealthy = false;
+      const draw = () => {
+        if (!this._video) return;
+        if (video.videoWidth && video.videoHeight) {
+          if (canvas.width !== video.videoWidth || canvas.height !== video.videoHeight) {
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+          }
+          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+          lastFrameAt = performance.now();
+          if (!reportedHealthy) {
+            reportedHealthy = true;
+            this._markHealthy(generation);
+          }
+        }
+        requestAnimationFrame(draw);
+      };
+      requestAnimationFrame(draw);
+      const watchdog = setInterval(() => {
+        if (this._video !== video) {
+          clearInterval(watchdog);
+          return;
+        }
+        if (lastFrameAt && performance.now() - lastFrameAt > 10000) {
+          clearInterval(watchdog);
+          this._scheduleRecovery(generation, "webrtc-video-stall", { msSinceFrame: Math.round(performance.now() - lastFrameAt) });
+        }
+      }, 2000);
+    }
+
+    _status(message, tone = "") {
+      const el = this.shadowRoot?.querySelector(".status");
+      if (!el) return;
+      el.textContent = message || "";
+      el.className = `status ${tone || ""}`;
+    }
+
+    _gatewayGuideHTML(title, body) {
+      return `
+        <div class="gateway-guide">
+          <strong>${escapeHTML(title)}</strong>
+          <span>${escapeHTML(body)}</span>
+          <a href="https://rtsp.flyfish.dev/#docs/web-component-gateway.md" target="_blank" rel="noreferrer">查看 Gateway 安装指引</a>
+        </div>
+      `;
+    }
+
+    _showGatewayGuide(title, body) {
+      const host = this.shadowRoot?.querySelector(".rtsp-host");
+      if (!host || host.querySelector(".gateway-guide")) return;
+      host.insertAdjacentHTML("beforeend", this._gatewayGuideHTML(title, body));
+    }
+
+    _stopMediaOnly() {
+      const streamId = this._streamId;
+      this._streamId = "";
+      this._streamToken = "";
+      if (this._player) {
+        this._player.close();
+        this._player = null;
+      }
+      if (this._pc) {
+        try { this._pc.close(); } catch {}
+        this._pc = null;
+      }
+      if (this._video) {
+        try { this._video.srcObject = null; } catch {}
+        this._video.remove();
+        this._video = null;
+      }
+      const bridge = desktopBridge();
+      if (streamId && bridge?.stopStream) {
+        bridge.stopStream({ streamId }).catch?.(() => {});
+      }
+    }
+
+    _clearRecoveryTimer() {
+      if (this._recoveryTimer) {
+        clearTimeout(this._recoveryTimer);
+        this._recoveryTimer = 0;
+      }
+    }
+
+    _markHealthy(generation) {
+      if (generation !== this._playGeneration || this._userStopped) return;
+      if (this._recoveryAttempts > 0) {
+        dispatch(this, "recovered", { attempt: this._recoveryAttempts });
+      }
+      this._recoveryAttempts = 0;
+    }
+
+    _scheduleRecovery(generation, reason, details = {}) {
+      if (generation !== this._playGeneration || this._userStopped || this._recoveryTimer) return;
+      if (this._recoveryAttempts >= MAX_RECOVERY_ATTEMPTS) {
+        const error = `Playback recovery failed: ${reason}`;
+        this._status(error, "error");
+        dispatch(this, "error", { error, reason, details });
+        return;
+      }
+      this._recoveryAttempts += 1;
+      const delayMs = Math.min(RECOVERY_MAX_DELAY_MS, RECOVERY_BASE_DELAY_MS * (2 ** Math.max(0, this._recoveryAttempts - 1)));
+      this._status(`Playback interrupted. Recovering (${this._recoveryAttempts}/${MAX_RECOVERY_ATTEMPTS})...`, "error");
+      dispatch(this, "recovering", { reason, details, attempt: this._recoveryAttempts, maxAttempts: MAX_RECOVERY_ATTEMPTS, delay: delayMs });
+      this._stopMediaOnly();
+      this._recoveryTimer = setTimeout(() => {
+        this._recoveryTimer = 0;
+        this._restartDesktopAfterRecovery(generation);
+      }, delayMs);
+    }
+
+    async _restartDesktopAfterRecovery(previousGeneration) {
+      if (this._userStopped || previousGeneration !== this._playGeneration) return;
+      const bridge = desktopBridge();
+      const url = this._url().trim();
+      if (!bridge?.startStream || !/^rtsps?:\/\//i.test(url)) return;
+      const generation = ++this._playGeneration;
+      const codec = this._codec();
+      await this._startWebSocket(bridge, url, codec, generation);
+    }
+  }
+
+  customElements.define(name, RTSPPlayerElement);
+
+  if (!window.__RTSP_PLAYER_MESSAGE_BRIDGE__) {
+    window.__RTSP_PLAYER_MESSAGE_BRIDGE__ = true;
+    window.addEventListener("message", (event) => {
+      const source = event.source;
+      const el = source ? frameOwners.get(source) : null;
+      if (!el || !event.data?.type?.startsWith?.("RTSP_PLAYER_")) return;
+      if (event.origin !== el._origin()) return;
+      const type = event.data.type.replace(/^RTSP_PLAYER_/, "").toLowerCase();
+      dispatch(el, type, event.data);
+    });
+  }
+
+  return RTSPPlayerElement;
+}
+
+export function createRTSPPlayer(options = {}) {
+  const tagName = options.tagName || globalConfig.tagName || DEFAULT_TAG_NAME;
+  defineRTSPPlayer(tagName, options);
+  const el = document.createElement(tagName);
+  updateRTSPPlayer(el, options);
+  return el;
+}
+
+export function updateRTSPPlayer(el, options = {}) {
+  const transport = options.transport;
+  const map = {
+    url: options.url,
+    src: options.src,
+    width: options.width,
+    height: options.height,
+    runtime: options.runtime,
+    codec: options.codec,
+    "extension-id": options.extensionId,
+    "media-transport": options.mediaTransport,
+    "rtsp-transport": options.rtspTransport,
+  };
+  if (transport !== undefined) {
+    if (transport === "tcp" || transport === "udp") map["rtsp-transport"] = transport;
+    else map.transport = transport;
+  }
+  for (const [key, value] of Object.entries(map)) {
+    if (value !== undefined && value !== null && value !== "") el.setAttribute(key, String(value));
+  }
+  setBooleanAttribute(el, "autoplay", options.autoplay);
+  setBooleanAttribute(el, "controls", options.controls);
+  setBooleanAttribute(el, "muted", options.muted);
+  return el;
+}
+
+function waitForIceGathering(pc) {
+  if (pc.iceGatheringState === "complete") return Promise.resolve();
+  return new Promise((resolve) => {
+    const timer = setTimeout(done, 1200);
+    function done() {
+      clearTimeout(timer);
+      pc.removeEventListener("icegatheringstatechange", onChange);
+      resolve();
+    }
+    function onChange() {
+      if (pc.iceGatheringState === "complete") done();
+    }
+    pc.addEventListener("icegatheringstatechange", onChange);
+  });
+}
+
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function escapeHTML(value) {
+  return String(value).replace(/[&<>"']/g, (ch) => ({
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    "\"": "&quot;",
+    "'": "&#39;",
+  }[ch]));
+}
+
+class AnnexBWebCodecsPlayer {
+  constructor(canvas, hooks = {}) {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext("2d");
+    this.hooks = hooks;
+    this.ws = null;
+    this.decoder = null;
+    this.codec = "";
+    this.gotKey = false;
+    this.closed = false;
+    this.lastTimestamp = -1;
+    this.configuredAt = 0;
+    this.lastFrameAt = 0;
+    this.reportedHealthy = false;
+    this.decoderErrorTimes = [];
+    this.recovering = false;
+    this.watchdog = 0;
+    this.waitingKeyLogged = false;
+    this.waitingKeyStatusAt = 0;
+  }
+
+  connect(wsUrl) {
+    this.ws = new WebSocket(wsUrl);
+    this.ws.binaryType = "arraybuffer";
+    this.ws.onopen = () => this.hooks.onStatus?.("Connected to desktop gateway.");
+    this.ws.onerror = () => this.hooks.onStatus?.("WebSocket connection error.", "error");
+    this.ws.onclose = () => {
+      if (!this.closed) {
+        this.hooks.onStatus?.("Video connection closed.", "error");
+        this.notifyRecoverable("websocket-closed");
+      }
+    };
+    this.ws.onmessage = (event) => this.handleMessage(event.data);
+    this.startWatchdog();
+  }
+
+  async handleMessage(data) {
+    if (typeof data === "string") {
+      let msg;
+      try { msg = JSON.parse(data); } catch { return; }
+      if (msg.type === "config") await this.configure(msg.codec);
+      else if (msg.type === "error") this.notifyRecoverable("gateway-error", { error: msg.error || "RTSP error" });
+      return;
+    }
+    if (data instanceof ArrayBuffer) this.handleAccessUnit(data);
+  }
+
+  async configure(codec) {
+    codec ||= "avc1.42E01E";
+    if (this.decoder && this.codec === codec) return;
+    this.codec = codec;
+    if (this.decoder) {
+      try { this.decoder.close(); } catch {}
+    }
+    if (!("VideoDecoder" in window)) {
+      this.hooks.onStatus?.("VideoDecoder is not supported in this runtime.", "error");
+      this.hooks.onError?.("VideoDecoder is not supported in this runtime.");
+      return;
+    }
+    const config = { codec, hardwareAcceleration: "prefer-hardware", optimizeForLatency: true };
+    try {
+      const support = await VideoDecoder.isConfigSupported(config);
+      if (!support.supported) {
+        const msg = `Runtime does not support codec ${codec}.`;
+        this.hooks.onStatus?.(msg, "error");
+        this.hooks.onError?.(msg);
+        return;
+      }
+    } catch {}
+    this.decoder = new VideoDecoder({
+      output: (frame) => this.render(frame),
+      error: (err) => this.recoverDecoder(err?.message || String(err)),
+    });
+    this.decoder.configure(config);
+    this.gotKey = false;
+    this.configuredAt = performance.now();
+    this.waitingKeyLogged = false;
+    this.waitingKeyStatusAt = 0;
+    this.hooks.onStatus?.(`Decoder ready: ${codec}. Waiting for the first key/startup frame...`, "ok");
+  }
+
+  handleAccessUnit(buffer) {
+    if (buffer.byteLength < 16 || !this.decoder || this.decoder.state !== "configured") return;
+    const view = new DataView(buffer);
+    if (view.getUint8(0) !== 1) return;
+    const key = view.getUint8(1) === 1;
+    let timestamp = Number(view.getBigUint64(4, true));
+    const length = view.getUint32(12, true);
+    if (length <= 0 || 16 + length > buffer.byteLength) return;
+    if (!key && !this.gotKey) {
+      const now = performance.now();
+      if (!this.waitingKeyLogged || now - this.waitingKeyStatusAt > 5000) {
+        this.waitingKeyLogged = true;
+        this.waitingKeyStatusAt = now;
+        this.hooks.onStatus?.("Waiting for the first camera key/startup frame...");
+      }
+      return;
+    }
+    if (key && !this.gotKey) {
+      this.gotKey = true;
+      this.hooks.onStatus?.("Keyframe received. Rendering first frame...");
+    }
+    if (timestamp <= this.lastTimestamp) timestamp = this.lastTimestamp + 1;
+    this.lastTimestamp = timestamp;
+    if (!key && this.decoder.decodeQueueSize > 6) return;
+    try {
+      this.decoder.decode(new EncodedVideoChunk({
+        type: key ? "key" : "delta",
+        timestamp,
+        data: new Uint8Array(buffer, 16, length),
+      }));
+    } catch (err) {
+      this.recoverDecoder(err?.message || String(err));
+    }
+  }
+
+  render(frame) {
+    try {
+      if (this.canvas.width !== frame.displayWidth || this.canvas.height !== frame.displayHeight) {
+        this.canvas.width = frame.displayWidth;
+        this.canvas.height = frame.displayHeight;
+      }
+      this.ctx.drawImage(frame, 0, 0, this.canvas.width, this.canvas.height);
+      this.lastFrameAt = performance.now();
+      if (!this.reportedHealthy) {
+        this.reportedHealthy = true;
+        this.hooks.onStatus?.(`Video ready: ${frame.displayWidth}x${frame.displayHeight}`, "ok");
+        this.hooks.onReady?.();
+        this.hooks.onHealthy?.();
+      }
+    } finally {
+      frame.close();
+    }
+  }
+
+  recoverDecoder(error) {
+    if (this.closed || this.recovering) return;
+    const now = performance.now();
+    this.decoderErrorTimes = this.decoderErrorTimes.filter((ts) => now - ts < 10000);
+    this.decoderErrorTimes.push(now);
+    if (this.decoderErrorTimes.length > 2) {
+      this.notifyRecoverable("decoder-error-loop", { error, codec: this.codec, decoderErrors: this.decoderErrorTimes.length });
+      return;
+    }
+    this.recovering = true;
+    try {
+      if (this.decoder) this.decoder.close();
+    } catch {}
+    this.decoder = null;
+    this.gotKey = false;
+    this.hooks.onStatus?.("Decoder error. Rebuilding decoder...", "error");
+    setTimeout(() => {
+      if (this.closed) return;
+      this.recovering = false;
+      this.configure(this.codec).catch((err) => {
+        this.notifyRecoverable("decoder-reconfigure-failed", { error: err?.message || String(err), codec: this.codec });
+      });
+    }, 180);
+  }
+
+  startWatchdog() {
+    if (this.watchdog) return;
+    this.watchdog = setInterval(() => {
+      if (this.closed || this.recovering) return;
+      const now = performance.now();
+      if (this.configuredAt && !this.lastFrameAt && now - this.configuredAt > WEBSOCKET_KEYFRAME_NOTICE_MS && !this.waitingKeyLogged) {
+        this.waitingKeyLogged = true;
+        this.waitingKeyStatusAt = now;
+        this.hooks.onStatus?.("Waiting for the first camera key/startup frame...");
+      }
+      if (this.configuredAt && !this.lastFrameAt && now - this.configuredAt > WEBSOCKET_FIRST_FRAME_TIMEOUT_MS) {
+        this.notifyRecoverable("video-stall-before-first-frame", { codec: this.codec });
+        return;
+      }
+      if (this.lastFrameAt && now - this.lastFrameAt > 10000) {
+        this.notifyRecoverable("video-stall", { codec: this.codec, msSinceFrame: Math.round(now - this.lastFrameAt) });
+      }
+    }, 2000);
+  }
+
+  notifyRecoverable(reason, details = {}) {
+    if (this.closed || this.recovering) return;
+    this.recovering = true;
+    this.hooks.onRecoverableError?.(reason, details);
+  }
+
+  close() {
+    this.closed = true;
+    if (this.watchdog) {
+      clearInterval(this.watchdog);
+      this.watchdog = 0;
+    }
+    if (this.ws) {
+      try { this.ws.close(); } catch {}
+      this.ws = null;
+    }
+    if (this.decoder) {
+      try { this.decoder.close(); } catch {}
+      this.decoder = null;
+    }
+  }
+}