Files

T

JianMiauandClaude Fable 5 0cf034a856 新增動態相片 Web AR 服務（照片掃描播放對應影片）

摘要：
建立照片=key、影片=value 的 Web AR 服務，手機瀏覽器掃描照片後，
影片會貼齊照片位置覆蓋播放（同小米相片印表機動態照片效果）。

根本原因：
全新專案。

影響：
管理頁（3510/HTTP）可上傳配對並於瀏覽器端編譯 MindAR 特徵檔；
掃描頁（3511/HTTPS）供手機掃描照片播放影片。資料存於 /data volume，
支援外掛正式憑證（/certs），無憑證時自動產生自簽憑證。

修法：
Node.js + Express 後端、MindAR + A-Frame 前端，Docker 部署
（sudo docker compose up -d --build）。已處理 iOS 影片解鎖漏音
（影片保持靜音直到掃到照片）、MindAR 相機畫面被 body 背景遮蔽、
A-Frame boolean 屬性解析等問題。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

2026-07-07 10:04:27 +08:00

3.1 KiB

Raw Permalink Blame History

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"。（頁面上顯示的互連連結取自容器內埠號，若對外映射成不同埠號，請自行以對外埠號連線。）

3.1 KiB Raw Permalink Blame History Unescape Escape