Live streaming tech selection (#24374)

* allow users to select live streaming technology * fix webrtc being downgraded to mse on load `useUserPersistence` seeds state with the default and loads asynchronously, so the first render always used `mse` instead of the saved choice, and `useWebRTCGloballyAvailable` reports `checking` until the probe settles and re-enters that state on every consumer mount, so a saved `webrtc` was rewritten to `mse` even after the probe had already passed. On Safari the MSE player then timed out and latched the jsmpeg fallback. A pending probe now counts as available, the player waits on `autoLive` until the stored preferences load, and `handleError` gates on the mode in use since the fallback flag no longer implies webrtc is untried. A rejected IndexedDB read also resolves `loaded` now, so a blocked store can't leave the player waiting forever. * add support for configurable ICE servers in WebRTC player * add mic error state, fix dialog overwriting saved choice and dashboard ignoring stream * tweaks
2026-09-28 10:56:52 +03:00 · 2026-09-16 09:12:06 -05:00
parent 79ca18d439
commit 64d6366ac4
26 changed files with 1940 additions and 283 deletions
@@ -0,0 +1,450 @@
+/**
+ * WebRTC streaming-technology availability gating.
+ *
+ * The connectivity probe needs a live go2rtc, so this covers the
+ * statically-determinable gate: with no webrtc candidates/ice_servers
+ * configured, the WebRTC option must be disabled in the stream-technology
+ * selector (label "Streaming Technology").
+ */
+import type { Page } from "@playwright/test";
+import { test, expect } from "../fixtures/frigate-test";
+import { LivePage } from "../pages/live.page";
+
+// the mocked profile is admin, so useUserPersistence keys are namespaced
+const STREAMING_KEY = "streaming-settings:admin";
+
+async function writeIdb(page: Page, entries: Record<string, unknown>) {
+  await page.evaluate(async (data) => {
+    await new Promise<void>((resolve, reject) => {
+      const request = indexedDB.open("keyval-store", 1);
+      request.onupgradeneeded = () =>
+        request.result.createObjectStore("keyval");
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        const tx = request.result.transaction("keyval", "readwrite");
+        const store = tx.objectStore("keyval");
+        Object.entries(data).forEach(([key, value]) => store.put(value, key));
+        tx.oncomplete = () => resolve();
+        tx.onerror = () => reject(tx.error);
+      };
+    });
+  }, entries);
+}
+
+async function readIdb(page: Page, key: string) {
+  return page.evaluate(async (target) => {
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open("keyval-store", 1);
+      request.onupgradeneeded = () =>
+        request.result.createObjectStore("keyval");
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        const tx = request.result.transaction("keyval", "readonly");
+        const get = tx.objectStore("keyval").get(target);
+        get.onsuccess = () => resolve(get.result ?? null);
+        get.onerror = () => reject(get.error);
+      };
+    });
+  }, key);
+}
+
+test.describe("WebRTC availability gating @critical", () => {
+  test("desktop: WebRTC option is disabled when no candidates or ice_servers", async ({
+    frigateApp,
+  }) => {
+    test.skip(frigateApp.isMobile, "Desktop dropdown only");
+
+    await frigateApp.installDefaults({
+      config: {
+        go2rtc: {
+          streams: { front_door: ["rtsp://127.0.0.1:8554/front_door"] },
+          webrtc: { candidates: [], ice_servers: [] },
+        },
+      },
+    });
+
+    // The single-camera view fetches go2rtc stream metadata once restreamed.
+    // The default mock returns {} which lacks `producers` and crashes the
+    // capability parser, so return a minimal valid metadata payload.
+    await frigateApp.page.route("**/api/go2rtc/streams/front_door**", (route) =>
+      route.fulfill({
+        json: {
+          producers: [{ medias: ["video, recvonly, H264"] }],
+          consumers: [],
+        },
+      }),
+    );
+
+    await frigateApp.goto("/#front_door");
+
+    const live = new LivePage(frigateApp.page, true);
+    await expect(live.backButton).toBeVisible({ timeout: 10_000 });
+
+    // Open the desktop camera-settings dropdown (the FaCog gear is the last
+    // button-like trigger in the single-camera header).
+    const gearButtons = frigateApp.page.locator("button:has(svg)");
+    await gearButtons.last().click();
+
+    const menu = frigateApp.page
+      .locator('[role="menu"], [data-radix-menu-content]')
+      .first();
+    await expect(menu).toBeVisible({ timeout: 3_000 });
+
+    // Open the "Streaming Technology" select. Anchor on its label, then click
+    // the combobox trigger that follows it within the same field container.
+    const technologyTrigger = menu
+      .locator('div:has(> label[for="streaming-mode"]) [role="combobox"]')
+      .first();
+    await expect(technologyTrigger).toBeVisible({ timeout: 3_000 });
+    await technologyTrigger.click();
+
+    // The Radix select content is portaled to the document body; the WebRTC
+    // option must be present and disabled (aria-disabled="true").
+    const webrtcOption = frigateApp.page.getByRole("option", {
+      name: /WebRTC/,
+    });
+    await expect(webrtcOption).toBeVisible({ timeout: 3_000 });
+    await expect(webrtcOption).toHaveAttribute("aria-disabled", "true");
+
+    // Sanity check: a non-gated option (MSE) is enabled, proving the locator
+    // distinguishes enabled from disabled options.
+    const mseOption = frigateApp.page.getByRole("option", { name: /MSE/ });
+    await expect(mseOption).not.toHaveAttribute("aria-disabled", "true");
+  });
+
+  test("the unavailable reason is logged to the console once", async ({
+    frigateApp,
+  }) => {
+    // Availability is consumed by several components at once, so the emitter
+    // dedupes; the count asserts that dedupe, not just the message.
+    const warnings: string[] = [];
+    frigateApp.page.on("console", (msg) => {
+      if (msg.type() === "warning" && msg.text().includes("WebRTC unavailable"))
+        warnings.push(msg.text());
+    });
+
+    await frigateApp.installDefaults({
+      config: {
+        go2rtc: {
+          streams: { front_door: ["rtsp://127.0.0.1:8554/front_door"] },
+          webrtc: { candidates: [], ice_servers: [] },
+        },
+      },
+    });
+
+    await frigateApp.page.route("**/api/go2rtc/streams/front_door**", (route) =>
+      route.fulfill({
+        json: {
+          producers: [{ medias: ["video, recvonly, H264"] }],
+          consumers: [],
+        },
+      }),
+    );
+
+    await frigateApp.goto("/#front_door");
+
+    await expect
+      .poll(() => warnings.length, { timeout: 10_000 })
+      .toBeGreaterThan(0);
+
+    expect(warnings).toHaveLength(1);
+    expect(warnings[0]).toContain("WebRTC unavailable 'not-configured'");
+    expect(warnings[0]).toContain("go2rtc.webrtc");
+    expect(warnings[0]).toContain("docs.frigate.video");
+  });
+
+  test("desktop: the WebRTC option reports the pending connectivity check", async ({
+    frigateApp,
+  }) => {
+    test.skip(frigateApp.isMobile, "Desktop dropdown only");
+
+    // Hold the signaling socket open so the probe stays pending. Left alone it
+    // fails fast against the preview server and resolves to unreachable, which
+    // is the state the first test already covers.
+    await frigateApp.page.routeWebSocket("**/live/webrtc/api/ws**", () => {
+      // never answer the offer
+    });
+
+    // Candidates configured, so the gate reaches the probe rather than
+    // stopping at not-configured.
+    await frigateApp.installDefaults({
+      config: {
+        go2rtc: {
+          streams: { front_door: ["rtsp://127.0.0.1:8554/front_door"] },
+          webrtc: { candidates: ["192.168.1.10:8555"], ice_servers: [] },
+        },
+      },
+    });
+
+    await frigateApp.page.route("**/api/go2rtc/streams/front_door**", (route) =>
+      route.fulfill({
+        json: {
+          producers: [{ medias: ["video, recvonly, H264"] }],
+          consumers: [],
+        },
+      }),
+    );
+
+    await frigateApp.goto("/#front_door");
+
+    const live = new LivePage(frigateApp.page, true);
+    await expect(live.backButton).toBeVisible({ timeout: 10_000 });
+
+    const gearButtons = frigateApp.page.locator("button:has(svg)");
+    await gearButtons.last().click();
+
+    const menu = frigateApp.page
+      .locator('[role="menu"], [data-radix-menu-content]')
+      .first();
+    await expect(menu).toBeVisible({ timeout: 3_000 });
+
+    const technologyTrigger = menu
+      .locator('div:has(> label[for="streaming-mode"]) [role="combobox"]')
+      .first();
+    await expect(technologyTrigger).toBeVisible({ timeout: 3_000 });
+    await technologyTrigger.click();
+
+    // Unselectable while the probe runs, but with the reason stated rather
+    // than a bare greyed-out row.
+    const webrtcOption = frigateApp.page.getByRole("option", {
+      name: /WebRTC/,
+    });
+    await expect(webrtcOption).toBeVisible({ timeout: 3_000 });
+    await expect(webrtcOption).toHaveAttribute("aria-disabled", "true");
+    await expect(webrtcOption).toContainText(/Checking WebRTC availability/i);
+  });
+
+  test("desktop: JSMpeg is no longer offered in the technology selector", async ({
+    frigateApp,
+  }) => {
+    test.skip(frigateApp.isMobile, "Desktop dropdown only");
+
+    await frigateApp.installDefaults({
+      config: {
+        go2rtc: {
+          streams: { front_door: ["rtsp://127.0.0.1:8554/front_door"] },
+          webrtc: { candidates: [], ice_servers: [] },
+        },
+      },
+    });
+
+    await frigateApp.page.route("**/api/go2rtc/streams/front_door**", (route) =>
+      route.fulfill({
+        json: {
+          producers: [{ medias: ["video, recvonly, H264"] }],
+          consumers: [],
+        },
+      }),
+    );
+
+    await frigateApp.goto("/#front_door");
+
+    const live = new LivePage(frigateApp.page, true);
+    await expect(live.backButton).toBeVisible({ timeout: 10_000 });
+
+    const gearButtons = frigateApp.page.locator("button:has(svg)");
+    await gearButtons.last().click();
+
+    const menu = frigateApp.page
+      .locator('[role="menu"], [data-radix-menu-content]')
+      .first();
+    await expect(menu).toBeVisible({ timeout: 3_000 });
+
+    // Technology selector offers MSE/WebRTC but NOT JSMpeg (replaced by the
+    // "Force low-bandwidth mode" switch).
+    const technologyTrigger = menu
+      .locator('div:has(> label[for="streaming-mode"]) [role="combobox"]')
+      .first();
+    await expect(technologyTrigger).toBeVisible({ timeout: 3_000 });
+    await technologyTrigger.click();
+    await expect(
+      frigateApp.page.getByRole("option", { name: /MSE/ }),
+    ).toBeVisible({ timeout: 3_000 });
+    await expect(
+      frigateApp.page.getByRole("option", { name: /JSMpeg/ }),
+    ).toHaveCount(0);
+  });
+
+  test("desktop: force low-bandwidth switch disables the technology and stream selectors", async ({
+    frigateApp,
+  }) => {
+    test.skip(frigateApp.isMobile, "Desktop dropdown only");
+
+    await frigateApp.installDefaults({
+      config: {
+        go2rtc: {
+          streams: { front_door: ["rtsp://127.0.0.1:8554/front_door"] },
+          webrtc: { candidates: [], ice_servers: [] },
+        },
+      },
+    });
+
+    await frigateApp.page.route("**/api/go2rtc/streams/front_door**", (route) =>
+      route.fulfill({
+        json: {
+          producers: [{ medias: ["video, recvonly, H264"] }],
+          consumers: [],
+        },
+      }),
+    );
+
+    await frigateApp.goto("/#front_door");
+
+    const live = new LivePage(frigateApp.page, true);
+    await expect(live.backButton).toBeVisible({ timeout: 10_000 });
+
+    const gearButtons = frigateApp.page.locator("button:has(svg)");
+    await gearButtons.last().click();
+
+    const menu = frigateApp.page
+      .locator('[role="menu"], [data-radix-menu-content]')
+      .first();
+    await expect(menu).toBeVisible({ timeout: 3_000 });
+
+    // Both selectors are present and enabled to begin with (the switch is off).
+    await expect(menu.locator('label[for="streaming-mode"]')).toHaveCount(1);
+    const technologyTrigger = menu
+      .locator('div:has(> label[for="streaming-mode"]) [role="combobox"]')
+      .first();
+    const streamTrigger = menu
+      .locator('div:has(> label[for="streaming-method"]) [role="combobox"]')
+      .first();
+    await expect(technologyTrigger).toBeVisible({ timeout: 3_000 });
+    await expect(technologyTrigger).toBeEnabled();
+    await expect(streamTrigger).toBeVisible({ timeout: 3_000 });
+    await expect(streamTrigger).toBeEnabled();
+
+    // Enabling the switch keeps both selectors visible but disables them (the
+    // low-bandwidth feed ignores the chosen stream and technology).
+    const lowBandwidthSwitch = menu.getByRole("switch", {
+      name: "Force low-bandwidth mode",
+    });
+    await expect(lowBandwidthSwitch).toBeVisible({ timeout: 3_000 });
+    await lowBandwidthSwitch.click();
+
+    await expect(menu.locator('label[for="streaming-mode"]')).toHaveCount(1);
+    await expect(technologyTrigger).toBeDisabled();
+    await expect(streamTrigger).toBeDisabled();
+
+    // Toggling it back off re-enables both.
+    await lowBandwidthSwitch.click();
+    await expect(technologyTrigger).toBeEnabled();
+    await expect(streamTrigger).toBeEnabled();
+  });
+
+  test("desktop: saving group streaming settings keeps an unavailable WebRTC choice", async ({
+    frigateApp,
+  }) => {
+    test.skip(frigateApp.isMobile, "Desktop context menu only");
+
+    await frigateApp.installDefaults({
+      config: {
+        go2rtc: {
+          streams: { front_door: ["rtsp://127.0.0.1:8554/front_door"] },
+          webrtc: { candidates: [], ice_servers: [] },
+        },
+      },
+    });
+
+    await frigateApp.page.route("**/api/go2rtc/streams/front_door**", (route) =>
+      route.fulfill({
+        json: {
+          producers: [{ medias: ["video, recvonly, H264"] }],
+          consumers: [],
+        },
+      }),
+    );
+
+    const saved = {
+      streamName: "front_door",
+      streamType: "smart",
+      playerMode: "webrtc",
+      compatibilityMode: false,
+      playAudio: false,
+      volume: 1,
+    };
+
+    await frigateApp.goto("/");
+    await writeIdb(frigateApp.page, {
+      [STREAMING_KEY]: { outdoor: { front_door: saved } },
+    });
+    await frigateApp.goto("/?group=outdoor");
+
+    // With no candidates the dialog resolves WebRTC to MSE for display, but
+    // saving must not persist that fallback over the user's choice.
+    const live = new LivePage(frigateApp.page, true);
+    const menu = await live.openContextMenuOn("front_door");
+    await expect(menu).toBeVisible({ timeout: 5_000 });
+    await menu.getByText("Streaming Settings").click();
+
+    const dialog = frigateApp.page.getByRole("dialog");
+    await expect(dialog).toBeVisible();
+    await dialog.getByRole("button", { name: "Save" }).click();
+    await expect(dialog).toBeHidden();
+
+    await expect
+      .poll(() => readIdb(frigateApp.page, STREAMING_KEY))
+      .toMatchObject({ outdoor: { front_door: { playerMode: "webrtc" } } });
+  });
+});
+
+test.describe("WebRTC availability gating @critical @mobile", () => {
+  test("mobile: WebRTC option is disabled when no candidates or ice_servers", async ({
+    frigateApp,
+  }) => {
+    test.skip(!frigateApp.isMobile, "Mobile drawer only");
+
+    await frigateApp.installDefaults({
+      config: {
+        go2rtc: {
+          streams: { front_door: ["rtsp://127.0.0.1:8554/front_door"] },
+          webrtc: { candidates: [], ice_servers: [] },
+        },
+      },
+    });
+
+    await frigateApp.page.route("**/api/go2rtc/streams/front_door**", (route) =>
+      route.fulfill({
+        json: {
+          producers: [{ medias: ["video, recvonly, H264"] }],
+          consumers: [],
+        },
+      }),
+    );
+
+    await frigateApp.goto("/#front_door");
+
+    // Open the mobile camera-settings drawer. The camera controls render a
+    // second dialog-popup trigger (the FaCog settings toggle) after the global
+    // header menu; wait for both to exist, then click the last one.
+    const dialogTriggers = frigateApp.page.locator(
+      'button[aria-haspopup="dialog"]',
+    );
+    await expect(dialogTriggers).toHaveCount(2, { timeout: 10_000 });
+    const settingsTrigger = dialogTriggers.last();
+    await settingsTrigger.scrollIntoViewIfNeeded();
+    await settingsTrigger.click();
+
+    // The drawer renders a "Streaming Technology" label above its select.
+    // Anchor on that label, then open the combobox in the same field block.
+    await expect(
+      frigateApp.page.getByText("Streaming Technology", { exact: true }),
+    ).toBeVisible({ timeout: 3_000 });
+    const technologyTrigger = frigateApp.page
+      .locator(
+        'div:has(> div:text-is("Streaming Technology")) [role="combobox"]',
+      )
+      .first();
+    await expect(technologyTrigger).toBeVisible({ timeout: 3_000 });
+    await technologyTrigger.click();
+
+    const webrtcOption = frigateApp.page.getByRole("option", {
+      name: /WebRTC/,
+    });
+    await expect(webrtcOption).toBeVisible({ timeout: 3_000 });
+    await expect(webrtcOption).toHaveAttribute("aria-disabled", "true");
+
+    const mseOption = frigateApp.page.getByRole("option", { name: /MSE/ });
+    await expect(mseOption).not.toHaveAttribute("aria-disabled", "true");
+  });
+});
@@ -18,15 +18,20 @@ const OUTDOOR_LAYOUT = [
  { i: "backyard", x: 6, y: 0, w: 6, h: 4 },
 ];

