Fce 3165/moq web demo

.gitignore

@@ -4,3 +4,4 @@ dist
 build
 .env
 .vscode
+.claude

moq-demo/README.md

@@ -0,0 +1,25 @@
+# MoQ Livestream Demo
+
+A real-time video livestreaming demo built on [Media over QUIC (MoQ)](https://quicwg.org/moq-transport/). A streamer publishes a live video feed and any number of viewers can watch it with low latency using Fishjam Cloud as the MoQ relay.
+
+## Running locally
+
+1. Install dependencies:
+
+```bash
+yarn install
+```
+
+2. Start the development server:
+
+```bash
+yarn dev
+```
+
+3. Open the URL printed by Vite (e.g. `http://localhost:5173`).
+
+4. Provide a **Fishjam ID** in one of two ways:
+   - Pass it as a query parameter: `http://localhost:5173?fishjamId=<your-id>`
+   - Leave it out — a **Fishjam ID** input field will appear in the UI so you can enter it at runtime.
+
+5. Enter a stream name and click **Start Streaming** to publish, or **Connect to Stream** to watch.

moq-demo/package.json

@@ -0,0 +1,32 @@
+{
+	"name": "@moq/moq-demo",
+	"private": true,
+	"type": "module",
+	"version": "0.1.0",
+	"description": "MoQ demo — publisher and subscriber",
+	"license": "(MIT OR Apache-2.0)",
+	"packageManager": "yarn@4.12.0",
+	"scripts": {
+		"dev": "vite --open",
+		"build": "vite build",
+		"check": "tsc --noEmit",
+		"format": "prettier --write \"src/**/*.{ts,tsx}\""
+	},
+	"dependencies": {
+		"@moq/publish": "^0.2.3",
+		"@moq/watch": "^0.2.3",
+		"@svta/cml-utils": "1.4.0"
+	},
+	"devDependencies": {
+		"@tailwindcss/typography": "^0.5.16",
+		"@tailwindcss/vite": "^4.1.13",
+		"esbuild": "^0.27.0",
+		"prettier": "3.5.3",
+		"solid-element": "^1.9.1",
+		"solid-js": "^1.9.10",
+		"tailwindcss": "^4.1.13",
+		"typescript": "^6.0.0",
+		"vite": "^7.3.1",
+		"vite-plugin-solid": "^2.11.10"
+	}
+}

moq-demo/src/App.tsx

@@ -0,0 +1,56 @@
+import { createSignal, Show } from "solid-js";
+import Streamer from "./Streamer";
+import Viewer from "./Viewer";
+import { fishjamId as configFishjamId } from "./config";
+
+export default function App() {
+  const [streamName, setStreamName] = createSignal("my-stream");
+  const [fishjamId, setFishjamId] = createSignal(configFishjamId);
+
+  return (
+    <div class="min-h-screen bg-background p-8">
+      <div class="mb-8 flex flex-col items-center gap-2">
+        <h1 class="text-3xl font-bold">MoQ Livestream Demo</h1>
+        <p class="text-muted-foreground">
+          Broadcast and view live streams over MoQ
+        </p>
+        <div class="mt-4 w-full max-w-xs">
+          <div class="bg-card text-card-foreground flex flex-col gap-4 rounded-xl border py-6 shadow-sm px-6">
+            <div class="space-y-2">
+              <label class="text-sm font-medium leading-none" for="stream-name">
+                Stream name
+              </label>
+              <input
+                id="stream-name"
+                type="text"
+                value={streamName()}
+                onInput={(e) => setStreamName(e.currentTarget.value)}
+                placeholder="my-stream"
+                class="border-input bg-input/30 flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-xs outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+              />
+            </div>
+            <Show when={!configFishjamId}>
+              <div class="space-y-2">
+                <label class="text-sm font-medium leading-none" for="fishjam-id">
+                  Fishjam ID
+                </label>
+                <input
+                  id="fishjam-id"
+                  type="text"
+                  value={fishjamId()}
+                  onInput={(e) => setFishjamId(e.currentTarget.value)}
+                  placeholder="your-fishjam-id"
+                  class="border-input bg-input/30 flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-xs outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+                />
+              </div>
+            </Show>
+          </div>
+        </div>
+      </div>
+      <div class="mx-auto max-w-7xl grid grid-cols-1 gap-8 lg:grid-cols-2">
+        <Streamer streamName={streamName()} fishjamId={fishjamId()} />
+        <Viewer streamName={streamName()} fishjamId={fishjamId()} />
+      </div>
+    </div>
+  );
+}

moq-demo/src/Streamer.tsx

@@ -0,0 +1,109 @@
+import { createSignal, Show } from "solid-js";
+import "@moq/publish/ui";
+import "@moq/publish/element";
+import { MOQ_BASE_URL, FISHJAM_API_BASE_URL } from "./config";
+
+interface Props {
+  streamName: string;
+  fishjamId: string;
+}
+
+export default function Streamer(props: Props) {
+  let publishEl!: HTMLElement;
+  const [connected, setConnected] = createSignal(false);
+  const [loading, setLoading] = createSignal(false);
+  const [error, setError] = createSignal<string | undefined>(undefined);
+
+  async function start() {
+    setError(undefined);
+    setLoading(true);
+    try {
+      const res = await fetch(
+        `${FISHJAM_API_BASE_URL}/${props.fishjamId}/room-manager/moq/${encodeURIComponent(props.streamName)}/publisher`,
+      );
+      if (!res.ok) throw new Error(await res.text());
+      const { token } = (await res.json()) as { token: string };
+      const url = `${MOQ_BASE_URL}/${props.fishjamId}?jwt=${token}`;
+      publishEl.setAttribute("url", url);
+      publishEl.setAttribute("name", props.streamName);
+      setConnected(true);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function stop() {
+    publishEl.removeAttribute("url");
+    setConnected(false);
+  }
+
+  return (
+    <div class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
+      {/* Card header */}
+      <div class="px-6 space-y-1.5">
+        <div class="leading-none font-semibold">Livestream Streamer</div>
+        <div class="text-muted-foreground text-sm">
+          Start streaming to the room
+        </div>
+      </div>
+
+      {/* Card content */}
+      <div class="px-6 space-y-4">
+        <Show when={error()}>
+          <div class="flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
+            <span class="mt-0.5 shrink-0">⚠</span>
+            <span>{error()}</span>
+          </div>
+        </Show>
+
+        {/*
+         * Publisher element is always in the DOM so the `ref` is valid before
+         * the user clicks "Start Streaming". It is hidden via CSS until connected.
+         */}
+        <Show when={!connected()}>
+          <div class="relative overflow-hidden rounded-lg bg-input/30 aspect-video flex items-center justify-center text-sm text-muted-foreground">
+            Camera preview will appear here
+          </div>
+        </Show>
+        <div classList={{ hidden: !connected() }}>
+          <moq-publish-ui>
+            <moq-publish ref={publishEl}>
+              <video
+                muted
+                autoplay
+                style="width: 100%; height: auto; border-radius: var(--radius-md);"
+              />
+            </moq-publish>
+          </moq-publish-ui>
+        </div>
+      </div>
+
+      {/* Card footer */}
+      <div class="px-6 mt-auto">
+        <Show
+          when={connected()}
+          fallback={
+            <button
+              type="button"
+              onClick={start}
+              disabled={!props.streamName || !props.fishjamId || loading()}
+              class="inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 h-9 px-4 py-2 w-full"
+            >
+              {loading() ? "Connecting…" : "Start Streaming"}
+            </button>
+          }
+        >
+          <button
+            type="button"
+            onClick={stop}
+            class="inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all bg-destructive text-white shadow-xs hover:bg-destructive/90 h-9 px-4 py-2 w-full"
+          >
+            Stop Streaming
+          </button>
+        </Show>
+      </div>
+    </div>
+  );
+}

moq-demo/src/Viewer.tsx

@@ -0,0 +1,105 @@
+import { createSignal, Show } from "solid-js";
+import "@moq/watch/ui";
+import "@moq/watch/element";
+import { MOQ_BASE_URL, FISHJAM_API_BASE_URL } from "./config";
+
+interface Props {
+  streamName: string;
+  fishjamId: string;
+}
+
+export default function Viewer(props: Props) {
+  let watchEl!: HTMLElement;
+  const [connected, setConnected] = createSignal(false);
+  const [loading, setLoading] = createSignal(false);
+  const [error, setError] = createSignal<string | undefined>(undefined);
+
+  async function connect() {
+    setError(undefined);
+    setLoading(true);
+    try {
+      const res = await fetch(
+        `${FISHJAM_API_BASE_URL}/${props.fishjamId}/room-manager/moq/${encodeURIComponent(props.streamName)}/subscriber`,
+      );
+      if (!res.ok) throw new Error(await res.text());
+      const { token } = (await res.json()) as { token: string };
+      const url = `${MOQ_BASE_URL}/${props.fishjamId}?jwt=${token}`;
+      watchEl.setAttribute("url", url);
+      watchEl.setAttribute("name", props.streamName);
+      setConnected(true);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function disconnect() {
+    watchEl.removeAttribute("url");
+    setConnected(false);
+  }
+
+  return (
+    <div class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
+      {/* Card header */}
+      <div class="px-6 space-y-1.5">
+        <div class="leading-none font-semibold">Livestream Viewer</div>
+        <div class="text-muted-foreground text-sm">Watch the live stream</div>
+      </div>
+
+      {/* Card content */}
+      <div class="px-6 space-y-4">
+        <Show when={error()}>
+          <div class="flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive">
+            <span class="mt-0.5 shrink-0">⚠</span>
+            <span>{error()}</span>
+          </div>
+        </Show>
+
+        <div class="space-y-2">
+          {/*
+           * Video area — placeholder shown before connect; watch element is
+           * always in the DOM so `ref` is valid before the user clicks Connect.
+           */}
+          <Show when={!connected()}>
+            <div class="relative overflow-hidden rounded-lg bg-input/30 aspect-video flex items-center justify-center text-sm text-muted-foreground">
+              Stream will appear here
+            </div>
+          </Show>
+          <div classList={{ hidden: !connected() }}>
+            <moq-watch-ui>
+              <moq-watch ref={watchEl} muted jitter="100" reload>
+                <canvas style="width: 100%; height: auto; border-radius: var(--radius-md);" />
+              </moq-watch>
+            </moq-watch-ui>
+          </div>
+        </div>
+      </div>
+
+      {/* Card footer */}
+      <div class="px-6 mt-auto">
+        <Show
+          when={connected()}
+          fallback={
+            <button
+              type="button"
+              onClick={connect}
+              disabled={!props.streamName || !props.fishjamId || loading()}
+              class="inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 h-9 px-4 py-2 w-full"
+            >
+              {loading() ? "Connecting…" : "Connect to Stream"}
+            </button>
+          }
+        >
+          <button
+            type="button"
+            onClick={disconnect}
+            class="inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all bg-destructive text-white shadow-xs hover:bg-destructive/90 h-9 px-4 py-2 w-full"
+          >
+            Disconnect
+          </button>
+        </Show>
+      </div>
+    </div>
+  );
+}

moq-demo/src/config.ts

@@ -0,0 +1,15 @@
+const params = new URLSearchParams(window.location.search);
+
+export const fishjamId =
+  params.get("fishjamId") ??
+  import.meta.env.VITE_FISHJAM_ID ??
+  "";
+
+export const MOQ_BASE_URL =
+  params.get("baseUrl") ??
+  import.meta.env.VITE_MOQ_BASE_URL ??
+  "https://moq.fishjam.work:443";
+
+export const FISHJAM_API_BASE_URL =
+  import.meta.env.VITE_FISHJAM_API_BASE_URL ??
+  "https://cloud.fishjam.io/api/v1/connect";