05 · 實施過程
基於 Flask + OpenCV + MediaPipe Hands 建構的 AI 網頁攝影機手勢控制系統
建立一套完全不需接觸實體裝置的人機介面系統（Touchless HMI），使用者可透過鏡頭前的手勢動作操控電腦，包含游標移動、點擊、投影片切換、音量調整，以及空中動態簽名身份驗證。
硬體採用 Raspberry Pi 5（IP: 192.168.1.114）搭配 USB 攝影機；開發端使用 Notebook（IP: 192.168.1.101），透過 Flask Web Server 提供跨裝置瀏覽器存取。
採用 Google 的 MediaPipe Hands 即時辨識手部 21 個關節點，結合自訂手勢識別邏輯，實現毫秒級的手勢判斷與對應操作觸發。
純 Web 介面（Flask + HTML/CSS/JS），無需安裝客戶端，在區域網路內任何裝置的瀏覽器皆可存取。支援即時 MJPEG 串流與響應式版面設計。
負責 Webcam 串流、呼叫手勢辨識模組、提供 REST API 端點（/video_feed, /gesture_data），並啟動 Flask 伺服器於 port 5000。
封裝 MediaPipe Hands 初始化、關節點座標擷取、各種手勢條件判斷（捏合、揮手、旋轉等），回傳結構化的手勢結果字典。
顯示即時攝影機畫面與虛擬鍵盤/滑鼠面板；app.js 透過 fetch 輪詢手勢資料並驅動 DOM 動畫與游標移動。
以下架構圖說明從攝影機影像輸入到手勢辨識輸出、最終觸發 HMI 操作的完整資料流。
Webcam 影像擷取：app.py 呼叫 cv2.VideoCapture(0) 開啟 USB 攝影機，逐幀讀取 BGR 影像。
影像前處理：將 BGR 轉換為 RGB，並水平翻轉（避免鏡像效果），再傳入 MediaPipe Hands.process()。
關節點偵測：MediaPipe 回傳手部 21 個 3D 關節座標（0=WRIST, 4=THUMB_TIP, 8=INDEX_TIP…），gesture_utils.py 以此計算各手勢。
手勢判斷：依據關節點的相對距離與角度，辨識「食指游標」「捏合點擊」「揮手換頁」「旋轉調參」「軌跡簽名」五種手勢。
串流輸出：標註完成的影像以 MJPEG 格式透過 /video_feed 端點推送至瀏覽器；手勢資料以 JSON 格式透過 /gesture_data 每 100ms 輪詢。
前端響應：app.js 接收手勢 JSON，更新虛擬游標位置、觸發虛擬按鍵高亮，並在螢幕上顯示簽名軌跡。
偵測食指（INDEX_TIP）位置映射為螢幕游標座標，當食指單獨伸出時進入游標模式，平滑移動虛擬滑鼠。
計算大拇指尖（THUMB_TIP）與食指尖（INDEX_TIP）之間的歐氏距離，當距離小於閾值時觸發「滑鼠左鍵點擊」事件。
偵測手掌在水平方向的快速位移（速度 > 閾值），向左揮手觸發「上一頁」，向右揮手觸發「下一頁」。
計算手腕到中指根部連線的旋轉角度（θ），旋轉角度映射為音量/亮度數值，實現連續參數調整。
食指軌跡記錄為時序座標序列，透過 DTW（動態時間規整）演算法比對已註冊的簽名模板，完成身份驗證。
使用 Flask Generator + multipart/x-mixed-replace，以每幀 JPEG 格式串流至瀏覽器，實現低延遲即時畫面更新。
使用 Claude Code 工具，輸入需求後自動生成完整 Flask + MediaPipe 專案架構，並部署至 Raspberry Pi 5。
提問：「我有 Raspberry Pi 5，我裝了 USB-CAMERA，幫我建立一個使用 Raspberry Pi + USB Web Camera + OpenCV + Flask 建立一個 AI 網頁攝影機系統」
本次課程作業透過 Claude 進行系統設計、程式邏輯討論與問題排除的完整對話紀錄。
本週透過 AI 工具（Claude Code）協助，大幅縮短了從需求描述到可運行系統的時間。以往需要花數天查閱文件、Debug 的過程，現在只需清楚描述需求，AI 即可生成完整架構，我們的工作轉為「驗證、調整、理解」，而非從零撰寫。
MediaPipe Hands 的 21 個關節點座標系統令人印象深刻——不只偵測手的位置，還能推算每根手指的角度與彎曲程度。理解關節點索引（如 4=拇指尖、8=食指尖）之後，手勢邏輯的實作變得非常直觀。
Flask 的 MJPEG 串流模式（multipart/x-mixed-replace）是這次最大的收穫之一——它讓 Python 後端可以「持續推送」影像至瀏覽器，而不需要 WebSocket，架構簡單卻效果出色。這個技術可以應用於許多 IoT 監控場景。
最具挑戰性的部分是「使用者體驗的細節」：游標平滑化、誤觸防抖、手勢意圖判斷的邊界條件。這些不是 AI 能完全幫忙的部分，需要反覆測試與調整。這讓我體會到，AI 工具能加速「知識型」的工作，但「體驗型」的細節仍需人的判斷。
