@flyfish-dev/rtsp-player 0.1.23

package/README.md

@@ -0,0 +1,125 @@
+# @flyfish-dev/rtsp-player
+
+Universal RTSP components for pages that use the RTSP Chrome Runtime extension
+and for Electron/Tauri apps that bundle the Go desktop runtime.
+
+The SDK does not decode RTSP directly in a normal web page. Browsers cannot open
+RTSP sockets, so the Chrome extension and Go Native Host still provide the local
+runtime. This package gives application code a stable component API for plain
+HTML, JavaScript, React, and Vue.
+
+When a customer does not want to install the Chrome extension, ship the desktop
+Gateway path instead: Electron/Tauri starts the bundled Go runtime and exposes
+`window.rtspNative`. See `docs/web-component-gateway.md` for the customer-facing
+installation guidance.
+
+Default media policy is WebRTC first and WebSocket/WebCodecs fallback:
+
+```html
+<rtsp-player transport="auto" codec="auto"></rtsp-player>
+```
+
+Recoverable decode, WebRTC, WebSocket, and stream-stall failures are handled
+automatically. The element emits `recovering` while it restarts the stream and
+`recovered` after frames resume; `error` is reserved for final failure.
+
+## Install
+
+```bash
+npm install @flyfish-dev/rtsp-player
+```
+
+## Script Tag
+
+```html
+<script
+  src="/rtsp-player.global.js"
+  data-extension-id="YOUR_CHROME_EXTENSION_ID"></script>
+
+<rtsp-player
+  url="rtsp://user:pass@192.168.1.64:554/Streaming/Channels/101"
+  width="960"
+  height="540"
+  transport="auto"
+  codec="auto"
+  autoplay
+  controls></rtsp-player>
+```
+
+## JavaScript
+
+```js
+import { configureRTSP, createRTSPPlayer } from "@flyfish-dev/rtsp-player";
+
+configureRTSP({ extensionId: "YOUR_CHROME_EXTENSION_ID" });
+
+const player = createRTSPPlayer({
+  url: "rtsp://user:pass@192.168.1.64:554/Streaming/Channels/101",
+  width: 960,
+  height: 540,
+  autoplay: true,
+  controls: true,
+  transport: "auto",
+  codec: "auto",
+});
+
+player.addEventListener("ready", () => console.log("ready"));
+player.addEventListener("error", (event) => console.error(event.detail.error));
+
+document.body.append(player);
+```
+
+## React
+
+```jsx
+import { RtspPlayer } from "@flyfish-dev/rtsp-player/react";
+
+export function CameraView() {
+  return (
+    <RtspPlayer
+      extensionId="YOUR_CHROME_EXTENSION_ID"
+      url="rtsp://user:pass@192.168.1.64:554/Streaming/Channels/101"
+      width="100%"
+      height={540}
+      autoplay
+      controls
+      transport="auto"
+      codec="auto"
+      onReady={() => console.log("ready")}
+      onError={(event) => console.error(event.detail.error)}
+    />
+  );
+}
+```
+
+## Vue
+
+```vue
+<script setup>
+import { RtspPlayer } from "@flyfish-dev/rtsp-player/vue";
+</script>
+
+<template>
+  <RtspPlayer
+    extension-id="YOUR_CHROME_EXTENSION_ID"
+    url="rtsp://user:pass@192.168.1.64:554/Streaming/Channels/101"
+    width="100%"
+    :height="540"
+    autoplay
+    controls
+    transport="auto"
+    codec="auto"
+    @ready="() => console.log('ready')"
+    @error="(event) => console.error(event.detail.error)"
+  />
+</template>
+```
+
+## Desktop Runtime
+
+Electron/Tauri apps expose `window.rtspNative` or `window.__RTSP_DESKTOP__` and
+use:
+
+```html
+<rtsp-player runtime="desktop" transport="auto" codec="auto" url="rtsp://camera/stream"></rtsp-player>
+```

package/dist/index.d.ts

