implement auto mode for single camera live view

2026-10-06 23:02:49 +03:00 · 2026-09-30 10:43:51 -05:00
parent 1bb61eb808
commit 3dddea3d3a
14 changed files with 1155 additions and 164 deletions
@@ -0,0 +1,263 @@
+/**
+ * Auto live stream selection in the single-camera view.
+ *
+ * go2rtc is mocked per stream. A failing stream answers MSE codec
+ * negotiation with go2rtc's "codecs not matched" error, the one ladder
+ * trigger Chromium reproduces without real media. A healthy stream
+ * answers negotiation and then sends nothing, so it waits quietly.
+ */
+import type { Locator, 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 STREAM_KEY = "front_door-stream:admin";
+const CODEC_ERROR = "mse: streams: codecs not matched: H265 => H264";
+
+const CONFIG = {
+  go2rtc: {
+    streams: {
+      front_door: ["rtsp://127.0.0.1:8554/front_door"],
+      front_door_sub: ["rtsp://127.0.0.1:8554/front_door_sub"],
+      backyard: ["rtsp://127.0.0.1:8554/backyard"],
+    },
+    webrtc: { candidates: [], ice_servers: [] },
+  },
+  cameras: {
+    front_door: {
+      live: { streams: { Sub: "front_door_sub" } },
+    },
+  },
+};
+
+test.use({ expectedErrors: [/MSE error 'mse-codec'/] });
+
+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);
+}
+
+// records the src of every MSE socket in open order
+async function mockGo2rtc(page: Page, failing: string[] = []) {
+  const opened: string[] = [];
+
+  await page.routeWebSocket("**/live/mse/api/ws**", (ws) => {
+    const src = new URL(ws.url()).searchParams.get("src") ?? "";
+    opened.push(src);
+
+    ws.onMessage((message) => {
+      const msg = JSON.parse(message.toString());
+      if (msg.type !== "mse") {
+        return;
+      }
+
+      ws.send(
+        JSON.stringify(
+          failing.includes(src)
+            ? { type: "error", value: CODEC_ERROR }
+            : { type: "mse", value: 'video/mp4; codecs="avc1.640029"' },
+        ),
+      );
+    });
+  });
+
+  await page.route("**/api/go2rtc/streams/**", (route) =>
+    route.fulfill({
+      json: {
+        producers: [{ medias: ["video, recvonly, H264"] }],
+        consumers: [],
+      },
+    }),
+  );
+
+  return opened;
+}
+
+async function openDesktopSettings(page: Page) {
+  const live = new LivePage(page, true);
+  await expect(live.backButton).toBeVisible({ timeout: 10_000 });
+  await page.locator("button:has(svg)").last().click();
+  const menu = page.locator('[role="menu"], [data-radix-menu-content]').first();
+  await expect(menu).toBeVisible({ timeout: 3_000 });
+  return menu;
+}
+
+function streamTrigger(menu: Locator) {
+  return menu
+    .locator('div:has(> label[for="streaming-method"]) [role="combobox"]')
+    .first();
+}
+
+test.describe("Auto live stream @mobile", () => {
+  test("a codec error on the main stream moves Auto to the sub stream", async ({
+    frigateApp,
+  }) => {
+    await frigateApp.installDefaults({ config: CONFIG });
+    const opened = await mockGo2rtc(frigateApp.page, ["front_door"]);
+
+    await frigateApp.goto("/#front_door");
+
+    await expect
+      .poll(() => opened, { timeout: 10_000 })
+      .toContain("front_door_sub");
+    expect(opened[0]).toBe("front_door");
+  });
+});
+
+test.describe("Auto live stream selector", () => {
+  test.beforeEach(({ frigateApp }) => {
+    test.skip(frigateApp.isMobile, "Desktop dropdown only");
+  });
+
+  test("no saved stream opens Auto on the first stream", async ({
+    frigateApp,
+  }) => {
+    await frigateApp.installDefaults({ config: CONFIG });
+    const opened = await mockGo2rtc(frigateApp.page);
+
+    await frigateApp.goto("/#front_door");
+
+    await expect.poll(() => opened[0], { timeout: 10_000 }).toBe("front_door");
+    const menu = await openDesktopSettings(frigateApp.page);
+    await expect(streamTrigger(menu)).toHaveText("Auto · front_door");
+  });
+
+  test("a codec error shows the codec reason", async ({ frigateApp }) => {
+    await frigateApp.installDefaults({ config: CONFIG });
+    const opened = await mockGo2rtc(frigateApp.page, ["front_door"]);
+
+    await frigateApp.goto("/#front_door");
+
+    await expect
+      .poll(() => opened, { timeout: 10_000 })
+      .toContain("front_door_sub");
+    const menu = await openDesktopSettings(frigateApp.page);
+    await expect(streamTrigger(menu)).toHaveText("Auto · Sub");
+    await expect(
+      menu.getByText(/because this browser can't play a higher-quality stream/),
+    ).toBeVisible();
+  });
+
+  test("a pinned main takes the legacy fallback instead of stepping down", async ({
+    frigateApp,
+  }) => {
+    await frigateApp.installDefaults({ config: CONFIG });
+    const opened = await mockGo2rtc(frigateApp.page, ["front_door"]);
+
+    await frigateApp.goto("/");
+    await writeIdb(frigateApp.page, { [STREAM_KEY]: "front_door" });
+    await frigateApp.goto("/#front_door");
+
+    const menu = await openDesktopSettings(frigateApp.page);
+    await expect(
+      menu.getByText(/Live view is in low-bandwidth mode/),
+    ).toBeVisible({ timeout: 10_000 });
+    expect(opened).not.toContain("front_door_sub");
+  });
+
+  test("selecting Auto clears the saved stream", async ({ frigateApp }) => {
+    await frigateApp.installDefaults({ config: CONFIG });
+    await mockGo2rtc(frigateApp.page);
+
+    await frigateApp.goto("/");
+    await writeIdb(frigateApp.page, { [STREAM_KEY]: "front_door_sub" });
+    await frigateApp.goto("/#front_door");
+
+    const menu = await openDesktopSettings(frigateApp.page);
+    await expect(streamTrigger(menu)).toHaveText("Sub");
+    await streamTrigger(menu).click();
+    await frigateApp.page.getByRole("option", { name: /^Auto/ }).click();
+
+    await expect.poll(() => readIdb(frigateApp.page, STREAM_KEY)).toBeNull();
+  });
+
+  test("a stale pin falls back to Auto", async ({ frigateApp }) => {
+    await frigateApp.installDefaults({ config: CONFIG });
+    const opened = await mockGo2rtc(frigateApp.page);
+
+    await frigateApp.goto("/");
+    await writeIdb(frigateApp.page, { [STREAM_KEY]: "removed_stream" });
+    await frigateApp.goto("/#front_door");
+
+    await expect.poll(() => readIdb(frigateApp.page, STREAM_KEY)).toBeNull();
+    await expect.poll(() => opened[0], { timeout: 10_000 }).toBe("front_door");
+  });
+
+  test("a single-stream camera offers no Auto", async ({ frigateApp }) => {
+    await frigateApp.installDefaults({ config: CONFIG });
+    await mockGo2rtc(frigateApp.page);
+
+    await frigateApp.goto("/#backyard");
+
+    const menu = await openDesktopSettings(frigateApp.page);
+    await streamTrigger(menu).click();
+    await expect(
+      frigateApp.page.getByRole("option", { name: "backyard" }),
+    ).toBeVisible();
+    await expect(
+      frigateApp.page.getByRole("option", { name: /^Auto/ }),
+    ).toHaveCount(0);
+  });
+
+  test("Reset stream at the floor returns to the top stream", async ({
+    frigateApp,
+  }) => {
+    await frigateApp.installDefaults({ config: CONFIG });
+    const opened = await mockGo2rtc(frigateApp.page, [
+      "front_door",
+      "front_door_sub",
+    ]);
+
+    await frigateApp.goto("/#front_door");
+
+    await expect
+      .poll(() => opened, { timeout: 10_000 })
+      .toContain("front_door_sub");
+    expect(opened[0]).toBe("front_door");
+
+    const menu = await openDesktopSettings(frigateApp.page);
+    await expect(streamTrigger(menu)).toHaveText("Auto · Low bandwidth");
+    await expect(
+      menu.getByText(/Playing the low-bandwidth feed/),
+    ).toBeVisible();
+
+    const beforeReset = opened.length;
+    await menu.getByRole("button", { name: "Reset stream" }).click();
+
+    // leaving the floor changes the stream and the mode in one render,
+    // which must still open each stream exactly once
+    await expect
+      .poll(() => opened.slice(beforeReset), { timeout: 10_000 })
+      .toEqual(["front_door", "front_door_sub"]);
+  });
+});