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

audio and two way talk indicators in single camera view

Browse Source
This commit is contained in:
Josh Hawkins 2024-12-26 09:04:19 -06:00
parent 97918d2bbe
commit b0a3439249
1 changed files with 99 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
web/src/views/live/LiveCameraView.tsx
View File

@ -17,6 +17,11 @@ import {
DropdownMenuItem, DropdownMenuItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { TooltipProvider } from "@/components/ui/tooltip"; import { TooltipProvider } from "@/components/ui/tooltip";
import { useResizeObserver } from "@/hooks/resize-observer"; import { useResizeObserver } from "@/hooks/resize-observer";
import useKeyboardListener from "@/hooks/use-keyboard-listener"; import useKeyboardListener from "@/hooks/use-keyboard-listener";
@ -59,13 +64,17 @@ import { GiSpeaker, GiSpeakerOff } from "react-icons/gi";
import { TbViewfinder, TbViewfinderOff } from "react-icons/tb"; import { TbViewfinder, TbViewfinderOff } from "react-icons/tb";
import { IoIosWarning, IoMdArrowRoundBack } from "react-icons/io"; import { IoIosWarning, IoMdArrowRoundBack } from "react-icons/io";
import { import {
LuCheck,
LuCog, LuCog,
LuEar, LuEar,
LuEarOff, LuEarOff,
LuExternalLink,
LuHistory, LuHistory,
LuInfo,
LuPictureInPicture, LuPictureInPicture,
LuVideo, LuVideo,
LuVideoOff, LuVideoOff,
LuX,
} from "react-icons/lu"; } from "react-icons/lu";
import { import {
MdNoPhotography, MdNoPhotography,
@ -76,7 +85,7 @@ import {
MdZoomIn, MdZoomIn,
MdZoomOut, MdZoomOut,
} from "react-icons/md"; } from "react-icons/md";
import { useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import useSWR from "swr"; import useSWR from "swr";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -488,6 +497,8 @@ export default function LiveCameraView({
setPlayInBackground={setPlayInBackground} setPlayInBackground={setPlayInBackground}
isRestreamed={isRestreamed ?? false} isRestreamed={isRestreamed ?? false}
setLowBandwidth={setLowBandwidth} setLowBandwidth={setLowBandwidth}
supportsAudioOutput={supportsAudioOutput}
supports2WayTalk={supports2WayTalk}
/> />
</div> </div>
</TooltipProvider> </TooltipProvider>
@ -791,6 +802,8 @@ type FrigateCameraFeaturesProps = {
setPlayInBackground: (value: boolean | undefined) => void; setPlayInBackground: (value: boolean | undefined) => void;
isRestreamed: boolean; isRestreamed: boolean;
setLowBandwidth: React.Dispatch<React.SetStateAction<boolean>>; setLowBandwidth: React.Dispatch<React.SetStateAction<boolean>>;
supportsAudioOutput: boolean;
supports2WayTalk: boolean;
}; };
function FrigateCameraFeatures({ function FrigateCameraFeatures({
camera, camera,
@ -805,6 +818,8 @@ function FrigateCameraFeatures({
setPlayInBackground, setPlayInBackground,
isRestreamed, isRestreamed,
setLowBandwidth, setLowBandwidth,
supportsAudioOutput,
supports2WayTalk,
}: FrigateCameraFeaturesProps) { }: FrigateCameraFeaturesProps) {
const { payload: detectState, send: sendDetect } = useDetectState( const { payload: detectState, send: sendDetect } = useDetectState(
camera.name, camera.name,
@ -918,6 +933,89 @@ function FrigateCameraFeatures({
</SelectContent> </SelectContent>
</Select> </Select>
{preferredLiveMode != "jsmpeg" && isRestreamed && (
<div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
{supportsAudioOutput ? (
<>
<LuCheck className="size-4 text-success" />
<div>Audio is available for this stream</div>
</>
) : (
<>
<LuX className="size-4 text-danger" />
<div>Audio is unavailable for this stream</div>
<Popover>
<PopoverTrigger asChild>
<div className="cursor-pointer p-0">
<LuInfo className="size-4" />
<span className="sr-only">Info</span>
</div>
</PopoverTrigger>
<PopoverContent className="w-80">
Audio must be output from your camera and
configured in go2rtc for this stream.
<div className="mt-2 flex items-center text-primary">
<Link
to="https://docs.frigate.video/configuration/live"
target="_blank"
rel="noopener noreferrer"
className="inline"
>
Read the documentation{" "}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
</PopoverContent>
</Popover>
</>
)}
</div>
)}
{preferredLiveMode != "jsmpeg" &&
isRestreamed &&
supportsAudioOutput && (
<div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
{supports2WayTalk ? (
<>
<LuCheck className="size-4 text-success" />
<div>
Two-way talk is available for this stream
</div>
</>
) : (
<>
<LuX className="size-4 text-danger" />
<div>
Two-way talk is unavailable for this stream
</div>
<Popover>
<PopoverTrigger asChild>
<div className="cursor-pointer p-0">
<LuInfo className="size-4" />
<span className="sr-only">Info</span>
</div>
</PopoverTrigger>
<PopoverContent className="w-80">
Your device must suppport the feature and
WebRTC must be configured for two-way talk.
<div className="mt-2 flex items-center text-primary">
<Link
to="https://docs.frigate.video/configuration/live/#webrtc-extra-configuration"
target="_blank"
rel="noopener noreferrer"
className="inline"
>
Read the documentation{" "}
<LuExternalLink className="ml-2 inline-flex size-3" />
</Link>
</div>
</PopoverContent>
</Popover>
</>
)}
</div>
)}
{preferredLiveMode == "jsmpeg" && isRestreamed && ( {preferredLiveMode == "jsmpeg" && isRestreamed && (
<div className="flex flex-col items-center gap-3"> <div className="flex flex-col items-center gap-3">
<div className="flex flex-row items-center gap-2"> <div className="flex flex-row items-center gap-2">