Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

feat(web): AutoUpdatingCameraImage to replace MJPEG feed

Browse Source
This commit is contained in:
Paul Armstrong 2021-01-20 09:01:00 -08:00 committed by Blake Blackshear
parent a71ae053e4
commit e32e69c2d0
3 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/Camera.jsx
View File

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

4
web/src/CameraMap.jsx
View File

@ -213,7 +213,7 @@ ${Object.keys(objectMaskPoints)
); );
return ( 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> <Heading size="2xl">{camera} mask & zone creator</Heading>
<Box> <Box>
@ -226,7 +226,7 @@ ${Object.keys(objectMaskPoints)
<Box className="space-y-4"> <Box className="space-y-4">
<div className="relative"> <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 <EditableMask
onChange={handleUpdateEditable} onChange={handleUpdateEditable}
points={editing.subkey ? editing.set[editing.key][editing.subkey] : editing.set[editing.key]} points={editing.subkey ? editing.set[editing.key][editing.subkey] : editing.set[editing.key]}

27
web/src/components/AutoUpdatingCameraImage.jsx Normal file
View File

@ -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`}
/>
);
}