LỊCH SỬ — KHÔNG CÒN LÀ LỊCH THỰC HIỆN (26/09/2026).
Nội dung dưới đây giữ nguyên để truy vết đề xuất cũ; không xác nhận đã làm, đã duyệt hoặc đã đạt cổng.
Dùng lộ trình hiện hành, bảng camera và ma trận y khoa.
Một chỉ số chỉ được thử sau GCA; GCB phải trước tích hợp. Mọi hoạt động có người cần GC riêng.
Các giờ, ngày, ngưỡng và đầu ra bên dưới không tự chuyển thành cam kết hoặc tiêu chí được duyệt.

Tuần: W3/23 | : Sprint C1/4
Vai trò: NCS2 (Đỗ Đoàn Anh Tuấn, 10A6 PTTH Xuân Đỉnh)
Effort: 8h
Dependency: CAM-002
Checkpoint cuối ngày: Trang demo HTML mở webcam và vẽ 33 keypoints khung xương realtime trên Chrome/Edge đạt FPS ≥15.

Task: Xây dựng bản mẫu Hello World BlazePose trên trình duyệt

ID: CAM-003
Phân loại: 🔄 Hỗn hợp
Effort: 8 giờ

Mô tả

Hiện thực hoá trang web thử nghiệm độc lập (poc/index.html và poc/app.js) sử dụng thư viện @mediapipe/tasks-vision chạy hoàn toàn phía client qua WebAssembly. Kết nối luồng webcam, nhận diện 33 keypoints của cơ thể người theo thời gian thực và vẽ khung xương lên Canvas overlay. Hiển thị thông số FPS trực tiếp trên giao diện để theo dõi hiệu năng.

File Tham chiếu (Input)

  • docs/research/notes/NCS2_mediapipe_api_notes.md
  • docs/research/plans/CAMERA_MODULE_TASK_BOARD.md

File Kết quả (Output)

  • backend/movement-observation/poc/index.html
  • backend/movement-observation/poc/app.js
  • backend/movement-observation/poc/style.css

DoD (Definition of Done)

  • [ ] Trang HTML tải thành công mô hình BlazePose qua WebAssembly trong vòng dưới 3 giây.
  • [ ] Kết nối webcam mượt mà sau khi người dùng cấp quyền, hiển thị video và canvas khung xương.
  • [ ] Nhận diện và vẽ đầy đủ 33 keypoints cơ thể người trong khung hình.
  • [ ] Tốc độ nhận diện đạt FPS ≥ 15 trên trình duyệt Chrome hoặc Edge thông dụng.
  • [ ] Bảo mật: Xử lý hoàn toàn tại trình duyệt, mặc định KHÔNG lưu hoặc gửi video/hình ảnh thô.
  • [ ] Camera chỉ cơ học, tuyệt đối KHÔNG đưa ra kết luận chẩn đoán bệnh.

Hướng dẫn thực hiện

  1. Tạo giao diện index.html với video element và canvas element đồng bộ kích thước (640x480).
  2. Tích hợp @mediapipe/tasks-vision từ CDN chính thức của Google MediaPipe.
  3. Khởi tạo PoseLandmarker với chế độ runningMode: "VIDEO" và model blaze_pose_landmarker_full.
  4. Viết vòng lặp renderLoop tính toán delta time để cập nhật chỉ số FPS liên tục trên màn hình.
  5. Thử nghiệm cử động đứng lên, ngồi xuống cơ bản trước ống kính để kiểm tra độ nhạy bắt khung.

Rủi ro & Biện pháp giảm thiểu

  • Rủi ro: Khởi tạo WebAssembly thất bại trên máy tính có cấu hình phần cứng yếu.
  • Biện pháp: Thêm cơ chế fallback tự động sang mô hình nhẹ hơn (blaze_pose_landmarker_lite).
  • Rủi ro: Người dùng lo ngại về bảo mật và quyền riêng tư hình ảnh.
  • Biện pháp: Đảm bảo xử lý thuần client, hiển thị thông báo rõ ràng "Không lưu trữ video".

Phân định vai trò

  • NCS2 (Đỗ Đoàn Anh Tuấn): Thực hiện chính — code trang demo, cấu hình WASM và kiểm tra FPS.
  • NCS1 (Võ Trần Gia Hiếu): Hỗ trợ review cấu trúc mã nguồn và kiểm tra chéo hiệu năng trên máy khác.