Student Identification
姓名:蘇明心-1111310012
雙來源人流計數應用程式開發 / HTML 作業報告首頁
W6 Report Submission

W6 作業報告 / 2026-04-01

雙視訊人流分析系統製作

本報告說明一套同時分析兩個人流來源的系統。系統可比較來源 A 與來源 B 的即時人數變化、 累積辨識 ID、峰值、短期與長期平均,以及整體趨勢判讀。

姓名:蘇明心 學號:1111310012 格式:HTML / CSS 自訂 上傳:Neocities

1. 雙視訊人流分析系統製作

根據作業需求,本系統需以 HTML 方式展示,並描述雙來源人流分析的用途、來源設定與畫面內容。

系統用途

  • 抗議現場人流觀察
  • 集會活動安全監看
  • 群眾活動雙來源比較分析

系統同時分析兩個來源的人流變化,並呈現目前人數、累積辨識 ID、峰值、短期平均、長期平均、趨勢判讀與雙折線圖比較。

預設來源設定

  • 群眾來源 A:videos/protest_demo.mp4
  • 群眾來源 B:本地 WebCam 0
  • 畫面左上:來源 A
  • 畫面右上:來源 B
  • 下方:雙折線圖比較
Current Count Unique IDs Peak Count Short/Long Average Trend Analysis
本頁內容依照老師投影片中的作業重點整理:必須使用 HTML、標示姓名與學號、包含專案結構、UML、重點程式註解、實作截圖、 Trouble Shooting、Gemini 分享連結與學習心得,且主題是「雙視訊人流分析系統」。

2. 資訊專案結構(說明)

以下為本專案建議結構,方便管理雙來源影像、人流統計與前端報告頁。

20260401_1/ ├─ app.py # 主程式:開啟兩路視訊、執行辨識、更新畫面 ├─ detector.py # 人流辨識模組(可封裝模型推論) ├─ tracker.py # 追蹤與唯一 ID 記錄 ├─ stats.py # 峰值、平均值、趨勢計算 ├─ requirements.txt # 專案套件需求 ├─ videos/ │ └─ protest_demo.mp4 # 群眾來源 A 的示範影片 ├─ output/ │ ├─ frame_capture_01.png # 執行畫面擷圖 │ ├─ frame_capture_02.png │ └─ trend_chart.png # 趨勢圖匯出 ├─ docs/ │ ├─ report.html # 本次作業 HTML 報告 │ └─ uml_notes.txt # UML 補充說明 └─ assets/ ├─ style.css # 額外樣式(若分離 CSS) └─ runtime_capture_01.png # 真實執行截圖(來源 A / B 與趨勢圖) └─ runtime_capture_02.png # 真實執行截圖(穩定追蹤狀態)

模組分工說明

  • app.py:負責整合視訊輸入、模型推論與畫面更新。
  • detector.py:執行人物偵測,回傳每一幀的人物框。
  • tracker.py:對同一人物持續追蹤,避免重複計數。
  • stats.py:計算目前人數、峰值、短期平均、長期平均與趨勢。

資料夾設計理由

  • videos/:集中管理示範影片,便於更換資料來源。
  • output/:統一保存執行結果與截圖,方便報告撰寫。
  • docs/:專門放置 HTML 報告與 UML 說明。
  • assets/:整理 CSS、圖示與截圖素材,便於部署到網站。

3. 資訊系統環境圖(UML)二張以上

本報告提供「系統環境圖」與「資料流圖」,說明整體架構與資料處理流程。

UML 圖一:系統環境圖

使用者 觀看分析結果 HTML 報表 / UI 統計資料與趨勢圖展示 Python 主程式 雙視訊擷取 / 偵測 / 追蹤 統計 / 趨勢判讀 來源 A:影片 videos/protest_demo.mp4 來源 B:WebCam 本機攝影機裝置 0

UML 圖二:資料流圖(Data Flow)

來源 A 幀畫面 來源 B 幀畫面 影像前處理 resize / normalize 人物偵測 取得 bbox 與 count ID 追蹤 避免重複計數 統計模組 峰值 / 平均 視覺化模組 面板 / 折線圖

4. 程式邏輯以及安裝套件等說明

依照作業簡報,本系統的執行重點包含安裝套件、放入示範影片、執行主程式與雙來源分析。

