main
根本原因: MindAR 以整張照片的特徵點做比對,同場地、同構圖的照片 (例如活動現場連拍)大部分特徵點落在共同背景(場地線條、 天花板、浮水印),會穩定地互相認錯、播出別張的影片。 調高 warmupTolerance 實測無效:錯誤目標是持續穩定匹配, 嚴格化只是更慢地確認錯的答案。 影響: 背景相似的多組照片無法在同一個特徵檔中正確區分。 修法: 1. 管理頁每組配對新增「框主體」:在照片上拖曳框選最有辨識度 的區域(相對座標存於 pairs.json,照片檔不動),編譯時只用 框內影像產生特徵。框的長寬下限 15%,實測框太小(僅臉部 特寫)會特徵點不足而完全偵測不到。 2. server 新增 PUT /api/pairs/:id/crop 儲存裁切框;更動後 自動標記「有變更尚未編譯」。 3. 掃描頁依 mapping 中的 aspect 與 crop 將影片平面放大平移, 辨識目標雖只是照片的一塊,影片仍精確覆蓋整張照片 (已用假相機截圖驗證幾何)。無裁切的舊資料行為不變。 已知限制:兩張照片若互相拍到彼此的主體(同兩人、同場地的 連拍),框選也無法完全區分——框內容本來就存在於另一張裡。 這種情況仍建議更換其中一張照片。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
photo-live 動態相片
把「照片」當成 key、「影片」當成 value 的 Web AR 服務。 用手機相機掃描照片,辨識成功後影片會貼齊照片的位置與角度覆蓋播放 (效果同小米相片印表機的動態照片功能)。
核心採用 MindAR(瀏覽器端影像追蹤), 手機不用安裝 App,開網頁就能用。
部署(NAS Docker)
sudo docker compose up -d --build
啟動後:
| 頁面 | 網址 | 用途 |
|---|---|---|
| 動態相片管理 | http://NAS的IP:3510/ |
上傳照片+影片配對、編譯辨識特徵 |
| 動態相片掃描 | https://NAS的IP:3511/ |
手機開啟,掃描照片播放影片 |
Volume 對應(docker-compose.yml):
| NAS 路徑 | 容器路徑 | 內容 |
|---|---|---|
/volume1/docker/photo-live |
/data |
照片、影片、特徵檔(重建容器不會遺失) |
/volume1/docker/certs |
/certs(唯讀) |
HTTPS 正式憑證 |
憑證
伺服器啟動時依序尋找憑證:
- 環境變數
SSL_KEY/SSL_CERT指定的完整路徑 /certs目錄下的常見檔名組合:privkey.pem+fullchain.pem、server.key+server.crt、key.pem+cert.pem等- 都找不到就自動產生自簽憑證(瀏覽器會出現警告)
把 Synology 憑證(控制台 → 安全性 → 憑證 → 匯出)的 privkey.pem 與
fullchain.pem 放進 /volume1/docker/certs 即可。注意:手機要用憑證對應的網域
連掃描頁(https://你的網域:3511/),用 IP 連的話憑證不會生效、仍會跳警告。
更換憑證後重啟容器:sudo docker compose restart。
使用流程
- 用桌機瀏覽器開管理頁,上傳一張照片與對應影片(可多組)。
- 按「重新編譯全部照片」。特徵編譯在瀏覽器端執行,每張照片約 10~30 秒, 完成後自動上傳到伺服器。新增或刪除配對後都要重新編譯。
- 手機開啟
https://NAS的IP:3511/,因為是自簽憑證,瀏覽器會警告 「連線不安全」→ 選「進階」→「仍要前往」。 - 按「開始掃描」並允許相機權限,對準實體照片(或螢幕上的照片)即可。
注意事項
- 一定要用 HTTPS 開掃描頁:瀏覽器規定相機只能在安全連線下使用。 若 NAS 已有反向代理(如 Synology 的反向代理伺服器+正式憑證), 可以把網域用 HTTPS 指到容器的 3511 埠,體驗更好(沒有憑證警告)。
- 照片建議:紋理豐富、對比清楚的照片辨識效果最好; 大面積純色、過暗或重複花紋的照片不易辨識。
- 影片建議:H.264 編碼的 MP4 相容性最好(iOS/Android 皆可播)。 影片長寬比最好與照片一致,播放時才不會變形。
- iOS 若無法自動播放聲音,影片會退回靜音播放(瀏覽器限制)。
埠號調整
改 docker-compose.yml 的 ports 即可,例如 "9510:3510"、"9511:3511"。
(頁面上顯示的互連連結取自容器內埠號,若對外映射成不同埠號,請自行以對外埠號連線。)
Languages
HTML
73.4%
JavaScript
23.6%
Dockerfile
3%