從監視器錄影到 3D 貨架熱點：瀏覽器端的電腦視覺管線
一週內，把一支店內監視器錄影，做成 3D 火柴人、頭部朝向圓錐和貨架熱點，再接上批次分析與報告產生。全部在瀏覽器端跑，影像不上傳。
每一個畫面，都被反覆打磨
從線稿到上線，連一個間距、一種狀態都不放過。
關鍵績效指標
站位逐幀抖動 p：25.2cm → 7.4cm
項自動化測試＋10 項端到端檢查
批次分析約 倍即時，兩次結果逐位元組相同
專案資訊
專案說明
這是一個電腦視覺與 3D 網頁整合的內部專案：輸入是一支店內監視器錄影，輸出是貨架每一櫃、每一層被注意的程度，以及陳列建議報告。
管線分成幾段。MediaPipe 在瀏覽器裡找出每位顧客的身體關鍵點；地上四個標記點求出單應性，把畫面位置換成真實地面的公尺座標；再把骨架放進用程式產生的 3D 貨架，推估頭部朝向，以誤差圓錐累積到每一格。
精度多少就說多少。監視器看到的是頭朝哪裡，眼睛在 ±20~25° 內轉動時頭不會動，所以我們只宣稱到「第幾櫃、第幾層」，畫面上的橘色圓錐就是誤差範圍，熱點以格子呈現，不畫連續的彩虹色塊。報告在樣本不足、攝影機不合格時，會直接標示不可用於決策。
幾個工程重點：座標系轉換曾經出過「左右鏡像」的 bug，畫面上完全看不出來，所以每個轉換都有可執行的斷言；逐幀抖動用 One Euro 濾波處理，站位 p95 從 25.2cm 降到 7.4cm；長錄影用固定取樣逐步分析，同一支影片跑兩次結果逐位元組相同，在 Apple M5 上約 2.5 倍即時。
交付前經過兩輪獨立程式審查，修掉了會讓報告出現錯誤數字的問題，例如覆蓋率偏向尖峰時段、員工排除時數重複計算。
案例故事
挑戰
監視器看不到眼睛，只能推估頭部朝向，橫向的細節在物理上就不存在
座標系轉換錯了，3D 畫面上看不出來，只有熱點會悄悄算錯
姿態估計逐幀抖動，火柴人亂跳
長錄影要分析得快，而且結果要能重現
解法
先算誤差預算，把粒度定在「櫃 × 層」，並把誤差範圍畫在畫面上
每個座標轉換都寫可執行的斷言，不靠目視
One Euro 濾波分別平滑站位、身形與朝向，加上跨幀人物配對
固定取樣、逐步 seek 的批次模式，GPU 加速，輸出每 5 分鐘一桶的統計
成果
站位逐幀抖動 p95 從 25.2cm 降到 7.4cm，頭部位置從 27.9cm 降到 7.6cm
172 項自動化測試＋10 項端到端檢查全綠，其中 27 項用真實影片跑批次分析
長錄影批次分析在 Apple M5 上約 2.5 倍即時，48 小時錄影約 19 小時跑完
核心功能
瀏覽器端姿態估計
用 MediaPipe 在瀏覽器裡辨識每位顧客的身體關鍵點，只看姿勢、不做臉部辨識，影像不上傳。
單應性標定
現場貼地面標記、在畫面上點出位置，以 N 點最小平方解求出畫面與地面的對應，附每點誤差與站點驗收。
3D 貨架與頭部朝向
用程式產生參數化貨架，把骨架放進 3D 場景，推估頭朝哪一櫃哪一層，誤差範圍直接畫成圓錐。
可重現的批次分析
長錄影以固定取樣逐步分析，每 5 分鐘輸出一桶統計，同一支影片兩次結果完全相同。
員工排除與前置檢查
依識別背心顏色與補貨時段排除員工；用 2 分鐘錄影判斷攝影機角度與解析度夠不夠。
陳列研究報告
陳列圖 CSV 驗證、兩期聚合與變動偵測，列出商品對調建議；樣本不足或攝影機不合格時自動標示。