執行流程

  1. 切換到工作目錄:cd C:\AI_Traffic_System\20260401_1
  2. 安裝套件:pip install -r ..\requirements.txt
  3. 將影片放入:20260401_1\videos\protest_demo.mp4
  4. 執行:python app.py
  5. qEsc 結束
若實際專案使用的套件版本不同,請依自己的 requirements.txt 為準。

常見套件說明

  • opencv-python:讀取影片、攝影機與畫面顯示。
  • numpy:影像與數值處理。
  • matplotlib / chart 模組:繪製雙折線趨勢圖。
  • 追蹤器或偵測模型:用來判斷人物框與唯一 ID。

若專案採用 YOLO、ByteTrack 或其他模型,可在此補充真實模型名稱與版本。

重點程式註解(示意)

# 開啟兩路來源:來源 A 是影片,來源 B 是 WebCam cap_a = cv2.VideoCapture("videos/protest_demo.mp4") cap_b = cv2.VideoCapture(0) # 初始化統計資料 peak_a = peak_b = 0 history_a, history_b = [], [] unique_ids_a, unique_ids_b = set(), set() while True: ret_a, frame_a = cap_a.read() ret_b, frame_b = cap_b.read() if not ret_a or not ret_b: break # 1) 對每幀進行人物偵測 boxes_a = detect_people(frame_a) boxes_b = detect_people(frame_b) # 2) 透過追蹤器取得每個人物的唯一 ID tracked_a = tracker_a.update(boxes_a) tracked_b = tracker_b.update(boxes_b) # 3) 更新當前人數與唯一 ID current_a = len(tracked_a) current_b = len(tracked_b) unique_ids_a.update(obj.id for obj in tracked_a) unique_ids_b.update(obj.id for obj in tracked_b) # 4) 更新峰值與移動平均 peak_a = max(peak_a, current_a) peak_b = max(peak_b, current_b) history_a.append(current_a) history_b.append(current_b) short_avg_a = moving_average(history_a, 5) long_avg_a = moving_average(history_a, 20) # 5) 趨勢判讀:短期平均大於長期平均,可判斷為上升趨勢 trend_a = "上升" if short_avg_a > long_avg_a else "平穩/下降" # 6) 將統計結果畫到畫面上,再顯示雙折線比較圖 draw_dashboard(frame_a, frame_b, current_a, current_b, peak_a, peak_b, trend_a) if cv2.waitKey(1) & 0xFF in [ord('q'), 27]: break

上述程式重點在於:同時接收兩路輸入、執行人物辨識、利用追蹤器避免重複計數、再把統計結果與趨勢資訊回饋到介面。

5. 全系統功能

核心技術:人流辨識技術。系統會同步監看兩個來源,並進行趨勢比較。

目前人數
即時更新
每一幀都會重新計算當前畫面中的人物數量。
累積辨識 ID
避免重複
利用追蹤器記住出現過的人員 ID,提升統計可信度。
峰值人數
Max Peak
記錄觀察期間內的最高人數,用於活動熱度分析。
短期平均
Short Avg
反映最近一段時間的變化,敏感度較高。
長期平均
Long Avg
反映較長時間的人流趨勢,波動較平滑。
趨勢判讀
上升 / 平穩 / 下降
比較短期與長期平均後,判斷人流是否正在增加。

來源 A 與來源 B 的比較價值

  • 可比較不同場景或不同角度的群眾密度。
  • 能分析活動現場與入口區域的人流差異。
  • 能看出哪一路人流增加更快,提供即時應變依據。

本系統適合的應用情境

  • 抗議現場與群眾集會安全監測
  • 大型活動入口與舞台前方人流比較
  • 校園、展場或公共空間的人流研究

6. 實作截圖(SOP / 畫面)

以下內容已改為放入本次系統的真實執行截圖,採用「執行全景 + 穩定追蹤 + 重點說明」的方式呈現,讓報告版面更完整且更具專業感。

畫面 01|系統執行全景畫面 Runtime Capture
雙視訊人流分析系統執行畫面截圖一

雙來源即時辨識與人流趨勢分析

此畫面完整呈現來源 A 與來源 B 的同步分析流程。上半部顯示雙視訊輸入與人物框選追蹤,下半部則以折線圖比較兩路來源在不同時間點的人數變化。

  • 來源 A 為示範影片,來源 B 為本機攝影機輸入。
  • 每一路皆顯示 Current、ID Total、Peak、Short AVG、Long AVG 與 Trend。
  • 可觀察系統已能即時更新辨識結果並輸出整體趨勢。
