administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-17 16:44:29 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

apply streaming settings in camera groups

Browse Source
This commit is contained in:
Josh Hawkins 2024-11-13 08:46:18 -06:00
parent a6cf755529
commit 3d2d51860d
7 changed files with 62 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/components/player/BirdseyeLivePlayer.tsx
View File

@ -58,6 +58,7 @@ export default function BirdseyeLivePlayer({
height={birdseyeConfig.height}
containerRef={containerRef}
playbackEnabled={true}
useWebGL={true}
/>
);
} else {

6
web/src/components/player/JSMpegPlayer.tsx
View File

@ -12,6 +12,7 @@ type JSMpegPlayerProps = {
height: number;
containerRef: React.MutableRefObject<HTMLDivElement | null>;
playbackEnabled: boolean;
useWebGL: boolean;
onPlaying?: () => void;
};
@ -22,6 +23,7 @@ export default function JSMpegPlayer({
className,
containerRef,
playbackEnabled,
useWebGL = false,
onPlaying,
}: JSMpegPlayerProps) {
const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`;
@ -123,8 +125,8 @@ export default function JSMpegPlayer({
{
protocols: [],
audio: false,
disableGl: camera != "birdseye",
disableWebAssembly: camera != "birdseye",
disableGl: !useWebGL,
disableWebAssembly: !useWebGL,
videoBufferSize: 1024 * 1024 * 4,
onVideoDecode: () => {
if (!hasDataRef.current) {

3
web/src/components/player/LivePlayer.tsx
View File

@ -29,6 +29,7 @@ type LivePlayerProps = {
streamName: string;
preferredLiveMode: LivePlayerMode;
showStillWithoutActivity?: boolean;
useWebGL: boolean;
windowVisible?: boolean;
playAudio?: boolean;
micEnabled?: boolean; // only webrtc supports mic
@ -49,6 +50,7 @@ export default function LivePlayer({
streamName,
preferredLiveMode,
showStillWithoutActivity = true,
useWebGL = false,
windowVisible = true,
playAudio = false,
micEnabled = false,
@ -219,6 +221,7 @@ export default function LivePlayer({
playbackEnabled={
cameraActive || !showStillWithoutActivity || liveReady
}
useWebGL={useWebGL}
containerRef={containerRef ?? internalContainerRef}
onPlaying={playerIsPlaying}
/>

14
web/src/components/settings/CameraStreamingDialog.tsx
View File

@ -21,7 +21,8 @@ import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";
import {
FrigateConfig,
GroupStreamingSettingsType,
GroupStreamingSettings,
StreamType,
} from "@/types/frigateConfig";
import ActivityIndicator from "../indicators/activity-indicator";
import { LuSettings } from "react-icons/lu";
@ -30,9 +31,9 @@ type CameraStreamingDialogProps = {
camera: string;
selectedCameras: string[];
config?: FrigateConfig;
groupStreamingSettings: GroupStreamingSettingsType;
groupStreamingSettings: GroupStreamingSettings;
setGroupStreamingSettings: React.Dispatch<
React.SetStateAction<GroupStreamingSettingsType>
React.SetStateAction<GroupStreamingSettings>
>;
};
@ -47,7 +48,7 @@ export function CameraStreamingDialog({
const [isLoading, setIsLoading] = useState(false);
const [streamName, setStreamName] = useState("");
const [streamType, setStreamType] = useState("smart");
const [streamType, setStreamType] = useState<StreamType>("smart");
const [compatibilityMode, setCompatibilityMode] = useState(false);
useEffect(() => {
@ -154,7 +155,10 @@ export function CameraStreamingDialog({
<Label htmlFor="streaming-method" className="text-right">
Streaming Method
</Label>
<Select value={streamType} onValueChange={setStreamType}>
<Select
value={streamType}
onValueChange={(value) => setStreamType(value as StreamType)}
>
<SelectTrigger className="">
<SelectValue placeholder="Choose a streaming option" />
</SelectTrigger>

4
web/src/types/frigateConfig.ts
View File

@ -229,9 +229,11 @@ export type CameraGroupConfig = {
order: number;
};
export type StreamType = "no-streaming" | "smart" | "continuous";
export type CameraStreamingSettings = {
streamName: string;
streamType: string;
streamType: StreamType;
compatibilityMode: boolean;
};

41
web/src/views/live/DraggableGridLayout.tsx
View File

@ -57,6 +57,7 @@ type DraggableGridLayoutProps = {
setIsEditMode: React.Dispatch<React.SetStateAction<boolean>>;
fullscreen: boolean;
toggleFullscreen: () => void;
allGroupsStreamingSettings: AllGroupsStreamingSettings;
setAllGroupsStreamingSettings: React.Dispatch<
React.SetStateAction<AllGroupsStreamingSettings>
>;
@ -74,6 +75,7 @@ export default function DraggableGridLayout({
setIsEditMode,
fullscreen,
toggleFullscreen,
allGroupsStreamingSettings,
setAllGroupsStreamingSettings,
}: DraggableGridLayoutProps) {
const { data: config } = useSWR<FrigateConfig>("config");
@ -84,6 +86,16 @@ export default function DraggableGridLayout({
const { preferredLiveModes, setPreferredLiveModes, resetPreferredLiveMode } =
useCameraLiveMode(cameras, windowVisible);
const [globalAutoLive] = usePersistence("autoLiveView", true);
const currentGroupStreamingSettings = useMemo(() => {
if (cameraGroup && cameraGroup != "default" && allGroupsStreamingSettings) {
return allGroupsStreamingSettings[cameraGroup];
}
}, [allGroupsStreamingSettings, cameraGroup]);
// grid layout
const ResponsiveGridLayout = useMemo(() => WidthProvider(Responsive), []);
const [gridLayout, setGridLayout, isGridLayoutLoaded] = usePersistence<
@ -426,9 +438,25 @@ export default function DraggableGridLayout({
} else {
grow = "aspect-video";
}
const streamName =
currentGroupStreamingSettings?.[camera.name]?.streamName ||
Object.values(camera.live.streams)[0];
const autoLive =
currentGroupStreamingSettings?.[camera.name]?.streamType !==
"no-streaming";
const showStillWithoutActivity =
currentGroupStreamingSettings?.[camera.name]?.streamType !==
"continuous";
const useWebGL =
currentGroupStreamingSettings?.[camera.name]
?.compatibilityMode || false;
return (
<LivePlayerGridItem
key={camera.name}
streamName={streamName}
autoLive={autoLive ?? globalAutoLive}
showStillWithoutActivity={showStillWithoutActivity ?? true}
useWebGL={useWebGL}
cameraRef={cameraRef}
className={cn(
"rounded-lg bg-black md:rounded-2xl",
@ -616,6 +644,10 @@ type LivePlayerGridItemProps = {
onClick: () => void;
onError: (e: LivePlayerError) => void;
onResetLiveMode: () => void;
streamName: string;
autoLive: boolean;
showStillWithoutActivity: boolean;
useWebGL: boolean;
};
const LivePlayerGridItem = React.forwardRef<
@ -637,6 +669,10 @@ const LivePlayerGridItem = React.forwardRef<
onClick,
onError,
onResetLiveMode,
autoLive,
showStillWithoutActivity,
streamName,
useWebGL,
...props
},
ref,
@ -656,11 +692,14 @@ const LivePlayerGridItem = React.forwardRef<
windowVisible={windowVisible}
cameraConfig={cameraConfig}
preferredLiveMode={preferredLiveMode}
streamName={Object.values(cameraConfig.live.streams)[0]}
streamName={streamName}
onClick={onClick}
onError={onError}
onResetLiveMode={onResetLiveMode}
containerRef={ref as React.RefObject<HTMLDivElement>}
autoLive={autoLive}
showStillWithoutActivity={showStillWithoutActivity}
useWebGL={useWebGL}
/>
{children}
</div>

12
web/src/views/live/LiveDashboardView.tsx
View File

@ -197,22 +197,12 @@ export default function LiveDashboardView({
const [persistedStreamingSettings, _, isStreamingSettingsLoaded] =
usePersistence<AllGroupsStreamingSettings>("streaming-settings");
const currentGroupStreamingSettings = useMemo(() => {
if (cameraGroup && cameraGroup != "default" && allGroupsStreamingSettings) {
return allGroupsStreamingSettings[cameraGroup];
}
}, [allGroupsStreamingSettings, cameraGroup]);
useEffect(() => {
if (isStreamingSettingsLoaded) {
setAllGroupsStreamingSettings(persistedStreamingSettings ?? {});
}
}, [isStreamingSettingsLoaded, persistedStreamingSettings]);
useEffect(() => {
// console.log("group settings", cameraGroup, currentGroupStreamingSettings);
}, [currentGroupStreamingSettings, cameraGroup]);
const cameraRef = useCallback(
(node: HTMLElement | null) => {
if (!visibleCameraObserver.current) {
@ -384,6 +374,7 @@ export default function LiveDashboardView({
cameraConfig={camera}
preferredLiveMode={preferredLiveModes[camera.name] ?? "mse"}
autoLive={autoLiveView}
useWebGL={false}
streamName={Object.values(camera.live.streams)[0]}
onClick={() => onSelectCamera(camera.name)}
onError={(e) => handleError(camera.name, e)}
@ -436,6 +427,7 @@ export default function LiveDashboardView({
setIsEditMode={setIsEditMode}
fullscreen={fullscreen}
toggleFullscreen={toggleFullscreen}
allGroupsStreamingSettings={allGroupsStreamingSettings}
setAllGroupsStreamingSettings={setAllGroupsStreamingSettings}
/>
)}