掃描成功後右下角顯示影片下載按鈕

摘要：
掃到照片後，掃描頁右下角出現圓形下載按鈕，點擊可下載最後掃到的影片。

根本原因：
使用者希望能把掃描到的動態影片存到手機。

影響：
每次 targetFound 會更新按鈕連結與檔名（配對名稱.副檔名，如 20260707_093628.mp4）；
掃到不同照片會切換成該張的影片；按 ✕ 停止掃描時按鈕隱藏。

修法：
新增固定於右下角的 <a download> 按鈕，targetFound 時設定 href 與 download
屬性並顯示。版本標示 v7。

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

public/index.html

@@ -32,6 +32,14 @@
     width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
     background: rgba(0,0,0,.5); color: #fff; font-size: 18px; display: none;
   }
+  #dlBtn {
+    position: fixed; bottom: 24px; right: 16px; z-index: 1001;
+    width: 52px; height: 52px; border-radius: 50%;
+    background: rgba(0,0,0,.55); color: #fff; font-size: 24px;
+    display: none; align-items: center; justify-content: center;
+    text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.4);
+  }
+  #dlBtn:active { transform: scale(0.94); }
   a { color: #8fb4ff; }
 </style>
 </head>
@@ -41,15 +49,17 @@
     <p id="status">載入中…</p>
     <button id="startBtn" hidden>開始掃描</button>
     <p class="hint">按下開始後，將相機對準已登錄的照片，<br>對應的影片就會覆蓋在照片上播放。</p>
-    <p class="hint" style="font-size:11px">v6</p>
+    <p class="hint" style="font-size:11px">v7</p>
   </div>
   <button id="stopBtn" title="停止">✕</button>
+  <a id="dlBtn" title="下載影片" download>⬇</a>
 
 <script>
 const overlay = document.getElementById('overlay');
 const statusEl = document.getElementById('status');
 const startBtn = document.getElementById('startBtn');
 const stopBtn = document.getElementById('stopBtn');
+const dlBtn = document.getElementById('dlBtn');
 
 let sceneEl = null;
 const videos = [];
@@ -151,6 +161,10 @@ function buildScene(version, entries) {
         video.muted = true; // 有聲播放被瀏覽器擋下時退回靜音播放
         video.play().catch(() => {});
       });
+      // 右下角出現下載按鈕，可下載最後掃到的影片
+      dlBtn.href = video.src;
+      dlBtn.setAttribute('download', t.pair.name + t.pair.video.slice(t.pair.video.lastIndexOf('.')));
+      dlBtn.style.display = 'flex';
     });
     anchor.addEventListener('targetLost', () => {
       isFound = false;
@@ -206,6 +220,7 @@ stopBtn.addEventListener('click', () => {
   try { sceneEl.systems['mindar-image-system'].stop(); } catch {}
   for (const v of videos) v.pause();
   stopBtn.style.display = 'none';
+  dlBtn.style.display = 'none';
   overlay.classList.remove('hidden');
   startBtn.disabled = false;
   statusEl.textContent = '已停止，可再次開始掃描';