Add go2rtc stream selection to camera configuration (#23496)
Some checks are pending
CI / AMD64 Build (push) Waiting to run
CI / ARM Build (push) Waiting to run
CI / Jetson Jetpack 6 (push) Waiting to run
CI / AMD64 Extra Build (push) Blocked by required conditions
CI / ARM Extra Build (push) Blocked by required conditions
CI / Synaptics Build (push) Blocked by required conditions
CI / Assemble and push default build (push) Blocked by required conditions

* add go2rtc stream selection to camera ffmpeg config

* i18n

* add config-schema.json to generated e2e mock data

* e2e test

* docs

* fix test
This commit is contained in:
Josh Hawkins 2026-06-16 17:12:39 -05:00 committed by GitHub
parent a7df17cc61
commit 282e70d4bf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 594 additions and 15 deletions

View File

@ -30,6 +30,8 @@ Navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" /
| ----------------- | ------------------------------------------------------------------- |
| **Camera inputs** | List of input stream definitions (paths and roles) for this camera. |
For each input you can choose its source: select **Restream (go2rtc)** to pick an existing [go2rtc stream](restream.md) from a dropdown (Frigate uses the `rtsp://127.0.0.1:8554/<stream>` path and `preset-rtsp-restream` input args for that input automatically), or **Manual input path** to type the stream URL directly.
Navigate to <NavPath path="Settings > Camera configuration > Object detection" />.
| Field | Description |

View File

@ -61,7 +61,7 @@ Configure the go2rtc stream and point the camera inputs at the local restream.
<ConfigTabs>
<TabItem value="ui">
Navigate to <NavPath path="Settings > System > go2rtc streams" /> and add stream entries for each camera. Then navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" /> for each camera and set the input paths to use the local restream URL (`rtsp://127.0.0.1:8554/<camera_name>`).
Navigate to <NavPath path="Settings > System > go2rtc streams" /> and add stream entries for each camera. Then navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" /> for each camera. For each input, choose **Restream (go2rtc)** and pick the matching stream from the dropdown — Frigate uses the local restream URL (`rtsp://127.0.0.1:8554/<camera_name>`) and the `preset-rtsp-restream` input args for that input automatically. (Choose **Manual input path** instead to type a URL directly.)
</TabItem>
<TabItem value="yaml">
@ -111,7 +111,7 @@ Two connections are made to the camera. One for the sub stream, one for the rest
<ConfigTabs>
<TabItem value="ui">
Navigate to <NavPath path="Settings > System > go2rtc streams" /> and add stream entries for each camera and its sub stream. Then navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" /> for each camera and configure separate inputs for the main and sub streams using the local restream URLs.
Navigate to <NavPath path="Settings > System > go2rtc streams" /> and add stream entries for each camera and its sub stream. Then navigate to <NavPath path="Settings > Camera configuration > Streams (FFmpeg)" /> for each camera and add separate inputs for the main and sub streams. Set each input's source to **Restream (go2rtc)** and pick the matching stream from the dropdown — Frigate uses the local restream URL and the `preset-rtsp-restream` input args for that input automatically.
</TabItem>
<TabItem value="yaml">

File diff suppressed because one or more lines are too long

View File

@ -111,6 +111,18 @@ def generate_config():
return snapshot
def generate_config_schema():
"""Generate the JSON Schema for FrigateConfig from the backend model.
This is what the app fetches from /api/config/schema.json to drive the
RJSF-based config form. Generating it here keeps the e2e fixture in sync
with the backend whenever config models change.
"""
from frigate.config import FrigateConfig
return FrigateConfig.model_json_schema()
def generate_reviews():
"""Generate ReviewSegmentResponse[] validated against Pydantic + Peewee."""
from frigate.api.defs.response.review_response import ReviewSegmentResponse
@ -411,6 +423,7 @@ def main():
print()
write_json("config-snapshot.json", generate_config())
write_json("config-schema.json", generate_config_schema())
write_json("reviews.json", generate_reviews())
write_json("events.json", generate_events())
write_json("exports.json", generate_exports())

View File

@ -0,0 +1,203 @@
/**
* Camera ffmpeg streams settings tests -- MEDIUM tier.
*
* Covers the input-path source toggle: each ffmpeg input can either point at a
* go2rtc restream (picked from a dropdown, which writes the rtsp://127.0.0.1:8554
* path plus the preset-rtsp-restream input_args) or use a manually typed path.
*/
import { readFileSync } from "node:fs";
import { resolve, dirname } from "node:path";
import { fileURLToPath } from "node:url";
import { test, expect } from "../../fixtures/frigate-test";
import type { Page } from "@playwright/test";
import { configFactory } from "../../fixtures/mock-data/config";
const __dirname = dirname(fileURLToPath(import.meta.url));
const CONFIG_SCHEMA = JSON.parse(
readFileSync(
resolve(__dirname, "../../fixtures/mock-data/config-schema.json"),
"utf-8",
),
);
const GO2RTC_STREAMS = {
dome_main: ["rtsp://user:pass@192.168.0.20:554/Stream1"],
dome_sub: ["rtsp://user:pass@192.168.0.20:554/Stream2"],
};
type CameraInput = {
path: string;
roles: string[];
input_args?: string;
};
async function installRoutes(page: Page, frontDoorInputs: CameraInput[]) {
const config = configFactory({
go2rtc: { streams: GO2RTC_STREAMS },
cameras: {
front_door: {
ffmpeg: { inputs: frontDoorInputs },
},
},
});
let lastSavedConfig: unknown = null;
await page.route("**/api/config/schema.json", (route) =>
route.fulfill({ json: CONFIG_SCHEMA }),
);
await page.route("**/api/config", (route) => {
if (route.request().method() === "GET") {
return route.fulfill({ json: config });
}
return route.fulfill({ json: { success: true } });
});
await page.route("**/api/config/raw_paths", (route) =>
route.fulfill({
json: {
cameras: { front_door: { ffmpeg: { inputs: frontDoorInputs } } },
go2rtc: { streams: GO2RTC_STREAMS },
},
}),
);
await page.route("**/api/config/set", async (route) => {
lastSavedConfig = route.request().postDataJSON();
await route.fulfill({ json: { success: true, require_restart: false } });
});
await page.route("**/api/ffmpeg/presets", (route) =>
route.fulfill({
json: {
hwaccel_args: [],
input_args: ["preset-rtsp-restream", "preset-rtsp-generic"],
output_args: { record: [], detect: [] },
},
}),
);
return { capturedConfig: () => lastSavedConfig };
}
const RESTREAM_RADIO = "Restream (go2rtc)";
const MANUAL_RADIO = "Manual input path";
test.describe("camera ffmpeg input source toggle @medium", () => {
test("manual input defaults to the manual text field", async ({
frigateApp,
}) => {
await installRoutes(frigateApp.page, [
{ path: "rtsp://10.0.0.1:554/video", roles: ["detect"] },
]);
await frigateApp.goto("/settings?page=cameraFfmpeg&camera=front_door");
await expect(
frigateApp.page.getByRole("radio", { name: MANUAL_RADIO }),
).toBeChecked();
await expect(
frigateApp.page.getByRole("textbox", { name: "Input path" }),
).toHaveValue("rtsp://10.0.0.1:554/video");
});
test("an existing restream path auto-detects into restream mode", async ({
frigateApp,
}) => {
await installRoutes(frigateApp.page, [
{
path: "rtsp://127.0.0.1:8554/dome_main",
roles: ["detect"],
input_args: "preset-rtsp-restream",
},
]);
await frigateApp.goto("/settings?page=cameraFfmpeg&camera=front_door");
await expect(
frigateApp.page.getByRole("radio", { name: RESTREAM_RADIO }),
).toBeChecked();
// The dropdown is preselected to the matching go2rtc stream.
await expect(
frigateApp.page.getByRole("combobox", { name: /go2rtc stream/i }),
).toContainText("dome_main");
});
test("selecting a restream writes the path and preset", async ({
frigateApp,
}) => {
const capture = await installRoutes(frigateApp.page, [
{ path: "rtsp://10.0.0.1:554/video", roles: ["detect"] },
]);
await frigateApp.goto("/settings?page=cameraFfmpeg&camera=front_door");
await frigateApp.page.getByRole("radio", { name: RESTREAM_RADIO }).click();
await frigateApp.page
.getByRole("combobox", { name: /go2rtc stream/i })
.click();
// The dropdown is searchable: typing narrows the list to matches only,
// with no option to enter a custom stream name.
await frigateApp.page.getByPlaceholder("Search streams...").fill("sub");
await expect(
frigateApp.page.getByRole("option", { name: "dome_main" }),
).toBeHidden();
await frigateApp.page.getByRole("option", { name: "dome_sub" }).click();
await frigateApp.page.getByRole("button", { name: "Save" }).click();
await expect
.poll(() => capture.capturedConfig(), { timeout: 5_000 })
.toMatchObject({
config_data: {
cameras: {
front_door: {
ffmpeg: {
inputs: [
{
path: "rtsp://127.0.0.1:8554/dome_sub",
input_args: "preset-rtsp-restream",
},
],
},
},
},
},
});
});
test("switching a restream back to manual reverts the preset", async ({
frigateApp,
}) => {
const capture = await installRoutes(frigateApp.page, [
{
path: "rtsp://127.0.0.1:8554/dome_main",
roles: ["detect"],
input_args: "preset-rtsp-restream",
},
]);
await frigateApp.goto("/settings?page=cameraFfmpeg&camera=front_door");
await frigateApp.page.getByRole("radio", { name: MANUAL_RADIO }).click();
// The restream path stays editable in the manual text field.
await expect(
frigateApp.page.getByRole("textbox", { name: "Input path" }),
).toHaveValue("rtsp://127.0.0.1:8554/dome_main");
await frigateApp.page.getByRole("button", { name: "Save" }).click();
await expect
.poll(() => capture.capturedConfig(), { timeout: 5_000 })
.not.toBeNull();
const payload = capture.capturedConfig() as {
config_data?: {
cameras?: {
front_door?: {
ffmpeg?: { inputs?: Array<{ input_args?: unknown }> };
};
};
};
};
const input =
payload?.config_data?.cameras?.front_door?.ffmpeg?.inputs?.[0];
expect(input?.input_args).not.toBe("preset-rtsp-restream");
});
});

View File

@ -1553,7 +1553,17 @@
}
},
"cameraInputs": {
"itemTitle": "Stream {{index}}"
"itemTitle": "Stream {{index}}",
"sourceMode": {
"restream": "Restream (go2rtc)",
"manual": "Manual input path",
"go2rtcStreamLabel": "go2rtc stream",
"go2rtcStreamPlaceholder": "Select a go2rtc stream",
"noGo2rtcStreams": "No go2rtc streams configured",
"go2rtcStreamSearch": "Search streams...",
"availableStreams": "Available streams",
"noMatchingStreams": "No matching streams"
}
},
"restartRequiredField": "Restart required",
"restartRequiredFooter": "Configuration changed - Restart required",

