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

preserve aspect ratio

Browse Source
This commit is contained in:
Josh Hawkins 2024-03-13 08:49:34 -05:00
parent 28158b958e
commit 048dae3182
3 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,7 +37,11 @@ export default function BirdseyeLivePlayer({
} else if (liveMode == "jsmpeg") { } else if (liveMode == "jsmpeg") {
return ( return (
<div className={`max-w-[${birdseyeConfig.width}px]`}> <div className={`max-w-[${birdseyeConfig.width}px]`}>
<JSMpegPlayer camera="birdseye" /> <JSMpegPlayer
camera="birdseye"
width={birdseyeConfig.width}
height={birdseyeConfig.height}
/>
</div> </div>
); );
} else { } else {

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

@ -6,9 +6,16 @@ import { useEffect, useRef } from "react";
type JSMpegPlayerProps = { type JSMpegPlayerProps = {
className?: string; className?: string;
camera: string; camera: string;
width: number;
height: number;
}; };
export default function JSMpegPlayer({ camera, className }: JSMpegPlayerProps) { export default function JSMpegPlayer({
camera,
width,
height,
className,
}: JSMpegPlayerProps) {
const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`; const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`;
const playerRef = useRef<HTMLDivElement | null>(null); const playerRef = useRef<HTMLDivElement | null>(null);
const containerRef = useRef<HTMLDivElement | null>(null); const containerRef = useRef<HTMLDivElement | null>(null);
@ -38,7 +45,11 @@ export default function JSMpegPlayer({ camera, className }: JSMpegPlayerProps) {
return ( return (
<div className={className} ref={containerRef}> <div className={className} ref={containerRef}>
<div ref={playerRef} className="jsmpeg size-full" /> <div
ref={playerRef}
className="jsmpeg size-full"
style={{ aspectRatio: width / height }}
/>
</div> </div>
); );
} }

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

@ -46,7 +46,8 @@ export default function LivePlayer({
// camera live state // camera live state
const liveMode = useCameraLiveMode(cameraConfig, preferredLiveMode); // const liveMode = useCameraLiveMode(cameraConfig, preferredLiveMode);
const liveMode = "jsmpeg";
const [liveReady, setLiveReady] = useState(false); const [liveReady, setLiveReady] = useState(false);
useEffect(() => { useEffect(() => {
@ -124,6 +125,8 @@ export default function LivePlayer({
<JSMpegPlayer <JSMpegPlayer
className="size-full flex justify-center rounded-2xl overflow-hidden" className="size-full flex justify-center rounded-2xl overflow-hidden"
camera={cameraConfig.name} camera={cameraConfig.name}
width={cameraConfig.detect.width}
height={cameraConfig.detect.height}
/> />
); );
} else { } else {