畫面 02|追蹤穩定狀態展示 Live Tracking
雙視訊人流分析系統執行畫面截圖二

即時統計面板與跨來源比較

第二張截圖著重呈現系統在持續執行時的即時反應。可從左側的群眾影片與右側的 WebCam 同步看到追蹤框、ID 標記與曲線更新,證明系統可穩定執行雙來源比較分析。

  • 來源 A 畫面中的人物可被個別辨識並標記追蹤 ID。
  • 來源 B 使用真人鏡頭輸入,可驗證本地攝影機擷取是否正常。
  • 下方折線圖可直觀比較兩路來源的人流波動差異。
以上兩張截圖已直接整合進報告內容,提交時可作為「實作畫面」與「SOP 執行結果」的主要證據。若之後你還有終端機畫面或更多操作步驟截圖,也可以再追加到此區塊下方。

7. 使用 AI 工具對話連結

以下附上 Gemini 對話畫面與分享網址,作為本次作業的 AI 協作紀錄。

Gemini 分享連結

本次作業在整理 app.py 架構、系統說明與報告內容時,也參考了 Gemini 的回覆內容,並將對話記錄整理如下:

https://gemini.google.com/share/f8fa89f19b6b

開啟 Gemini 分享頁面

此連結可作為老師檢查 AI 協作流程的依據,也能對照本報告中對系統架構、模組職責與撰寫流程的整理方式。

Gemini 對話畫面截圖

Gemini 對話與分享頁面截圖

上圖顯示 Gemini 對話頁面、已上傳的簡報檔,以及針對 app.py 的內容說明,可作為本作業 AI 使用證明。

截圖重點

  • 可看出本次題目與簡報檔案名稱 W6_人流辨識與記數
  • 畫面中可看到 Gemini 已針對 app.py 產生說明與程式內容。
  • 右上角帳號區塊與分享介面可對應本次使用者操作流程。
這張截圖與上方分享連結一起放在第 7 節,能讓整份報告更完整,也更符合老師要求的「AI 工具對話連結」項目。

8. Trouble Shooting

以下整理在製作雙視訊人流分析系統時,常見的問題、原因與解法。

問題 可能原因 解決方式
攝影機無法開啟 WebCam 被其他程式佔用,或系統未授權攝影機權限。 關閉其他占用鏡頭的程式,重新插拔攝影機,並到系統設定開啟相機權限。
影片路徑錯誤 videos/protest_demo.mp4 未放到正確位置,或檔名拼錯。 確認目錄結構正確,並使用相對路徑或絕對路徑重新測試。
人物重複計數 只做偵測、沒有加入追蹤 ID,導致同一人物被重複累加。 加入追蹤器,使用唯一 ID 集合記錄已出現的人員。
折線圖更新不順 圖表重繪頻率過高,或電腦效能不足。 降低畫面更新頻率、縮小影像尺寸,或分開執行偵測與視覺化流程。
套件安裝失敗 Python 版本不符、pip 過舊或缺少編譯環境。 先更新 pip,確認 Python 版本,再依 requirements.txt 重新安裝。
WebCam 畫面黑屏 設備索引錯誤,0 不一定是目前使用中的鏡頭。 改試 12 等裝置索引,找到正確鏡頭來源。

9. 學習心得

以下為本次作業的心得範例,可直接使用或再依自己的實作經驗調整。

透過這次「雙視訊人流分析系統」作業,我學到的不只是如何讀取影片與攝影機, 更重要的是理解了人流辨識、追蹤與統計分析之間的關係。以前我只知道影像辨識能看出畫面裡有多少人, 但這次我進一步了解到,如果沒有加入唯一 ID 追蹤,同一個人可能會被重複計算,因此統計結果就會失真。

此外,我也練習了如何把程式邏輯整理成報告內容,包括專案結構、系統環境圖、資料流圖與 Trouble Shooting。 這讓我發現,一個完整的專案不只是把程式寫出來,還要能夠清楚說明它的架構、功能與問題排除方式。

最後,我覺得雙來源比較這個設計很有實用性。因為實際場景中,常常需要同時比較兩個區域的人流變化, 例如活動入口與主舞台附近的差異。未來若有機會,我希望能再加入更完整的資料儲存、警示通知與網頁儀表板功能, 讓整個系統更接近真實應用。