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

make jsmpeg canvas responsive

Browse Source
This commit is contained in:
Josh Hawkins 2024-05-27 14:10:22 -05:00
parent a86e22e0fc
commit 6a5366d320
1 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,7 +18,6 @@ export default function JSMpegPlayer({
}: JSMpegPlayerProps) {
const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`;
const playerRef = useRef<HTMLDivElement | null>(null);
const containerRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
if (!playerRef.current) {
@ -28,7 +27,7 @@ export default function JSMpegPlayer({
const video = new JSMpeg.VideoElement(
playerRef.current,
url,
{},
{ canvas: "#video-canvas" },
{ protocols: [], audio: false, videoBufferSize: 1024 * 1024 * 4 },
);
@ -44,12 +43,17 @@ export default function JSMpegPlayer({
}, [url]);
return (
<div className={className} ref={containerRef}>
<div className={className}>
<div
ref={playerRef}
className="jsmpeg h-full"
style={{ aspectRatio: width / height }}
/>
>
<canvas
id="video-canvas"
style={{ width: "100%", height: "100%" }}
></canvas>
</div>
</div>
);
}