Use sandbox api in moq (#69)

Author: czerwiukk

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=<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.
+5. Provide the **Sandbox API URL**:
+
+   - Pass it as a query parameter: `http://localhost:5173?fishjamId=<your-id>&sandboxApiUrl=https://fishjam.io/api/v1/connect/<your-key>/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.

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 (
     <div class="min-h-screen bg-background p-8">
@@ -44,12 +48,38 @@ export default function App() {
                 />
               </div>
             </Show>
+            <Show when={!configSandboxApiUrl}>
+              <div class="space-y-2">
+                <label
+                  class="text-sm font-medium leading-none"
+                  for="sandbox-api-url"
+                >
+                  Sandbox API URL
+                </label>
+                <input
+                  id="sandbox-api-url"
+                  type="text"
+                  value={sandboxApiUrl()}
+                  onInput={(e) => setSandboxApiUrl(e.currentTarget.value)}
+                  placeholder="https://cloud.fishjam.work/api/v1/connect/<id>/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"
+                />
+              </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()} />
+        <Streamer
+          streamName={streamName()}
+          fishjamId={fishjamId()}
+          sandboxApiUrl={sandboxApiUrl()}
+        />
+        <Viewer
+          streamName={streamName()}
+          fishjamId={fishjamId()}
+          sandboxApiUrl={sandboxApiUrl()}
+        />
       </div>
     </div>
   );

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 };

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 };

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";

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;
 }