JianMiauandClaude Fable 5
0cf034a856
摘要： 建立照片=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>
68 lines
3.1 KiB
Markdown
68 lines
3.1 KiB
Markdown
# 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"`。
|
||
（頁面上顯示的互連連結取自容器內埠號，若對外映射成不同埠號，請自行以對外埠號連線。）
|