@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:

<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

npm install @flyfish-dev/rtsp-player

Script Tag

<script
  src="/rtsp-player.global.js"
  data-extension-id="YOUR_CHROME_EXTENSION_ID"></script>

<rtsp-player
  url="rtsp://user:[email protected]:554/Streaming/Channels/101"
  width="960"
  height="540"
  transport="auto"
  codec="auto"
  autoplay
  controls></rtsp-player>

JavaScript

import { configureRTSP, createRTSPPlayer } from "@flyfish-dev/rtsp-player";

configureRTSP({ extensionId: "YOUR_CHROME_EXTENSION_ID" });

const player = createRTSPPlayer({
  url: "rtsp://user:[email protected]: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

import { RtspPlayer } from "@flyfish-dev/rtsp-player/react";

export function CameraView() {
  return (
    <RtspPlayer
      extensionId="YOUR_CHROME_EXTENSION_ID"
      url="rtsp://user:[email protected]: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

<script setup>
import { RtspPlayer } from "@flyfish-dev/rtsp-player/vue";
</script>

<template>
  <RtspPlayer
    extension-id="YOUR_CHROME_EXTENSION_ID"
    url="rtsp://user:[email protected]: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:

<rtsp-player runtime="desktop" transport="auto" codec="auto" url="rtsp://camera/stream"></rtsp-player>