From 9a27f7771920150abff513d7ccc9fa762493f414 Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Tue, 6 Oct 2026 09:48:58 +0700 Subject: [PATCH 1/7] feat: redesign camera dashboard and improve refresh UX --- index.html | 1193 +++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 890 insertions(+), 303 deletions(-) diff --git a/index.html b/index.html index ffa08b8..aa872ce 100644 --- a/index.html +++ b/index.html @@ -1,389 +1,976 @@ - + - - Xem camera giao thông TP.HCM - - + + + Camera giao thông TP.HCM + +
+
+
+
+ +
+

Camera giao thông TP.HCM

+

Theo dõi nhanh tình hình giao thông theo từng khu vực

+
+
+
+ + +
+
+
+ +
+
+ +
+ + + + + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
Đang tải dữ liệu camera…
+
+ + Đang khởi tạo +
+
+ +
+
+
+
+ + + + +
+

Đang tải danh sách camera

+
Vui lòng chờ trong giây lát.
+
+
+
+ + +

Nguồn hình ảnh: Cổng thông tin giao thông TP.HCM · ePlus.DEV

+
- -
- - -
-
- -
-
-
- - - -
- - - \ No newline at end of file + From fdd581dbc115c1eeab8f0e19061acb1704479627 Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Tue, 6 Oct 2026 09:49:00 +0700 Subject: [PATCH 2/7] fix: harden camera image proxy --- proxy.php | 99 +++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 64 insertions(+), 35 deletions(-) diff --git a/proxy.php b/proxy.php index d28cc43..e081c82 100644 --- a/proxy.php +++ b/proxy.php @@ -1,41 +1,70 @@ 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8', - 'Accept-Encoding' => 'gzip, deflate', - 'Accept-Language' => 'en-US,en;q=0.9,vi;q=0.8', - 'Cache-Control' => 'no-cache', - 'Connection' => 'keep-alive', - 'Cookie' => '.VDMS=81FF038CBEDEA0DB6C73F5C6F8F76D2B9D597EA958C998721BEA844805F4970C84D8EC3A9FDE23FFFD95373D70F47B65FC10D4FF2567251F874F1ED77FF21C320AEDDB6648B24D01CC89FDE2C29BFD9B6E3B60B9C07E230C11828BC65787CF5F1A4336FE6A9230A1295C3D3C1D3CB9591AC72424; _frontend=!Nc2SSSIBzq7Jgn33xOTVoJth7yoQDt/r3fu0BTHRLXHnbzI8osO/bsCNhHCppDcR2rrXRneuFIhGQtU=; CurrentLanguage=vi; TS01e7700a=0150c7cfd1cb1d18acab45564a90f966744ed541aaa4ce0990b701d2d96cf57d5922098a1296586bbd0d85c761305b5aee59579f86fe42956ba245719f53a4350fae13b3ee; TS3d206961027=08a5ec0864ab2000fc39c9f9c0970c67cf2acb4bd0ad9f7565cef07dfd02bd422dfae161c0bd512c08904b5bcc11300077073f7c59fd737f87bfa646445fee3ca7d541351b1bc9383b0dd21a6c54dd9e1f02503a37409c66e2dc5d61187dc246', - 'Host' => 'giaothong.hochiminhcity.gov.vn:8007', - 'Pragma' => 'no-cache', - 'Referer' => 'http://giaothong.hochiminhcity.gov.vn/', - 'User-Agent' => 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36' -]; - -$promise = $client->requestAsync('GET', $url, [ - 'query' => $query, - 'headers' => $headers +use Throwable; + +header('X-Content-Type-Options: nosniff'); +header('Referrer-Policy: no-referrer'); + +function failResponse(int $status, string $message): void +{ + http_response_code($status); + header('Content-Type: text/plain; charset=utf-8'); + header('Cache-Control: no-store, max-age=0'); + echo $message; + exit; +} + +$cameraId = isset($_GET['id']) ? trim((string) $_GET['id']) : ''; + +if ($cameraId === '' || !preg_match('/^[a-f0-9]{24}$/i', $cameraId)) { + failResponse(400, 'Invalid camera id.'); +} + +$client = new Client([ + 'timeout' => 8.0, + 'connect_timeout' => 3.0, + 'verify' => true, + 'http_errors' => false, ]); -$promise->then( - function (ResponseInterface $res) { - header('Content-Type: image/jpeg'); - echo $res->getBody(); - }, - function (RequestException $e) { - echo $e->getMessage() . "\n"; - echo $e->getRequest()->getMethod(); +try { + $response = $client->request('GET', 'https://giaothong.hochiminhcity.gov.vn:8007/Render/CameraHandler.ashx', [ + 'query' => [ + 'id' => $cameraId, + '_' => (string) time(), + ], + 'headers' => [ + 'Accept' => 'image/avif,image/webp,image/apng,image/*,*/*;q=0.8', + 'Accept-Language' => 'vi,en;q=0.8', + 'Cache-Control' => 'no-cache', + 'Pragma' => 'no-cache', + 'Referer' => 'https://giaothong.hochiminhcity.gov.vn/', + 'User-Agent' => 'Mozilla/5.0 CameraViewer/1.0', + ], + ]); + + $status = $response->getStatusCode(); + $contentType = strtolower(trim($response->getHeaderLine('Content-Type'))); + + if ($status < 200 || $status >= 300) { + failResponse(502, 'Camera source returned an error.'); } -)->wait(); // Wait for the promise to complete + + if ($contentType === '' || strpos($contentType, 'image/') !== 0) { + failResponse(502, 'Camera source did not return an image.'); + } + + http_response_code(200); + header('Content-Type: ' . $contentType); + header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0'); + header('Pragma: no-cache'); + echo (string) $response->getBody(); +} catch (Throwable $exception) { + error_log('Camera proxy error: ' . $exception->getMessage()); + failResponse(502, 'Unable to load camera image.'); +} From c19e78cae418db984c28690e1952d422a274890d Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Tue, 6 Oct 2026 09:49:36 +0700 Subject: [PATCH 3/7] docs: refresh setup and security notes --- README.md | 64 ++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 49 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index b2d04d7..cf2e51b 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,59 @@ -# Xem camera giao thông TP.HCM +# Camera giao thông TP.HCM -![image](https://github.com/user-attachments/assets/1a5e9185-c34d-40d7-8fcb-7374d21cc571) +Ứng dụng web nhỏ gọn để theo dõi nhanh camera giao thông tại TP.HCM theo từng khu vực. -## Giới thiệu +## Tính năng -Dự án này nhằm mục đích theo dõi và phân tích dữ liệu từ các camera giao thông tại TP.HCM. Thông qua việc sử dụng các công nghệ hiện đại, chúng tôi có thể cung cấp thông tin thời gian thực về tình hình giao thông, giúp cải thiện việc quản lý và điều tiết giao thông trong thành phố. - -## Mục tiêu - -- Thu thập dữ liệu từ các camera giao thông. -- Phân tích dữ liệu để phát hiện các vấn đề giao thông. -- Cung cấp thông tin thời gian thực cho người dùng và cơ quan chức năng. +- Hiển thị camera theo dạng dashboard responsive cho desktop và mobile. +- Tìm kiếm theo tên đường, giao lộ hoặc khu vực. +- Lọc theo quận/khu vực. +- Tùy chọn 6–24 camera mỗi trang. +- Tự làm mới theo chu kỳ 5/10/15/30 giây hoặc tắt hoàn toàn. +- Làm mới từng camera hoặc toàn bộ camera đang hiển thị. +- Hiển thị trạng thái tải/online/lỗi cho từng camera. +- Dark mode và các tùy chọn hiển thị được lưu trên trình duyệt. +- Phân trang đồng bộ với query string `?page=`. +- Proxy chỉ chấp nhận `CamId` hợp lệ, không cho phép proxy URL tùy ý. ## Yêu cầu - PHP >= 7.4 +- Composer + +## Cài đặt + +```bash +git clone https://github.com/ePlus-DEV/camera.git +cd camera +composer install +php -S localhost:8000 +``` + +Mở . + +## Cấu trúc chính + +- `index.html`: giao diện và logic hiển thị camera. +- `data-camera.json`: danh sách camera. +- `proxy.php`: proxy ảnh camera từ nguồn giao thông TP.HCM. +- `composer.json`: dependency PHP. + +## Bảo mật + +`proxy.php` chỉ nhận tham số `id` là `CamId` 24 ký tự hex. Endpoint upstream được cố định trong source để tránh biến ứng dụng thành open proxy/SSRF. + +Ví dụ: + +```text +proxy.php?id=586e28a0f9fab7001111b0b3 +``` + +Không lưu cookie/session của website nguồn trong repository. + +## Nguồn dữ liệu -## Cách cài đặt +Hình ảnh camera được lấy từ Cổng thông tin giao thông TP.HCM. Tình trạng camera phụ thuộc vào nguồn upstream và có thể tạm thời không khả dụng. -1. Clone repository này về máy của bạn. -2. Truy cập -3. Khởi động dự án và bắt đầu theo dõi dữ liệu giao thông. +--- -Chúng tôi hy vọng dự án này sẽ đóng góp tích cực vào việc cải thiện tình hình giao thông tại TP.HCM. +© ePlus.DEV From 454bd994e5c8cbd986a15d994b30d7000cd8446f Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Tue, 6 Oct 2026 09:49:39 +0700 Subject: [PATCH 4/7] ci: validate PHP and camera dataset --- .github/workflows/ci.yml | 67 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 .github/workflows/ci.yml diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..225a143 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,67 @@ +name: CI + +on: + push: + branches: + - main + - develop + pull_request: + branches: + - main + - develop + +permissions: + contents: read + +jobs: + validate: + runs-on: ubuntu-latest + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup PHP + uses: shivammathur/setup-php@v2 + with: + php-version: '8.3' + tools: composer:v2 + coverage: none + + - name: Validate Composer + run: composer validate --strict + + - name: Install dependencies + run: composer install --no-interaction --prefer-dist --no-progress + + - name: Lint PHP + run: php -l proxy.php + + - name: Validate camera data + run: | + php -r ' + $data = json_decode(file_get_contents("data-camera.json"), true, 512, JSON_THROW_ON_ERROR); + if (!is_array($data) || count($data) === 0) { + fwrite(STDERR, "Camera data must be a non-empty array.\n"); + exit(1); + } + foreach ($data as $index => $camera) { + $id = $camera["CamId"] ?? ""; + $name = trim((string) ($camera["CamName"] ?? "")); + if (!preg_match("/^[a-f0-9]{24}$/i", (string) $id)) { + fwrite(STDERR, "Invalid CamId at index {$index}: {$id}\n"); + exit(1); + } + if ($name === "") { + fwrite(STDERR, "Missing CamName at index {$index}.\n"); + exit(1); + } + } + echo "Validated " . count($data) . " cameras.\n"; + ' + + - name: Smoke-check UI anchors + run: | + grep -q 'id="cameraGrid"' index.html + grep -q 'id="searchInput"' index.html + grep -q 'proxy.php?id=' index.html From eff22c81ba5c80b36193f0b8a9cab4170ea5be7e Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Tue, 6 Oct 2026 09:50:34 +0700 Subject: [PATCH 5/7] chore: make composer metadata CI-valid --- composer.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/composer.json b/composer.json index 4dce3f3..90bf717 100644 --- a/composer.json +++ b/composer.json @@ -1,5 +1,10 @@ { + "name": "eplus-dev/camera", + "description": "Responsive Ho Chi Minh City traffic camera viewer.", + "type": "project", + "license": "MIT", "require": { + "php": ">=7.4", "guzzlehttp/guzzle": "^7.9" } } From 5dee98a713d57ac1bb8ba5e6d97e330bb396144b Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Tue, 6 Oct 2026 09:51:08 +0700 Subject: [PATCH 6/7] fix: keep composer lock dependency contract unchanged --- composer.json | 1 - 1 file changed, 1 deletion(-) diff --git a/composer.json b/composer.json index 90bf717..d5f28a9 100644 --- a/composer.json +++ b/composer.json @@ -4,7 +4,6 @@ "type": "project", "license": "MIT", "require": { - "php": ">=7.4", "guzzlehttp/guzzle": "^7.9" } } From 65cf631b28e3b44a9d000bff9f18fc8883cdfe5d Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Tue, 6 Oct 2026 09:52:06 +0700 Subject: [PATCH 7/7] ci: validate schema without legacy lock hash --- .github/workflows/ci.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 225a143..fb84a49 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -29,7 +29,9 @@ jobs: coverage: none - name: Validate Composer - run: composer validate --strict + # Metadata-only composer.json changes do not affect installed dependencies. + # Keep schema validation strict while allowing the legacy lockfile hash. + run: composer validate --strict --no-check-lock - name: Install dependencies run: composer install --no-interaction --prefer-dist --no-progress