feat(web): AutoUpdatingCameraImage to replace MJPEG feed

LordNex · Jan 27, 2021 · a862ba8 · a862ba8
1 parent 633d45d
commit a862ba8
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 8 deletions.
diff --git a/web/src/Camera.jsx b/web/src/Camera.jsx
@@ -1,4 +1,5 @@
 import { h } from 'preact';
+import AutoUpdatingCameraImage from './components/AutoUpdatingCameraImage';
 import Box from './components/Box';
 import Heading from './components/Heading';
 import Link from './components/Link';
@@ -36,12 +37,7 @@ export default function Camera({ camera, url }) {
  <div className="space-y-4">
  <Heading size="2xl">{camera}</Heading>
  <Box>
- <img
- width={cameraConfig.width}
- height={cameraConfig.height}
- key={searchParamsString}
- src={`${apiHost}/api/${camera}?${searchParamsString}`}
- />
+ <AutoUpdatingCameraImage camera={camera} searchParams={searchParamsString} />
  </Box>
 
  <Box className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">

diff --git a/web/src/CameraMap.jsx b/web/src/CameraMap.jsx
@@ -213,7 +213,7 @@ ${Object.keys(objectMaskPoints)
  );
 
  return (
- <div class="flex-col space-y-4" style={`max-width: ${width}px`}>
+ <div class="flex-col space-y-4">
  <Heading size="2xl">{camera} mask & zone creator</Heading>
 
  <Box>
@@ -226,7 +226,7 @@ ${Object.keys(objectMaskPoints)
 
  <Box className="space-y-4">
  <div className="relative">
- <img ref={imageRef} width={width} height={height} src={`${apiHost}/api/${camera}/latest.jpg`} />
+ <img ref={imageRef} className="w-full" src={`${apiHost}/api/${camera}/latest.jpg`} />
  <EditableMask
  onChange={handleUpdateEditable}
  points={editing.subkey ? editing.set[editing.key][editing.subkey] : editing.set[editing.key]}

diff --git a/web/src/components/AutoUpdatingCameraImage.jsx b/web/src/components/AutoUpdatingCameraImage.jsx
@@ -0,0 +1,27 @@
+import { h } from 'preact';
+import { ApiHost, Config } from '../context';
+import { useCallback, useEffect, useContext, useState } from 'preact/hooks';
+
+export default function AutoUpdatingCameraImage({ camera, searchParams }) {
+ const config = useContext(Config);
+ const apiHost = useContext(ApiHost);
+ const cameraConfig = config.cameras[camera];
+
+ const [key, setKey] = useState(Date.now());
+ useEffect(() => {
+ const timeoutId = setTimeout(() => {
+ setKey(Date.now());
+ }, 500);
+ return () => {
+ clearTimeout(timeoutId);
+ };
+ }, [key, searchParams]);
+
+ return (
+ <img
+ className="w-full"
+ src={`${apiHost}/api/${camera}/latest.jpg?cache=${key}&${searchParams}`}
+ alt={`Auto-updating ${camera} image`}
+ />
+ );
+}