@flyfish-dev/rtsp-player 0.1.23

package/dist/rtsp-player.global.js

@@ -0,0 +1,247 @@
+// RTSP SDK 0.1.23 - 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.23",
+    configure: configureRTSP,
+    definePlayer: defineRTSPPlayer,
+    createPlayer: createRTSPPlayer,
+    updatePlayer: updateRTSPPlayer,
+  });
+})();

package/dist/vue.d.ts

@@ -0,0 +1,22 @@
+import type { DefineComponent } from "vue";
+
+export interface RtspPlayerProps {
+  extensionId?: string;
+  url?: string;
+  src?: string;
+  width?: string | number;
+  height?: string | number;
+  autoplay?: boolean;
+  controls?: boolean;
+  muted?: boolean;
+  transport?: "auto" | "webrtc" | "ws-annexb" | "tcp" | string;
+  rtspTransport?: "tcp" | "udp" | string;
+  mediaTransport?: "auto" | "webrtc" | "ws-annexb" | string;
+  codec?: "auto" | "h264" | "h265" | string;
+  runtime?: "extension" | "desktop" | "auto";
+  tagName?: string;
+}
+
+export declare const RtspPlayer: DefineComponent<RtspPlayerProps>;
+
+export default RtspPlayer;

package/dist/vue.js

@@ -0,0 +1,67 @@
+// RTSP SDK 0.1.23 - generated by scripts/build-sdk.mjs
+import {
+  defineComponent,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
+import { configureRTSP, defineRTSPPlayer, updateRTSPPlayer } from "./web.js";
+
+export const RtspPlayer = defineComponent({
+  name: "RtspPlayer",
+  props: {
+    extensionId: String,
+    url: String,
+    src: String,
+    width: { type: [String, Number], default: 640 },
+    height: { type: [String, Number], default: 360 },
+    autoplay: { type: Boolean, default: false },
+    controls: { type: Boolean, default: true },
+    muted: { type: Boolean, default: false },
+    transport: { type: String, default: "auto" },
+    rtspTransport: { type: String, default: "tcp" },
+    mediaTransport: String,
+    codec: { type: String, default: "auto" },
+    runtime: { type: String, default: "extension" },
+    tagName: { type: String, default: "rtsp-player" },
+  },
+  emits: ["ready", "error", "starting"],
+  setup(props, { emit, attrs }) {
+    const el = ref(null);
+
+    const sync = () => {
+      if (!el.value) return;
+      configureRTSP({ extensionId: props.extensionId, tagName: props.tagName, runtime: props.runtime });
+      defineRTSPPlayer(props.tagName);
+      updateRTSPPlayer(el.value, props);
+    };
+
+    const onReady = (event) => emit("ready", event);
+    const onError = (event) => emit("error", event);
+    const onStarting = (event) => emit("starting", event);
+
+    onMounted(() => {
+      sync();
+      el.value?.addEventListener("ready", onReady);
+      el.value?.addEventListener("error", onError);
+      el.value?.addEventListener("starting", onStarting);
+    });
+
+    onBeforeUnmount(() => {
+      el.value?.removeEventListener("ready", onReady);
+      el.value?.removeEventListener("error", onError);
+      el.value?.removeEventListener("starting", onStarting);
+    });
+
+    watch(() => ({ ...props }), sync, { deep: true });
+
+    return () => h(props.tagName, {
+      ...attrs,
+      ref: el,
+    });
+  },
+});
+
+export default RtspPlayer;