本文將簡單介紹Web 服務與前端顯示部分，它們基于Flask 框架和HTML/CSS/JavaScript實現，主要負責將實時視頻流和檢測結果通過網頁展示，并提供交互式狀態監控。以下是詳細技術解析：

一、Flask Web 服務架構

1. 核心路由設計

@app.route('/')
def index():"""渲染主頁面"""return render_template('index.html')@app.route('/video_feed')
def video_feed():"""提供視頻流"""return Response(web_streamer.generate(), mimetype='multipart/x-mixed-replace; boundary=frame')@app.route('/status')
def status():"""返回JSON格式的系統狀態"""with web_streamer.lock:return {"fps": web_streamer.fps,"face_count": web_streamer.face_count,"posture_status": web_streamer.posture_status,"posture_data": web_streamer.posture_data,"timestamp": time.time()}

• / 路由：

  • 使用render_template渲染靜態 HTML 頁面，作為用戶交互入口。
  • 自動創建templates目錄（若不存在），并寫入硬編碼的 HTML 內容（見代碼末尾的模板生成邏輯）。

• /video_feed 路由：

  • 核心功能：通過Response對象生成HTTP 多部分響應（multipart/x-mixed-replace），格式為連續的 JPEG 圖像幀，實現實時視頻流傳輸。
  • 數據來源：調用web_streamer.generate()方法，該方法循環輸出編碼后的 JPEG 幀（通過cv2.imencode生成）。
  • 性能優化：通過鎖（web_streamer.lock）保證多線程環境下幀數據的一致性，避免并發訪問沖突。

• /status 路由：

  • 提供 JSON 格式的系統狀態數據，包括 FPS、人臉數量、姿勢狀態、時間統計等。