# photo-live 動態相片 把「照片」當成 key、「影片」當成 value 的 Web AR 服務。 用手機相機掃描照片,辨識成功後影片會貼齊照片的位置與角度覆蓋播放 (效果同小米相片印表機的動態照片功能)。 核心採用 [MindAR](https://github.com/hiukim/mind-ar-js)(瀏覽器端影像追蹤), 手機不用安裝 App,開網頁就能用。 ## 部署(NAS Docker) ```bash 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 正式憑證 | ### 憑證 伺服器啟動時依序尋找憑證: 1. 環境變數 `SSL_KEY` / `SSL_CERT` 指定的完整路徑 2. `/certs` 目錄下的常見檔名組合:`privkey.pem`+`fullchain.pem`、 `server.key`+`server.crt`、`key.pem`+`cert.pem` 等 3. 都找不到就自動產生自簽憑證(瀏覽器會出現警告) 把 Synology 憑證(控制台 → 安全性 → 憑證 → 匯出)的 `privkey.pem` 與 `fullchain.pem` 放進 `/volume1/docker/certs` 即可。注意:手機要用**憑證對應的網域** 連掃描頁(`https://你的網域:3511/`),用 IP 連的話憑證不會生效、仍會跳警告。 更換憑證後重啟容器:`sudo docker compose restart`。 ## 使用流程 1. 用**桌機瀏覽器**開管理頁,上傳一張照片與對應影片(可多組)。 2. 按「**重新編譯全部照片**」。特徵編譯在瀏覽器端執行,每張照片約 10~30 秒, 完成後自動上傳到伺服器。新增或刪除配對後都要重新編譯。 3. 手機開啟 `https://NAS的IP:3511/`,因為是自簽憑證,瀏覽器會警告 「連線不安全」→ 選「進階」→「仍要前往」。 4. 按「開始掃描」並允許相機權限,對準實體照片(或螢幕上的照片)即可。 ## 注意事項 - **一定要用 HTTPS 開掃描頁**:瀏覽器規定相機只能在安全連線下使用。 若 NAS 已有反向代理(如 Synology 的反向代理伺服器+正式憑證), 可以把網域用 HTTPS 指到容器的 3511 埠,體驗更好(沒有憑證警告)。 - **照片建議**:紋理豐富、對比清楚的照片辨識效果最好; 大面積純色、過暗或重複花紋的照片不易辨識。 - **影片建議**:H.264 編碼的 MP4 相容性最好(iOS/Android 皆可播)。 影片長寬比最好與照片一致,播放時才不會變形。 - iOS 若無法自動播放聲音,影片會退回靜音播放(瀏覽器限制)。 ## 埠號調整 改 `docker-compose.yml` 的 ports 即可,例如 `"9510:3510"`、`"9511:3511"`。 (頁面上顯示的互連連結取自容器內埠號,若對外映射成不同埠號,請自行以對外埠號連線。)