AI 監視系統製作
本專題目標是建立一套「AI 教室監視系統」，透過 Web Camera 即時取得教室畫面，使用 AI 模型進行物件辨識、手部偵測、臉部網格分析與事件記錄，最終以 Flask 網頁方式呈現，使用者能從瀏覽器查看即時串流與系統狀態。
系統目標
建立 AI 視覺辨識教室監視系統，整合前端網頁與後端 Python 程式。
核心技術
OpenCV · Flask · YOLOv8 · MediaPipe · HTML/CSS/JS
應用場景
教室監控、智慧點名輔助、教學展示、電腦視覺課程整合。
開發環境
Visual Studio Code · Python 3.12 · Windows 11 · 虛擬環境 .venv
資訊專案結構（說明）
本專案分為前端顯示、後端影像處理、AI 辨識模組與資料紀錄四個部分。
AI_Classroom_Monitor/ ├─ app.py # Flask 主程式 ├─ requirements.txt # 套件清單 ├─ templates/ │ └─ index.html # 網頁前端（必須放此資料夾） ├─ static/ │ ├─ css/ └─ style.css │ ├─ js/ └─ main.js │ └─ captures/ # 截圖儲存 ├─ models/ │ └─ yolov8n.pt # YOLO 模型（首次執行自動下載） ├─ logs/ │ └─ event_log.txt └─ README.md
前端頁面
HTML + CSS 建立監視介面，顯示影像串流、物件清單與事件時間軸。
後端程式
Flask 啟動服務，OpenCV 讀取攝影機，交由 AI 模組分析。
AI 模組
YOLO 物件辨識 + MediaPipe 手部 & 臉部偵測。
資料紀錄
事件時間軸存入 log 檔，截圖自動儲存至 captures 目錄。
資訊系統環境圖（UML）與程式邏輯說明
↓
OpenCV 擷取影像
↓
AI 辨識模組
├─ YOLOv8 ：物件辨識 / 人數統計 / Bounding Box
├─ MediaPipe Hands ：手部 21 Landmark 偵測
└─ MediaPipe Face Mesh ：468 臉部關鍵點偵測
↓
Flask 後端處理 (Python)
├─ /video_feed → MJPEG 串流
└─ /api/state → JSON 狀態
↓
HTML / CSS / JS 前端網頁（port 5000）
├─ 即時影像串流
├─ 物件資訊顯示框
├─ 事件時間軸（setInterval 800ms）
└─ 人數統計顯示
程式邏輯說明
影像擷取：OpenCV 開啟 Web Camera，持續讀取每一幀畫面。
AI 分析：YOLO 判斷物件種類，MediaPipe 偵測手部 21 點與臉部 468 點。
結果標註：辨識結果畫到影像上，整理為 JSON（person / cell phone / hand）。
事件記錄：偵測到新物件時加入 Event Timeline，記錄時間與內容。
網頁呈現：Flask MJPEG 串流 + /api/state JSON 每 0.8 秒更新前端一次。
功能測試一：Web Camera
確認攝影機能正常開啟、讀取影像與拍照存檔，這是後續所有 AI 辨識功能的基礎。
📷 打開 Visual Studio Code
📦 下載 Python 擴充套件
🔧 虛擬環境建立與套件安裝
# 建立虛擬環境 python -m venv .venv # 啟用環境 (Windows) .venv\Scriptsctivate # 升級 pip 並安裝所有套件 pip install --upgrade pip pip install opencv-python Flask mediapipe ultralytics
🎥 Web Camera 測試程式碼與結果
import cv2 cap = cv2.VideoCapture(0) ret, frame = cap.read() if ret: cv2.imwrite("test.jpg", frame) print("✅ 攝影機測試成功，已儲存 test.jpg") cap.release()
| 測試項目 | 說明 | 結果 |
|---|---|---|
| 開啟攝影機 | 成功讀取筆電內建鏡頭 VideoCapture(0) | ✅ PASS |
| 即時顯示 | 影像穩定，更新正常 | ✅ PASS |
| 拍照存檔 | 擷取單張照片儲存 test.jpg | ✅ PASS |
功能測試二：YOLO
使用 YOLOv8 進行即時物件辨識，偵測 person、laptop、cell phone 等物件並顯示 Bounding Box 與信心分數。
from ultralytics import YOLO import cv2 model = YOLO("yolov8n.pt") # 自動下載輕量模型 cap = cv2.VideoCapture(0) while True: ret, frame = cap.read() if not ret: break results = model(frame, verbose=False) annotated = results[0].plot() cv2.imshow("YOLO Detection", annotated) if cv2.waitKey(1) == ord('q'): break cap.release(); cv2.destroyAllWindows()
| 功能 | 說明 |
|---|---|
| 物件辨識 | 偵測 person、cell phone、laptop、backpack 等 80 種物件 |
| Bounding Box | 畫出標註框、Label 與信心分數 |
| 人數統計 | 即時計算畫面中 person 類別數量 |
| 事件記錄 | 新物件出現時自動加入事件時間軸 |
功能測試三：手部偵測（MediaPipe）
使用 MediaPipe Hands 進行手部關鍵點偵測，顯示 21 個 Landmark 與骨架連線，可延伸到手勢辨識與互動控制。
技術重點
BGR → RGB 轉換；輸出 21 個手部關鍵點；可辨識單手或雙手。
延伸應用
手勢控制、手指數量辨識、教室互動式投影控制。
import mediapipe as mp import cv2 mp_hands = mp.solutions.hands mp_draw = mp.solutions.drawing_utils hands = mp_hands.Hands(max_num_hands=2) cap = cv2.VideoCapture(0) while True: ret, frame = cap.read() rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB) results = hands.process(rgb) if results.multi_hand_landmarks: for hl in results.multi_hand_landmarks: mp_draw.draw_landmarks(frame, hl, mp_hands.HAND_CONNECTIONS) cv2.imshow("Hands", frame) if cv2.waitKey(1) == ord('q'): break
功能測試四：臉部網格偵測（Face Mesh）
採用 MediaPipe Face Mesh 取得 468 個臉部關鍵點，適合表情分析、疲勞偵測與視線方向研究。
import mediapipe as mp import cv2 mp_face_mesh = mp.solutions.face_mesh mp_draw = mp.solutions.drawing_utils face_mesh = mp_face_mesh.FaceMesh(refine_landmarks=True) cap = cv2.VideoCapture(0) while True: ret, frame = cap.read() rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB) results = face_mesh.process(rgb) if results.multi_face_landmarks: for fl in results.multi_face_landmarks: mp_draw.draw_landmarks(frame, fl, mp_face_mesh.FACEMESH_TESSELATION) cv2.imshow("Face Mesh", frame) if cv2.waitKey(1) == ord('q'): break
| 測試項目 | 說明 | 結果 |
|---|---|---|
| Face Mesh 建立 | 建立 468 個 landmark 與網格線 | ✅ PASS |
| 疲勞偵測應用 | 分析眼部 landmark 判斷閉眼狀態 | ✅ 可延伸 |
| 系統整合 | 與事件警示、專注度分析結合 | ✅ 完成 |
全系統功能
整合 Flask + YOLO + MediaPipe 形成完整網頁版 AI 教室監視系統，透過 http://127.0.0.1:5000 即時查看串流與系統狀態。
即時影像串流
Flask MJPEG 串流，瀏覽器即時顯示 AI 標註畫面。
物件資訊顯示框
側欄列出偵測到的物件類別與數量。
事件時間軸
依時間記錄各偵測事件，方便回顧分析。
事件標示
手機、手部、臉部觸發對應事件警示。
人數計算
YOLO 統計畫面中 person 的即時數量。
截圖與紀錄
事件資訊寫入 log 檔，截圖存入 captures。
🕐 事件時間軸範例
💻 全系統 app.py 程式碼與即時監控介面
🌐 全系統網頁介面（教室實際偵測）
使用 AI 工具對話連結
開發本專題期間，使用 Claude AI 協助查詢語法、修正各種錯誤、設計全系統架構與 HTML 報告頁面。
🤖 Claude (Anthropic)
用途：建立完整 HTML 作業範本、撰寫 app.py 全系統程式碼、修正 ModuleNotFoundError / TemplateNotFound 各種錯誤、說明 mediapipe 版本降版方式、製作本 W4 作業報告頁面。
| 詢問內容 | AI 協助成果 |
|---|---|
| 建立全系統 Flask + YOLO + MediaPipe | 提供完整 app.py 與 index.html 程式碼 |
| No module named 'ultralytics' | pip install ultralytics |
| No module named 'mediapipe' | pip install mediapipe==0.10.9 |
| module has no attribute 'solutions' | 降版至 mediapipe 0.10.9 解決 |
| No module named 'flask' | pip install flask |
| TemplateNotFound: index.html | 建立 templates/ 資料夾並移入 HTML |
Trouble Shooting 與學習心得
🔧 Trouble Shooting
| 問題 | 原因 | 解決方式 |
|---|---|---|
| ERR No module named 'ultralytics' | 套件未安裝 | pip install ultralytics |
| ERR No module named 'mediapipe' | 套件未安裝 | pip install mediapipe==0.10.9 |
| ERR module has no attribute 'solutions' | mediapipe 版本過新（0.11+） | 降版：pip install mediapipe==0.10.9 |
| ERR No module named 'flask' | 套件未安裝 | pip install flask |
| ERR TemplateNotFound: index.html | HTML 未放在 templates/ 資料夾 | 建立 templates/ 並移入 HTML |
| ERR 攝影機無法開啟 | 裝置編號錯誤或被其他程式占用 | 改 VideoCapture(1) 或關閉其他程式 |
| ERR YOLO 執行速度慢 | 模型太大或電腦效能不足 | 使用 yolov8n.pt 小模型，降低解析度 |
| ERR Face Mesh 偵測不到臉 | 光線不足或忘記 BGR→RGB 轉換 | 確認亮度並加入 cvtColor(frame, BGR2RGB) |
📝 學習心得
🚀 未來展望
疲勞偵測
利用 Face Mesh 眼部 Landmark 判斷是否閉眼，提醒學生專注上課。
點名統計
結合人臉辨識自動統計出席人數並寫入資料庫。
異常警示
偵測到異常物件或行為時自動發送警示通知。
資料庫儲存
將事件紀錄與人數統計存入 SQLite 資料庫長期保存。