refactor(web): render CameraImage to a canvas

web/src/components/CameraImage.jsx

@@ -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} />
-      ) : (
-        <ActivityIndicator />
-      )}
+    <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>
   );
 }