move width/height/fps under detect and make required

also resizes the output from ffmpeg to specified size

web/src/components/CameraImage.jsx

@@ -12,7 +12,8 @@ export default function CameraImage({ camera, onload, searchParams = '', stretch
   const canvasRef = useRef(null);
   const [{ width: availableWidth }] = useResizeObserver(containerRef);
 
-  const { name, width, height } = config.cameras[camera];
+  const { name } = config.cameras[camera];
+  const { width, height } = config.cameras[camera].detect;
   const aspectRatio = width / height;
 
   const scaledHeight = useMemo(() => {

web/src/components/__tests__/CameraImage.test.jsx

@@ -7,7 +7,7 @@ import { render, screen } from '@testing-library/preact';
 describe('CameraImage', () => {
   beforeEach(() => {
     jest.spyOn(Api, 'useConfig').mockImplementation(() => {
-      return { data: { cameras: { front: { name: 'front', width: 1280, height: 720 } } } };
+      return { data: { cameras: { front: { name: 'front', detect: { width: 1280, height: 720 } } } } };
     });
     jest.spyOn(Api, 'useApiHost').mockReturnValue('http://base-url.local:5000');
     jest.spyOn(Hooks, 'useResizeObserver').mockImplementation(() => [{ width: 0 }]);

web/src/routes/CameraMap.jsx

@@ -15,13 +15,16 @@ export default function CameraMasks({ camera, url }) {
 
   const cameraConfig = config.cameras[camera];
   const {
-    width,
-    height,
     motion: { mask: motionMask },
     objects: { filters: objectFilters },
     zones,
   } = cameraConfig;
 
+  const {
+    width,
+    height,
+  } = cameraConfig.detect;
+
   const [{ width: scaledWidth }] = useResizeObserver(imageRef);
   const imageScale = scaledWidth / width;