Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-02-09 00:17:00 +01:00
Code Issues Projects Releases Wiki Activity

refactor(web): render CameraImage to a canvas

Browse Source
This commit is contained in:
Paul Armstrong 2021-01-31 16:43:12 -08:00 committed by Blake Blackshear
parent d285ff7e54
commit 880178d62e
1 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/components/CameraImage.jsx
View File

@ -7,8 +7,9 @@ export default function CameraImage({ camera, onload, searchParams = '' }) {
const { data: config } = useConfig();
const apiHost = useApiHost();
const [availableWidth, setAvailableWidth] = useState(0);
const [loadedSrc, setLoadedSrc] = useState(null);
const [hasLoaded, setHasLoaded] = useState(false);
const containerRef = useRef(null);
const canvasRef = useRef(null);
const { name, width, height } = config.cameras[camera];
const aspectRatio = width / height;
@ -35,15 +36,17 @@ export default function CameraImage({ camera, onload, searchParams = '' }) {
aspectRatio,
height,
]);
const scaledWidth = useMemo(() => Math.ceil(scaledHeight * aspectRatio), [scaledHeight, aspectRatio]);
const img = useMemo(() => new Image(), [camera]);
img.onload = useCallback(
(event) => {
const src = event.srcElement.currentSrc;
setLoadedSrc(src);
setHasLoaded(true);
const ctx = canvasRef.current.getContext('2d');
ctx.drawImage(img, 0, 0, scaledWidth, scaledHeight);
onload && onload(event);
},
[searchParams, onload]
[setHasLoaded, onload, canvasRef.current]
);
useEffect(() => {
@ -54,12 +57,13 @@ export default function CameraImage({ camera, onload, searchParams = '' }) {
}, [apiHost, name, img, searchParams, scaledHeight]);
return (
<div ref={containerRef}>
{loadedSrc ? (
<img width={scaledHeight * aspectRatio} height={scaledHeight} src={loadedSrc} alt={name} />
) : (
<div className="relative" ref={containerRef}>
<canvas height={scaledHeight} ref={canvasRef} width={scaledWidth} />
{!hasLoaded ? (
<div className="absolute inset-0 flex justify-center" style={`height: ${scaledHeight}px`}>
<ActivityIndicator />
)}
</div>
) : null}
</div>
);
}