@@ -0,0 +1,54 @@
+export interface RTSPConfigureOptions {
+  extensionId?: string;
+  tagName?: string;
+  runtime?: RTSPRuntime;
+}
+
+export type RTSPRuntime = "extension" | "desktop" | "auto";
+export type RTSPMediaTransport = "auto" | "webrtc" | "ws-annexb";
+export type RTSPCodec = "auto" | "h264" | "h265";
+
+export interface RTSPPlayerOptions extends RTSPConfigureOptions {
+  url?: string;
+  src?: string;
+  width?: string | number;
+  height?: string | number;
+  autoplay?: boolean;
+  controls?: boolean;
+  muted?: boolean;
+  transport?: RTSPMediaTransport | "tcp" | string;
+  rtspTransport?: "tcp" | "udp" | string;
+  mediaTransport?: RTSPMediaTransport | string;
+  codec?: RTSPCodec | string;
+}
+
+export declare const RTSP_PLAYER_VERSION: string;
+
+export declare function configureRTSP(options?: RTSPConfigureOptions): {
+  extensionId: string;
+  tagName: string;
+  runtime: RTSPRuntime;
+};
+
+export declare function defineRTSPPlayer(
+  tagName?: string,
+  options?: RTSPConfigureOptions,
+): CustomElementConstructor | undefined;
+
+export declare function probeRTSPCapabilities(codec?: RTSPCodec | string): Promise<{
+  desktopRuntime: boolean;
+  webcodecs: boolean;
+  webrtc: boolean;
+  h264WebRTC: boolean;
+  h265WebRTC: boolean;
+  h264WebCodecs: boolean;
+  h265WebCodecs: boolean;
+  requestedCodec: RTSPCodec;
+}>;
+
+export declare function createRTSPPlayer(options?: RTSPPlayerOptions): HTMLElement;
+
+export declare function updateRTSPPlayer<T extends HTMLElement>(
+  element: T,
+  options?: RTSPPlayerOptions,
+): T;

package/dist/react.d.ts

@@ -0,0 +1,29 @@
+import type { CSSProperties, ForwardRefExoticComponent, RefAttributes } from "react";
+
+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;
+  className?: string;
+  style?: CSSProperties;
+  onReady?: (event: CustomEvent) => void;
+  onError?: (event: CustomEvent) => void;
+  onStarting?: (event: CustomEvent) => void;
+}
+
+export declare const RtspPlayer: ForwardRefExoticComponent<
+  RtspPlayerProps & RefAttributes<HTMLElement>
+>;
+
+export default RtspPlayer;

package/dist/react.js

@@ -0,0 +1,87 @@
+// RTSP SDK 0.1.23 - generated by scripts/build-sdk.mjs
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from "react";
+import { configureRTSP, defineRTSPPlayer, updateRTSPPlayer } from "./web.js";
+
+export const RtspPlayer = forwardRef(function RtspPlayer(props, ref) {
+  const {
+    extensionId,
+    url,
+    src,
+    width = 640,
+    height = 360,
+    autoplay = false,
+    controls = true,
+    muted = false,
+    transport = "auto",
+    rtspTransport = "tcp",
+    mediaTransport,
+    codec = "auto",
+    runtime = "extension",
+    tagName = "rtsp-player",
+    className,
+    style,
+    onReady,
+    onError,
+    onStarting,
+    ...rest
+  } = props;
+  const innerRef = useRef(null);
+
+  useEffect(() => {
+    configureRTSP({ extensionId, tagName, runtime });
+    defineRTSPPlayer(tagName);
+  }, [extensionId, tagName, runtime]);
+
+  useImperativeHandle(ref, () => innerRef.current, []);
+
+  useEffect(() => {
+    if (!innerRef.current) return;
+    updateRTSPPlayer(innerRef.current, {
+      extensionId,
+      url,
+      src,
+      width,
+      height,
+      autoplay,
+      controls,
+      muted,
+      transport,
+      rtspTransport,
+      mediaTransport,
+      codec,
+      runtime,
+    });
+  }, [extensionId, url, src, width, height, autoplay, controls, muted, transport, rtspTransport, mediaTransport, codec, runtime]);
+
+  useEffect(() => {
+    const el = innerRef.current;
+    if (!el) return undefined;
+    const listeners = [
+      ["ready", onReady],
+      ["error", onError],
+      ["starting", onStarting],
+    ];
+    for (const [type, handler] of listeners) {
+      if (handler) el.addEventListener(type, handler);
+    }
+    return () => {
+      for (const [type, handler] of listeners) {
+        if (handler) el.removeEventListener(type, handler);
+      }
+    };
+  }, [onReady, onError, onStarting]);
+
+  return React.createElement(tagName, {
+    ...rest,
+    ref: innerRef,
+    className,
+    style,
+  });
+});
+
+export default RtspPlayer;