Suriyakumarvijayanayagam
e0ceb14589
Head office shows a camera's latest frame rather than live video, for a
reason that has not changed: the engine serves MJPEG on 127.0.0.1 on a PC
behind a shop's router with no inbound route, and relaying it needs
WebRTC/TURN. Pointing a browser straight at the shop PC is not the escape
either - the engine's API is Basic-authenticated with a credential it
generates locally and never sends anywhere, and shipping that to the
cloud so a web page could use it would put the key to the biometric API
and the live face feed in the server's database.
But that picture only worked if you had an S3 bucket. Without one,
attachSnapshots reported "This system is not storing images" for every
camera forever - on the two screens whose whole job is to show the
camera. Making them picture-led turned a missing feature into a wall of
empty tiles, on every local install and any self-hosted customer who does
not want a bucket.
migrations/009 adds camera_snapshots and the agent falls back to
PUT /api/agent/cameras/{camera}/snapshot when the presigned route answers
images_disabled - chosen by sentinel, never by matching the message, since
it picks between two routes. One row per camera is what makes this safe in
the database when face images are not: the key IS the camera, so storage
is (cameras x ~100 KB) and does not grow with footfall.
The read is session-authenticated rather than a signed link, which an
<img> cannot use - hence Shot.jsx and useAuthedImage, keyed on the URL
string rather than the snapshot object so a poll does not re-fetch 90 KB
per camera every few seconds, and revoking the object URL on cleanup.
Verified against the real office camera with no bucket configured: 90,587
bytes stored in Postgres, served as image/jpeg to a signed-in user, 401
without a session, rendered on both the Cameras and Shops cards.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HViLj9gYNRtSr7YVZmW5sn
82 lines
2.6 KiB
JavaScript
82 lines
2.6 KiB
JavaScript
import { useCallback, useEffect, useRef, useState } from 'react'
|
|
|
|
import { api } from './api.js'
|
|
|
|
// usePolled runs `fn` now and every `everyMs`, and is careful about the two
|
|
// things every screen would otherwise get wrong on its own: overlapping
|
|
// requests when the server is slower than the interval, and setting state
|
|
// after the component has gone.
|
|
export function usePolled(fn, everyMs, deps = []) {
|
|
const [data, setData] = useState(null)
|
|
const [error, setError] = useState(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const inFlight = useRef(false)
|
|
const alive = useRef(true)
|
|
|
|
const run = useCallback(async () => {
|
|
if (inFlight.current) return
|
|
inFlight.current = true
|
|
try {
|
|
const out = await fn()
|
|
if (!alive.current) return
|
|
setData(out)
|
|
setError(null)
|
|
} catch (err) {
|
|
if (!alive.current) return
|
|
setError(err)
|
|
} finally {
|
|
inFlight.current = false
|
|
if (alive.current) setLoading(false)
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, deps)
|
|
|
|
useEffect(() => {
|
|
alive.current = true
|
|
run()
|
|
if (!everyMs) return () => { alive.current = false }
|
|
const t = setInterval(run, everyMs)
|
|
return () => { alive.current = false; clearInterval(t) }
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [run, everyMs])
|
|
|
|
return { data, error, loading, reload: run }
|
|
}
|
|
|
|
|
|
// useAuthedImage loads a picture that needs the session's bearer token and
|
|
// hands back a URL an <img> can use.
|
|
//
|
|
// Two things it has to get right, and both were bugs the first time something
|
|
// like it was written elsewhere in this app:
|
|
//
|
|
// * REVOKE. An object URL pins the blob in memory until it is revoked, and
|
|
// this component re-renders on every poll. Without the cleanup a camera
|
|
// screen left open for an afternoon holds hundreds of copies of the same
|
|
// photograph.
|
|
// * Key on the URL, not on the object. `snapshot` is a fresh object on every
|
|
// poll, so an effect depending on it would re-fetch 90 KB per camera every
|
|
// few seconds; the URL only changes when the picture actually does.
|
|
export function useAuthedImage(url) {
|
|
const [src, setSrc] = useState(null)
|
|
|
|
useEffect(() => {
|
|
if (!url) { setSrc(null); return }
|
|
let alive = true
|
|
let objectURL = null
|
|
api.cameraSnapshot(url)
|
|
.then(u => {
|
|
if (!alive) { URL.revokeObjectURL(u); return }
|
|
objectURL = u
|
|
setSrc(u)
|
|
})
|
|
.catch(() => { if (alive) setSrc(null) })
|
|
return () => {
|
|
alive = false
|
|
if (objectURL) URL.revokeObjectURL(objectURL)
|
|
}
|
|
}, [url])
|
|
|
|
return src
|
|
}
|