新增動態相片 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>
This commit is contained in:
+28
@@ -0,0 +1,28 @@
|
||||
FROM node:20-alpine
|
||||
|
||||
# tzdata 讓容器能透過 TZ 環境變數使用本地時區(配對名稱以當下時間命名)
|
||||
RUN apk add --no-cache tzdata
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json ./
|
||||
RUN npm install --omit=dev
|
||||
|
||||
# 建置時抓取前端函式庫,之後在區網離線環境也能使用
|
||||
# mind-ar 1.2.2 的編譯器是 ES module,需要一併抓取它的 chunk 檔(檔名含 hash,隨版本固定)
|
||||
ARG AFRAME_VERSION=1.4.2
|
||||
ARG MINDAR_VERSION=1.2.2
|
||||
RUN mkdir -p public/vendor \
|
||||
&& wget -q -O public/vendor/aframe.min.js "https://aframe.io/releases/${AFRAME_VERSION}/aframe.min.js" \
|
||||
&& wget -q -O public/vendor/mindar-image-aframe.prod.js "https://cdn.jsdelivr.net/npm/mind-ar@${MINDAR_VERSION}/dist/mindar-image-aframe.prod.js" \
|
||||
&& wget -q -O public/vendor/mindar-image.prod.js "https://cdn.jsdelivr.net/npm/mind-ar@${MINDAR_VERSION}/dist/mindar-image.prod.js" \
|
||||
&& wget -q -O public/vendor/controller-495b585f.js "https://cdn.jsdelivr.net/npm/mind-ar@${MINDAR_VERSION}/dist/controller-495b585f.js" \
|
||||
&& wget -q -O public/vendor/ui-85e81035.js "https://cdn.jsdelivr.net/npm/mind-ar@${MINDAR_VERSION}/dist/ui-85e81035.js"
|
||||
|
||||
COPY server.js ./
|
||||
COPY public ./public
|
||||
|
||||
ENV NODE_ENV=production
|
||||
EXPOSE 3510 3511
|
||||
|
||||
CMD ["node", "server.js"]
|
||||
Reference in New Issue
Block a user