From fc13d1fecbac48e8d98534840c5e8a98a044dad8 Mon Sep 17 00:00:00 2001 From: Karol Konkol Date: Tue, 23 Jun 2026 14:46:44 +0200 Subject: [PATCH 1/2] Update examples for MoQ access API The sandbox MoQ endpoints now return a full connection_url (with the JWT embedded) alongside the raw token, instead of a bare token. Adapt the demos: - moq-demo: read connection_url from the response and use it directly; drop the manual MOQ_BASE_URL/fishjamId URL assembly and the fishjamId prop. - translation-demo: use getSandboxMoqPublisher/SubscriberAccess and return the connection_url directly; drop buildConnectionUrl plumbing. Co-Authored-By: Claude Opus 4.8 (1M context) --- moq-demo/README.md | 11 ++----- moq-demo/src/App.tsx | 33 ++----------------- moq-demo/src/Streamer.tsx | 9 ++--- moq-demo/src/Viewer.tsx | 9 ++--- moq-demo/src/config.ts | 8 ----- moq-demo/src/vite-env.d.ts | 2 -- translation-demo/.env.example | 9 ++--- translation-demo/package.json | 2 +- translation-demo/src/config.ts | 1 - .../src/hooks/useMoqStreamViewer.ts | 7 +--- translation-demo/src/hooks/useMoqTokens.ts | 24 +++++++------- translation-demo/src/hooks/usePublisher.ts | 7 +--- translation-demo/src/utils/translation.ts | 26 --------------- translation-demo/src/vite-env.d.ts | 1 - 14 files changed, 29 insertions(+), 120 deletions(-) diff --git a/moq-demo/README.md b/moq-demo/README.md index 6859630..fbe8f71 100644 --- a/moq-demo/README.md +++ b/moq-demo/README.md @@ -18,14 +18,9 @@ yarn dev 3. Open the URL printed by Vite (e.g. `http://localhost:5173`). -4. Provide a **Fishjam ID** in one of two ways: +4. Provide the **Sandbox API URL** (the relay connection URL, including the Fishjam ID, is returned by the sandbox): - - Pass it as a query parameter: `http://localhost:5173?fishjamId=` - - Leave it out — a **Fishjam ID** input field will appear in the UI so you can enter it at runtime. - -5. Provide the **Sandbox API URL**: - - - Pass it as a query parameter: `http://localhost:5173?fishjamId=&sandboxApiUrl=https://fishjam.io/api/v1/connect//room-manager` + - Pass it as a query parameter: `http://localhost:5173?sandboxApiUrl=https://fishjam.io/api/v1/connect//room-manager` - Or enter it in the UI at runtime. -6. Enter a stream name and click **Start Streaming** to publish, or **Connect to Stream** to watch. +5. Enter a stream name and click **Start Streaming** to publish, or **Connect to Stream** to watch. diff --git a/moq-demo/src/App.tsx b/moq-demo/src/App.tsx index 1919c3b..815321f 100644 --- a/moq-demo/src/App.tsx +++ b/moq-demo/src/App.tsx @@ -1,14 +1,10 @@ import { createSignal, Show } from "solid-js"; import Streamer from "./Streamer"; import Viewer from "./Viewer"; -import { - fishjamId as configFishjamId, - SANDBOX_API_URL as configSandboxApiUrl, -} from "./config"; +import { SANDBOX_API_URL as configSandboxApiUrl } from "./config"; export default function App() { const [streamName, setStreamName] = createSignal("my-stream"); - const [fishjamId, setFishjamId] = createSignal(configFishjamId); const [sandboxApiUrl, setSandboxApiUrl] = createSignal(configSandboxApiUrl); return ( @@ -33,21 +29,6 @@ export default function App() { 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" /> - -
- - 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" - /> -
-
- - + +
); diff --git a/moq-demo/src/Streamer.tsx b/moq-demo/src/Streamer.tsx index 6a79fe6..fe2fd27 100644 --- a/moq-demo/src/Streamer.tsx +++ b/moq-demo/src/Streamer.tsx @@ -1,11 +1,9 @@ import { createSignal, Show } from "solid-js"; import "@moq/publish/ui"; import "@moq/publish/element"; -import { MOQ_BASE_URL } from "./config"; interface Props { streamName: string; - fishjamId: string; sandboxApiUrl: string; } @@ -23,9 +21,8 @@ export default function Streamer(props: Props) { `${props.sandboxApiUrl}/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); + const { connection_url } = (await res.json()) as { connection_url: string }; + publishEl.setAttribute("url", connection_url); publishEl.setAttribute("name", props.streamName); setConnected(true); } catch (e) { @@ -89,7 +86,7 @@ export default function Streamer(props: Props) {