rtsp-player-sdk.js

// RTSP SDK 0.1.24 - generated by scripts/build-sdk.mjs
(function () {
  const DEFAULT_TAG_NAME = "rtsp-player";
  const DEFAULT_WIDTH = "640px";
  const DEFAULT_HEIGHT = "360px";
  const frameOwners = new WeakMap();
  const config = {
    extensionId: "",
    tagName: DEFAULT_TAG_NAME,
    runtime: "extension",
  };

  function currentScriptExtensionId() {
    const script = document.currentScript;
    return script && script.dataset ? 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 configureRTSP(options) {
    options = options || {};
    if (options.extensionId !== undefined) config.extensionId = normalizeExtensionId(options.extensionId);
    if (options.tagName) config.tagName = String(options.tagName);
    if (options.runtime) config.runtime = String(options.runtime);
    return Object.assign({}, config);
  }

  function updateRTSPPlayer(el, options) {
    options = options || {};
    const map = {
      url: options.url,
      src: options.src,
      width: options.width,
      height: options.height,
      transport: options.transport,
      runtime: options.runtime,
      codec: options.codec,
      "media-transport": options.mediaTransport,
      "rtsp-transport": options.rtspTransport,
      "extension-id": options.extensionId,
    };
    Object.keys(map).forEach((key) => {
      const value = map[key];
      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 defineRTSPPlayer(tagName, options) {
    configureRTSP(options);
    const name = String(tagName || config.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.attachShadow({ mode: "open" });
      }

      connectedCallback() {
        this._render();
      }

      disconnectedCallback() {
        if (this._iframe && this._iframe.contentWindow) frameOwners.delete(this._iframe.contentWindow);
      }

      attributeChangedCallback() {
        this._resize();
        this._sendInit();
      }

      play(url) {
        if (url) this.setAttribute("url", url);
        this._sendInit();
      }

      stop() {
        if (this._iframe && this._iframe.contentWindow) {
          this._iframe.contentWindow.postMessage({ type: "RTSP_PLAYER_STOP" }, this._origin());
        }
      }

      _extensionId() {
        return normalizeExtensionId(
          this.getAttribute("extension-id") ||
          config.extensionId ||
          window.RTSP_EXTENSION_ID ||
          window.RTSP_WEB_PLAYER_EXTENSION_ID ||
          currentScriptExtensionId(),
        );
      }

      _origin() {
        return extensionOrigin(this._extensionId());
      }

      _render() {
        if (this._iframe || !this.shadowRoot) return;
        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>
        `;
        this._resize();
        const host = this.shadowRoot.querySelector(".rtsp-host");
        const origin = this._origin();
        if (!origin) {
          host.innerHTML = 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;
      }

      _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 || !this._iframe.contentWindow || !origin) return;
        this._iframe.contentWindow.postMessage({
          type: "RTSP_PLAYER_INIT",
          url: this.getAttribute("url") || this.getAttribute("src") || "",
          autoplay: this.hasAttribute("autoplay"),
          controls: this.hasAttribute("controls"),
          muted: this.hasAttribute("muted"),
          transport: this.getAttribute("rtsp-transport") || (this.getAttribute("transport") === "tcp" ? "tcp" : "tcp"),
          rtspTransport: this.getAttribute("rtsp-transport") || "tcp",
          mediaTransport: this.getAttribute("media-transport") || this.getAttribute("transport") || "auto",
          codec: this.getAttribute("codec") || "auto",
        }, origin);
      }
    }

    customElements.define(name, RTSPPlayerElement);
    return RTSPPlayerElement;
  }

  function createRTSPPlayer(options) {
    options = options || {};
    const tagName = options.tagName || config.tagName || DEFAULT_TAG_NAME;
    defineRTSPPlayer(tagName, options);
    const el = document.createElement(tagName);
    updateRTSPPlayer(el, options);
    return el;
  }

  function 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>
    `;
  }

  function escapeHTML(value) {
    return String(value).replace(/[&<>"']/g, (ch) => ({
      "&": "&amp;",
      "<": "&lt;",
      ">": "&gt;",
      "\"": "&quot;",
      "'": "&#39;",
    }[ch]));
  }

  if (!window.__RTSP_PLAYER_MESSAGE_BRIDGE__) {
    window.__RTSP_PLAYER_MESSAGE_BRIDGE__ = true;
    window.addEventListener("message", (event) => {
      const el = event.source ? frameOwners.get(event.source) : null;
      if (!el || !event.data || !event.data.type || !event.data.type.startsWith("RTSP_PLAYER_")) return;
      if (event.origin !== el._origin()) return;
      const type = event.data.type.replace(/^RTSP_PLAYER_/, "").toLowerCase();
      el.dispatchEvent(new CustomEvent(type, {
        detail: event.data,
        bubbles: true,
        composed: true,
      }));
    });
  }

  const id = window.RTSP_EXTENSION_ID || window.RTSP_WEB_PLAYER_EXTENSION_ID || currentScriptExtensionId();
  if (id) configureRTSP({ extensionId: id });
  defineRTSPPlayer(DEFAULT_TAG_NAME);

  window.RTSP = Object.assign(window.RTSP || {}, {
    version: "0.1.24",
    configure: configureRTSP,
    definePlayer: defineRTSPPlayer,
    createPlayer: createRTSPPlayer,
    updatePlayer: updateRTSPPlayer,
  });
})();