administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 12:15:25 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

add playing check for webrtc

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-07 14:26:07 -07:00
parent 11d6ccd017
commit 3480bcfe1e
2 changed files with 6 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,6 @@ import { MdCircle, MdLeakAdd, MdSelectAll } from "react-icons/md";
import { BsSoundwave } from "react-icons/bs"; import { BsSoundwave } from "react-icons/bs";
import Chip from "../Chip"; import Chip from "../Chip";
import useCameraActivity from "@/hooks/use-camera-activity"; import useCameraActivity from "@/hooks/use-camera-activity";
import CameraImage from "../camera/CameraImage";
const emptyObject = Object.freeze({}); const emptyObject = Object.freeze({});
@ -90,15 +89,16 @@ export default function LivePlayer({
if (liveMode == "webrtc") { if (liveMode == "webrtc") {
player = ( player = (
<WebRtcPlayer <WebRtcPlayer
className="rounded-2xl w-full" className={`rounded-2xl h-full ${liveReady ? "" : "hidden"}`}
camera={cameraConfig.live.stream_name} camera={cameraConfig.live.stream_name}
onPlaying={() => setLiveReady(true)}
/> />
); );
} else if (liveMode == "mse") { } else if (liveMode == "mse") {
if ("MediaSource" in window || "ManagedMediaSource" in window) { if ("MediaSource" in window || "ManagedMediaSource" in window) {
player = ( player = (
<MSEPlayer <MSEPlayer
className="rounded-2xl" className={`rounded-2xl h-full ${liveReady ? "" : "hidden"}`}
camera={cameraConfig.name} camera={cameraConfig.name}
onPlaying={() => setLiveReady(true)} onPlaying={() => setLiveReady(true)}
/> />

10
web/src/components/player/WebRTCPlayer.tsx
View File

@ -4,15 +4,13 @@ import { useCallback, useEffect, useRef } from "react";
type WebRtcPlayerProps = { type WebRtcPlayerProps = {
className?: string; className?: string;
camera: string; camera: string;
width?: number; onPlaying?: () => void;
height?: number;
}; };
export default function WebRtcPlayer({ export default function WebRtcPlayer({
className, className,
camera, camera,
width, onPlaying,
height,
}: WebRtcPlayerProps) { }: WebRtcPlayerProps) {
const pcRef = useRef<RTCPeerConnection | undefined>(); const pcRef = useRef<RTCPeerConnection | undefined>();
const videoRef = useRef<HTMLVideoElement | null>(null); const videoRef = useRef<HTMLVideoElement | null>(null);
@ -154,10 +152,8 @@ export default function WebRtcPlayer({
className={className} className={className}
autoPlay autoPlay
playsInline playsInline
controls
muted muted
width={width} onLoadedData={onPlaying}
height={height}
/> />
</div> </div>
); );