From b8b7940987fee36933b3f4359d52d93c399f7840 Mon Sep 17 00:00:00 2001 From: Adrian Czerwiec Date: Wed, 13 May 2026 10:44:50 +0200 Subject: [PATCH 1/2] handle sandbox api url --- moq-demo/src/App.tsx | 36 +++++++++++++++++++++++++++++++++--- moq-demo/src/Streamer.tsx | 5 +++-- moq-demo/src/Viewer.tsx | 5 +++-- moq-demo/src/config.ts | 11 ++++------- moq-demo/src/vite-env.d.ts | 1 + 5 files changed, 44 insertions(+), 14 deletions(-) diff --git a/moq-demo/src/App.tsx b/moq-demo/src/App.tsx index 4ad322c..1919c3b 100644 --- a/moq-demo/src/App.tsx +++ b/moq-demo/src/App.tsx @@ -1,11 +1,15 @@ import { createSignal, Show } from "solid-js"; import Streamer from "./Streamer"; import Viewer from "./Viewer"; -import { fishjamId as configFishjamId } from "./config"; +import { + fishjamId as configFishjamId, + 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 (
@@ -44,12 +48,38 @@ export default function App() { />
+ +
+ + setSandboxApiUrl(e.currentTarget.value)} + placeholder="https://cloud.fishjam.work/api/v1/connect//room-manager" + 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 5718131..6a79fe6 100644 --- a/moq-demo/src/Streamer.tsx +++ b/moq-demo/src/Streamer.tsx @@ -1,11 +1,12 @@ import { createSignal, Show } from "solid-js"; import "@moq/publish/ui"; import "@moq/publish/element"; -import { MOQ_BASE_URL, FISHJAM_API_BASE_URL } from "./config"; +import { MOQ_BASE_URL } from "./config"; interface Props { streamName: string; fishjamId: string; + sandboxApiUrl: string; } export default function Streamer(props: Props) { @@ -19,7 +20,7 @@ export default function Streamer(props: Props) { setLoading(true); try { const res = await fetch( - `${FISHJAM_API_BASE_URL}/${props.fishjamId}/room-manager/moq/${encodeURIComponent(props.streamName)}/publisher`, + `${props.sandboxApiUrl}/moq/${encodeURIComponent(props.streamName)}/publisher`, ); if (!res.ok) throw new Error(await res.text()); const { token } = (await res.json()) as { token: string }; diff --git a/moq-demo/src/Viewer.tsx b/moq-demo/src/Viewer.tsx index 31150ed..00dc013 100644 --- a/moq-demo/src/Viewer.tsx +++ b/moq-demo/src/Viewer.tsx @@ -1,11 +1,12 @@ import { createSignal, Show } from "solid-js"; import "@moq/watch/ui"; import "@moq/watch/element"; -import { MOQ_BASE_URL, FISHJAM_API_BASE_URL } from "./config"; +import { MOQ_BASE_URL } from "./config"; interface Props { streamName: string; fishjamId: string; + sandboxApiUrl: string; } export default function Viewer(props: Props) { @@ -19,7 +20,7 @@ export default function Viewer(props: Props) { setLoading(true); try { const res = await fetch( - `${FISHJAM_API_BASE_URL}/${props.fishjamId}/room-manager/moq/${encodeURIComponent(props.streamName)}/subscriber`, + `${props.sandboxApiUrl}/moq/${encodeURIComponent(props.streamName)}/subscriber`, ); if (!res.ok) throw new Error(await res.text()); const { token } = (await res.json()) as { token: string }; diff --git a/moq-demo/src/config.ts b/moq-demo/src/config.ts index c7d840b..5ce460a 100644 --- a/moq-demo/src/config.ts +++ b/moq-demo/src/config.ts @@ -1,15 +1,12 @@ const params = new URLSearchParams(window.location.search); export const fishjamId = - params.get("fishjamId") ?? - import.meta.env.VITE_FISHJAM_ID ?? - ""; + params.get("fishjamId") ?? import.meta.env.VITE_FISHJAM_ID ?? ""; + +export const SANDBOX_API_URL = + params.get("sandboxApiUrl") ?? import.meta.env.VITE_SANDBOX_API_URL ?? ""; 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"; diff --git a/moq-demo/src/vite-env.d.ts b/moq-demo/src/vite-env.d.ts index 705a61d..17129e4 100644 --- a/moq-demo/src/vite-env.d.ts +++ b/moq-demo/src/vite-env.d.ts @@ -2,6 +2,7 @@ interface ImportMetaEnv { readonly VITE_FISHJAM_ID?: string; + readonly VITE_SANDBOX_API_URL?: string; readonly VITE_MOQ_BASE_URL?: string; readonly VITE_FISHJAM_API_BASE_URL?: string; } From 719d017f177b0d39e838ac9c62e755b6d980e8fd Mon Sep 17 00:00:00 2001 From: Adrian Czerwiec Date: Wed, 13 May 2026 10:44:59 +0200 Subject: [PATCH 2/2] add readme change q --- moq-demo/README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/moq-demo/README.md b/moq-demo/README.md index a105cf4..6859630 100644 --- a/moq-demo/README.md +++ b/moq-demo/README.md @@ -19,7 +19,13 @@ 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=` - 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. +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` + - 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.