View File

@ -29,11 +29,19 @@ import {
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { StreamSourceSelector } from "./StreamSourceSelector";
import {
buildRestreamPath,
parseRestreamStreamName,
RESTREAM_PRESET,
type StreamSourceMode,
} from "./streamSource";
type FfmpegInput = {
path?: string;
roles?: string[];
hwaccel_args?: unknown;
input_args?: unknown;
};
const asInputList = (formData: unknown): FfmpegInput[] => {
@ -137,7 +145,30 @@ export function CameraInputsField(props: FieldProps) {
);
const SchemaField = registry.fields.SchemaField;
const go2rtcStreamNames = useMemo<string[]>(() => {
const streams = formContext?.fullConfig?.go2rtc?.streams;
if (!streams || typeof streams !== "object") {
return [];
}
return Object.keys(streams).sort();
}, [formContext?.fullConfig?.go2rtc?.streams]);
const [openByIndex, setOpenByIndex] = useState<Record<number, boolean>>({});
const [sourceModeByIndex, setSourceModeByIndex] = useState<
Record<number, StreamSourceMode>
>({});
// Detect whether an existing input path points at a known go2rtc restream so
// the source toggle can default to the right mode for existing configs.
const detectMode = useCallback(
(path: string | undefined): StreamSourceMode => {
const streamName = parseRestreamStreamName(path);
return streamName && go2rtcStreamNames.includes(streamName)
? "restream"
: "manual";
},
[go2rtcStreamNames],
);
useEffect(() => {
setOpenByIndex((previous) => {
@ -171,6 +202,55 @@ export function CameraInputsField(props: FieldProps) {
[fieldPathId.path, inputs, onChange],
);
// Update several fields of one input in a single change so that path and
// input_args never race on a stale snapshot of inputs.
const handleFieldValuesChange = useCallback(
(index: number, partial: Record<string, unknown>) => {
const nextInputs = cloneDeep(inputs);
const item =
(nextInputs[index] as Record<string, unknown> | undefined) ??
({} as Record<string, unknown>);
Object.assign(item, partial);
nextInputs[index] = item;
onChange(normalizeNonDetectHwaccel(nextInputs), fieldPathId.path);
},
[fieldPathId.path, inputs, onChange],
);
const handleSourceModeChange = useCallback(
(index: number, nextMode: StreamSourceMode) => {
const input = inputs[index];
const currentPath =
typeof input?.path === "string" ? input.path : undefined;
if (nextMode === "manual") {
// Only revert the preset we set ourselves; never clobber custom args.
if (input?.input_args === RESTREAM_PRESET) {
handleFieldValuesChange(index, { input_args: undefined });
}
} else if (!parseRestreamStreamName(currentPath)) {
// Entering restream with a non-restream path: clear it so the dropdown
// shows its placeholder until a stream is chosen.
handleFieldValuesChange(index, { path: undefined });
}
setSourceModeByIndex((previous) => ({ ...previous, [index]: nextMode }));
},
[inputs, handleFieldValuesChange],
);
const handleSelectRestreamStream = useCallback(
(index: number, streamName: string) => {
handleFieldValuesChange(index, {
path: buildRestreamPath(streamName),
input_args: RESTREAM_PRESET,
});
},
[handleFieldValuesChange],
);
const handleAddInput = useCallback(() => {
const base = itemSchema
? (applySchemaDefaults(itemSchema) as FfmpegInput)
@ -186,8 +266,9 @@ export function CameraInputsField(props: FieldProps) {
(_, currentIndex) => currentIndex !== index,
);
onChange(nextInputs, fieldPathId.path);
setOpenByIndex((previous) => {
const next: Record<number, boolean> = {};
const reindex = <T,>(previous: Record<number, T>): Record<number, T> => {
const next: Record<number, T> = {};
Object.entries(previous).forEach(([key, value]) => {
const current = Number(key);
if (Number.isNaN(current) || current === index) {
@ -197,7 +278,10 @@ export function CameraInputsField(props: FieldProps) {
next[current > index ? current - 1 : current] = value;
});
return next;
});
};
setOpenByIndex(reindex);
setSourceModeByIndex(reindex);
},
[fieldPathId.path, inputs, onChange],
);
@ -354,16 +438,32 @@ export function CameraInputsField(props: FieldProps) {
<CollapsibleContent>
<CardContent className="space-y-4 p-4 pt-0">
<div className="w-full">
{renderField(index, "path", {
extraUiSchema: {
"ui:widget": "CameraPathWidget",
"ui:options": {
size: "full",
splitLayout: false,
<StreamSourceSelector
idPrefix={`${baseId}-${index}`}
mode={sourceModeByIndex[index] ?? detectMode(input.path)}
onModeChange={(nextMode) =>
handleSourceModeChange(index, nextMode)
}
streamNames={go2rtcStreamNames}
selectedStreamName={
parseRestreamStreamName(input.path) ?? ""
}
onSelectStream={(streamName) =>
handleSelectRestreamStream(index, streamName)
}
manualField={renderField(index, "path", {
extraUiSchema: {
"ui:widget": "CameraPathWidget",
"ui:options": {
size: "full",
splitLayout: false,
},
},
},
showSchemaDescription: true,
})}
showSchemaDescription: true,
})}
disabled={disabled}
readonly={readonly}
/>
</div>
<div className="w-full">{renderField(index, "roles")}</div>

View File

@ -0,0 +1,217 @@
import type { ReactNode } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/components/ui/command";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { cn } from "@/lib/utils";
import { Check, ChevronsUpDown } from "lucide-react";
import type { StreamSourceMode } from "./streamSource";
type Go2rtcStreamComboboxProps = {
id: string;
value: string;
options: string[];
disabled?: boolean;
onSelect: (streamName: string) => void;
};
// Searchable dropdown of existing go2rtc streams
function Go2rtcStreamCombobox({
id,
value,
options,
disabled,
onSelect,
}: Go2rtcStreamComboboxProps) {
const { t } = useTranslation(["views/settings", "common"]);
const [open, setOpen] = useState(false);
const [searchValue, setSearchValue] = useState("");
const commit = (next: string) => {
onSelect(next);
setSearchValue("");
setOpen(false);
};
return (
<Popover
open={open}
onOpenChange={(next) => {
setOpen(next);
if (!next) setSearchValue("");
}}
>
<PopoverTrigger asChild>
<Button
id={id}
type="button"
variant="outline"
role="combobox"
aria-expanded={open}
disabled={disabled}
className={cn(
"w-full justify-between font-normal sm:max-w-xs",
!value && "text-muted-foreground",
)}
>
<span className="truncate">
{value ||
t("configForm.cameraInputs.sourceMode.go2rtcStreamPlaceholder")}
</span>
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[--radix-popover-trigger-width] p-0">
<Command>
<CommandInput
placeholder={t(
"configForm.cameraInputs.sourceMode.go2rtcStreamSearch",
)}
value={searchValue}
onValueChange={setSearchValue}
/>
<CommandList>
<CommandEmpty>
{t("configForm.cameraInputs.sourceMode.noMatchingStreams")}
</CommandEmpty>
<CommandGroup
heading={t("configForm.cameraInputs.sourceMode.availableStreams")}
>
{options.map((option) => (
<CommandItem
key={option}
value={option}
onSelect={() => commit(option)}
>
<Check
className={cn(
"mr-2 h-4 w-4",
value === option ? "opacity-100" : "opacity-0",
)}
/>
{option}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
}
type StreamSourceSelectorProps = {
idPrefix: string;
mode: StreamSourceMode;
onModeChange: (mode: StreamSourceMode) => void;
streamNames: string[];
selectedStreamName: string;
onSelectStream: (streamName: string) => void;
manualField: ReactNode;
disabled?: boolean;
readonly?: boolean;
};
export function StreamSourceSelector({
idPrefix,
mode,
onModeChange,
streamNames,
selectedStreamName,
onSelectStream,
manualField,
disabled,
readonly,
}: StreamSourceSelectorProps) {
const { t } = useTranslation(["views/settings", "common"]);
const restreamId = `${idPrefix}-source-restream`;
const manualId = `${idPrefix}-source-manual`;
const selectId = `${idPrefix}-restream-select`;
const hasStreams = streamNames.length > 0;
const isDisabled = disabled || readonly;
return (
<div className="space-y-3">
<RadioGroup
value={mode}
onValueChange={(value) => onModeChange(value as StreamSourceMode)}
className="flex flex-col gap-2 sm:flex-row sm:gap-6"
disabled={isDisabled}
>
<div className="flex items-center space-x-2">
<RadioGroupItem
value="restream"
id={restreamId}
className={
mode === "restream"
? "bg-selected from-selected/50 to-selected/90 text-selected"
: "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
}
/>
<label htmlFor={restreamId} className="cursor-pointer text-sm">
{t("configForm.cameraInputs.sourceMode.restream")}
</label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem
value="manual"
id={manualId}
className={
mode === "manual"
? "bg-selected from-selected/50 to-selected/90 text-selected"
: "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
}
/>
<label htmlFor={manualId} className="cursor-pointer text-sm">
{t("configForm.cameraInputs.sourceMode.manual")}
</label>
</div>
</RadioGroup>
{mode === "restream" ? (
<div className="space-y-2 pt-1">
<Label htmlFor={selectId} className="block">
{t("configForm.cameraInputs.sourceMode.go2rtcStreamLabel")}
</Label>
{hasStreams ? (
<Go2rtcStreamCombobox
id={selectId}
value={selectedStreamName}
options={streamNames}
disabled={isDisabled}
onSelect={onSelectStream}
/>
) : (
<p
className={cn(
"rounded-md border border-dashed p-3 text-sm text-muted-foreground sm:max-w-xs",
)}
>
{t("configForm.cameraInputs.sourceMode.noGo2rtcStreams")}
</p>
)}
</div>
) : (
manualField
)}
</div>
);
}
export default StreamSourceSelector;

View File

@ -0,0 +1,33 @@
export type StreamSourceMode = "restream" | "manual";
// The literal go2rtc restream prefix matches what the camera wizard inlines
// when it builds a restreamed input path. Only this exact host:port is treated
// as a restream so manually typed URLs (including localhost) stay manual.
export const RESTREAM_PREFIX = "rtsp://127.0.0.1:8554/";
export const RESTREAM_PRESET = "preset-rtsp-restream";
/** Build the restream input path for a given go2rtc stream name. */
export function buildRestreamPath(streamName: string): string {
return `${RESTREAM_PREFIX}${streamName}`;
}
/**
* Extract the go2rtc stream name from a restream input path.
*
* Returns the stream name when the path is a well-formed restream URL with no
* extra path segments or query, otherwise undefined.
*/
export function parseRestreamStreamName(
path: string | undefined,
): string | undefined {
if (typeof path !== "string" || !path.startsWith(RESTREAM_PREFIX)) {
return undefined;
}
const name = path.slice(RESTREAM_PREFIX.length);
if (name.length === 0 || /[/?#]/.test(name)) {
return undefined;
}
return name;
}