administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 13:45: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) { }: 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);
useEffect(() => { useEffect(() => {
if (!playerRef.current) { if (!playerRef.current) {
@ -28,7 +27,7 @@ export default function JSMpegPlayer({
const video = new JSMpeg.VideoElement( const video = new JSMpeg.VideoElement(
playerRef.current, playerRef.current,
url, url,
{}, { canvas: "#video-canvas" },
{ protocols: [], audio: false, videoBufferSize: 1024 * 1024 * 4 }, { protocols: [], audio: false, videoBufferSize: 1024 * 1024 * 4 },
); );
@ -44,12 +43,17 @@ export default function JSMpegPlayer({
}, [url]); }, [url]);
return ( return (
<div className={className} ref={containerRef}> <div className={className}>
<div <div
ref={playerRef} ref={playerRef}
className="jsmpeg h-full" className="jsmpeg h-full"
style={{ aspectRatio: width / height }} style={{ aspectRatio: width / height }}
/> >
<canvas
id="video-canvas"
style={{ width: "100%", height: "100%" }}
></canvas>
</div>
</div> </div>
); );
} }