SENTINEL — Surveillance Intelligence Console

A map-based public-space monitoring console in a tactical SOC style, with a real in-browser AI vision engine running over public CCTV points.

Inspired by the "intelligence console" aesthetic from the reference clip: dark HUD, satellite map, live event feed, timeline. Built as a front-end you can run and extend.

What it does

• National satellite map (Esri World Imagery) with ~1,000 real public toll-road CCTV nodes plotted from the BPJT registry (see Data source), across Jakarta, Bandung, Semarang, Surabaya, Medan, Makassar, Sumatra and more. A city selector flies to and filters each place; a text filter searches name / road / operator.
• City-street CCTV layer (amber) — public ATCS/Dishub intersection and road cameras from city portals whose streams can be embedded (currently Kota Yogyakarta), with the same live AI feed.
• BTS / cell-site layer — a toggleable layer of real cell towers mapped in OpenStreetMap: position and operator only. Volunteer-mapped, so incomplete; not tied to any device. See the note under Data source.
• Control layers: CCTV nodes, BTS cell sites, street labels, density heatmap, coverage radius.
• AI Vision engine — click any camera → COCO-SSD object detection (TensorFlow.js, mobilenet_v2 base) runs in the browser on:
  • Live HLS — the camera's real public stream, played via hls.js and analyzed frame-by-frame (the default when a node has a stream). Eight verified-live cameras are pinned as presets; paste any .m3u8 URL to analyze your own.
  • Simulated feed — a synthetic street scene, works with no network/camera.
  • Webcam — real detection on your own camera.
  • Video File — real detection on any local clip you load.
• Network-wide analytics: vehicle/people rates, per-class bars, rolling activity sparkline, and a live anonymous event feed (congestion, density, node health).

Detections are generic COCO traffic classes (car, truck, bus, motorcycle, bicycle, person). Large boxy vehicles that COCO mislabels as train from an overhead toll angle are folded back into truck.

Data source

Camera points and HLS stream URLs come from BPJT (Badan Pengatur Jalan Tol, Kementerian PU) — the toll-road regulator's public camera registry at https://bpjt.pu.go.id/cctv/, which publishes operator, road, KM marker, coordinates and an HLS URL per camera for public traffic viewing.

js/cctv-data.js is auto-generated — don't hand-edit it. Stream IDs rotate, so regenerate when cameras stop resolving:

python3 tools/update_cctv.py                 # all Indonesian toll cameras
python3 tools/update_cctv.py --bbox -6.4,106.68,-6.08,107.02   # one area only

Each camera is tagged with its city from a metro bounding-box table in the tool. The featured presets in FEATURED_URLS (Jakarta, Surabaya, Sumatra) were each verified live, H.264, and CORS-open down to the segment. Jasa Marga's jmlive host (which serves Bandung, Semarang and others) is frequently down — those cameras still plot as markers but their live playback falls back to the simulated feed until the host recovers.

City-street CCTV (js/city-cctv-data.js) comes from individual city portals, since there is no national registry for ATCS/Dishub cameras. tools/update_city_cctv.py has one small adapter per city. A city is imported only if its portal is public (no login) and its HLS streams are CORS-open; only road/intersection cameras are kept (no parks, rivers, building security or neighbourhood cameras). Currently: Kota Yogyakarta (cctv.jogjakota.go.id, ~100 ATCS/road cameras). Portals that lock streams to their own site (Bandung Pelindung), need a login (Semarang) or are down are linked as view-only in the console's source panel — they are not proxied or worked around.

python3 tools/update_city_cctv.py   # refresh city cameras

BTS layer (data/bts.json, with counts in js/bts-data.js) holds the Indonesian cell towers mapped in OpenStreetMap (© OpenStreetMap contributors, ODbL), fetched from the public Overpass API by tools/gen_bts.py. Only each tower's position and operator(s) are kept; other tags, some of which carry phone numbers, are dropped. Volunteers map these, so coverage is real but incomplete and uneven. The page loads the file only when the layer is switched on.

python3 tools/gen_bts.py            # refresh from OpenStreetMap (~1-2 min)

Deliberate scope / ethics

This console does generic, anonymous analytics only — object classes like person, car, bus, truck, motorcycle, bicycle, and aggregate counts.

It intentionally does not implement:

• facial recognition or any biometric identification of individuals,
• profiling or tracking of named/specific people,
• aggregation of anyone's personal data (phone, address, financial, travel, location history),
• any link between the BTS layer and device/phone location — the cell sites are static map context only, never a means to locate or triangulate anyone.

Those features turn a monitoring tool into a targeted-surveillance / stalkerware system, so they are out of scope. Keep deployments to public spaces you are authorized to monitor, and follow local privacy law.

Run it

From the repo root:

python3 -m http.server 5173

Then open http://localhost:5173. (A browser is required — the AI model and map tiles load from CDNs, so you need an internet connection on first load.)

Hosting

It's plain static files with no build step, so any static host works — this repo is set up for GitHub Pages (.nojekyll makes Pages serve files as-is). All camera streams are https://, so nothing is blocked as mixed content.

Note: the claude.ai Artifact viewer blocks every cross-origin image and fetch, so inside an Artifact the map tiles, live HLS streams and model weights don't load. Live features need a normal static host like this one.

The CORS constraint (important)

hls.js fetches each segment over fetch/XHR, so a stream only works in the browser if its server sends Access-Control-Allow-Origin. If it doesn't, the video may still play but the canvas becomes tainted and tf.browser.fromPixels() throws — the engine detects this, keeps the picture up, and shows "detection blocked (CORS-restricted feed)" instead of failing.

The BPJT toll cameras used here send Access-Control-Allow-Origin: *, so both playback and detection work. For a feed that can't (many city CCTV portals), run a small reverse proxy / ffmpeg re-stream that adds the CORS header, and point the console at that instead.

Architecture

File	Role
index.html	Layout, HUD shell, camera modal, HLS controls
css/styles.css	Tactical SOC theme
js/cctv-data.js	Auto-generated CCTV node dataset (BPJT), city-tagged
js/city-cctv-data.js	Auto-generated city-street CCTV (city portals)
js/bts-data.js, data/bts.json	Auto-generated BTS towers from OpenStreetMap
js/vision.js	VisionEngine — COCO-SSD + hls.js + webcam/file/sim
js/app.js	Map, markers, layers, city selector, analytics, modal
tools/update_cctv.py	Regenerate cctv-data.js from the BPJT registry
tools/update_city_cctv.py	Regenerate city-cctv-data.js from city portals
tools/gen_bts.py	Refresh the BTS towers from OpenStreetMap

Scaling up (server-side)

For many simultaneous real feeds, move inference off the browser: decode streams on a server/edge box and run a detector (YOLOv8 / RT-DETR via ONNX Runtime or a Triton server), then push detections to this UI over WebSocket. The front-end stays the same; only the stats source changes.

---

Libraries: Leaflet · TensorFlow.js · COCO-SSD. Imagery © Esri.