+// a camera as an export from before streaming technology selection carries
+// it, so tests can assert both what a pre-feature file writes and what the
+// technology adds on top
+const FRONT_DOOR_WITHOUT_TECHNOLOGY = {
+  streamName: "front_door",
+  streamType: "smart",
+  compatibilityMode: false,
+  playAudio: false,
+  volume: 1,
+};
+
 const STREAMING_SETTINGS = {
  outdoor: {
-    front_door: {
-      streamName: "front_door",
-      streamType: "smart",
-      compatibilityMode: false,
-      playAudio: false,
-      volume: 1,
-    },
+    front_door: { ...FRONT_DOOR_WITHOUT_TECHNOLOGY, playerMode: "webrtc" },
  },
 };

@@ -340,6 +345,7 @@ test.describe("UI settings import/export @medium", () => {
        garage: {
          streamName: "garage",
          streamType: "continuous",
+          playerMode: "jsmpeg",
          compatibilityMode: true,
          playAudio: true,
          volume: 0.5,
@@ -375,6 +381,77 @@ test.describe("UI settings import/export @medium", () => {
      },
    });
  });
+
+  test("drops only the streaming technology when its value is unrecognized", async ({
+    frigateApp,
+  }) => {
+    // a hand-edited file, or an export from a future Frigate that added a
+    // technology this build does not know: the camera's other settings still
+    // import rather than the whole file failing validation
+    await frigateApp.goto("/settings?page=uiSettings");
+
+    await chooseImportFile(
+      frigateApp.page,
+      importPayload({
+        sections: {
+          layouts: {},
+          streaming: {
+            outdoor: {
+              front_door: {
+                ...FRONT_DOOR_WITHOUT_TECHNOLOGY,
+                playerMode: "quantum",
+              },
+            },
+          },
+          preferences: {},
+        },
+      }),
+    );
+
+    await expect(
+      frigateApp.page.getByText("Streaming settings (1 camera)"),
+    ).toBeVisible();
+
+    await confirmImport(frigateApp.page);
+
+    expect(await readIdb(frigateApp.page, STREAMING_KEY)).toEqual({
+      outdoor: { front_door: FRONT_DOOR_WITHOUT_TECHNOLOGY },
+    });
+  });
+
+  test("clears a stored streaming technology when the file predates it", async ({
+    frigateApp,
+  }) => {
+    // import replaces whole camera objects, as it already does for streamName
+    // and volume, so a pre-feature export resets the technology rather than
+    // leaving the local choice in place
+    await frigateApp.goto("/settings?page=uiSettings");
+
+    await writeIdb(frigateApp.page, { [STREAMING_KEY]: STREAMING_SETTINGS });
+    await chooseImportFile(
+      frigateApp.page,
+      importPayload({
+        sections: {
+          layouts: {},
+          streaming: {
+            outdoor: { front_door: FRONT_DOOR_WITHOUT_TECHNOLOGY },
+          },
+          preferences: {},
+        },
+      }),
+    );
+
+    await expect(
+      frigateApp.page.getByText("Streaming settings (1 camera)"),
+    ).toBeVisible();
+
+    await confirmImport(frigateApp.page);
+
+    expect(await readIdb(frigateApp.page, STREAMING_KEY)).toEqual({
+      outdoor: { front_door: FRONT_DOOR_WITHOUT_TECHNOLOGY },
+    });
+  });
+
  test("rejects a file that is not valid JSON", async ({ frigateApp }) => {
    await frigateApp.goto("/settings?page=uiSettings");