mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-06-20 19:31:53 +03:00
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
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:
parent
a7df17cc61
commit
282e70d4bf
@ -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 |
|
||||
|
||||
@ -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">
|
||||
|
||||
1
web/e2e/fixtures/mock-data/config-schema.json
Normal file
1
web/e2e/fixtures/mock-data/config-schema.json
Normal file
File diff suppressed because one or more lines are too long
@ -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())
|
||||
|
||||
203
web/e2e/specs/settings/camera-ffmpeg-streams.spec.ts
Normal file
203
web/e2e/specs/settings/camera-ffmpeg-streams.spec.ts
Normal 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");
|
||||
});
|
||||
});
|
||||
@ -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",
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
33
web/src/components/config-form/theme/fields/streamSource.ts
Normal file
33
web/src/components/config-form/theme/fields/streamSource.ts
Normal 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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user