LoopSlide 數位相框

要解決的問題

很多人手邊都有一支閒置的 iPhone 或 iPad，而家裡的照片和影片不是在手機相簿，就是存在 NAS 上。市售數位相框多半要先把照片上傳到雲端，或只能播放記憶卡裡的檔案。LoopSlide 想讓舊裝置直接變成相框，直接讀取原本存放照片的地方，不需要先搬到雲端。

畫面截圖

主要功能

• 多種媒體來源

  可以播放 Apple 照片、檔案 App，以及 NAS 上透過 SMB 或 WebDAV 分享的照片與影片，並用 Bonjour 自動找到區網內的 NAS。

• 轉場與 Ken Burns

  照片之間有隨機變化的轉場效果，靜態照片可以加上緩慢縮放與平移的 Ken Burns 動態，另有黑白、復古棕褐、懷舊、暖色與冷色濾鏡。

• 拼貼模式

  一次以 2、4 或 6 張排成網格；同一組裡有影片時，會等最長的影片完整播完一次再換下一組，較短的影片在等待期間自動循環。

• 時鐘、天氣與照片資訊

  可以在相框上顯示大時鐘與目前天氣，天氣資料來自 Open-Meteo，不需要帳號；也能顯示 EXIF 拍攝參數，或加上復古相機風格的日期浮水印。

• 展覽排程與 AirPlay

  可設定每天自動開始與停止播放的時間，適合店面或展場；搭配背景音樂、螢幕常亮，也能用 AirPlay 投到 Apple TV 或其他相容的螢幕。

• 本機優先

  不需要帳號、沒有廣告與追蹤，本機照片完全離線可用，NAS 功能只需要同一個 Wi-Fi 區網。

技術架構

介面與播放邏輯用 React 19 與 TypeScript 寫，透過 Capacitor 8 包成 iOS App，Vite 負責建置、Vitest 負責測試。WebView 做不到或做不好的部分改寫成原生 Swift 外掛，例如用 AMSMB2 連線與掃描 SMB 分享資料夾、從照片圖庫載入照片、背景音樂與 AirPlay。分工原則是畫面、播放流程與媒體來源邏輯都留在 Web 層，原生程式碼只負責需要系統能力的部分。EXIF 解析使用 exifr，設定存在本機的 Preferences，沒有任何自建後端。

技術挑戰與取捨

• 從 NAS 串流影片，而不是先整支下載

  早期 SMB 影片要先完整下載到暫存檔才能播放，大檔案起播很慢，網路不穩時也容易失敗或黑畫面。WebView 的影片元件無法直接讀取 SMB，因此在原生層加了一個 App 內的 HTTP 串流端點：每支影片註冊成一個帶隨機 token 的本機網址，播放器發出的 Range 請求會被轉成對 SMB 檔案的分段讀取。這樣影片可以邊讀邊播、支援拖曳，取得串流網址失敗時才退回下載。這個改動和更完善的 timeout 與重試一起在 1.2.0 版推出。

• 長時間播放不能卡住

  相框是一放就是好幾天的 App，只要有一個檔案讀不到、NAS 暫時斷線，整個輪播就可能停在原地。播放流程把載入失敗的項目標記起來，不讓它無限期擋住下一組的準備，下一組等待超過時限時也會強制前進，之後再輪到該檔案時會重新嘗試。記憶體方面只保留目前畫面前後相鄰的項目，離開視窗的 blob URL 會立即釋放，磁碟快取則有容量上限並依最後使用時間淘汰。

• 拼貼模式裡的多支影片

  拼貼一次顯示好幾個項目，若裡面有長短不一的影片，用固定秒數換組會把長影片切掉，等全部影片都播完又會讓短影片停在最後一格。最後的規則是以同一組裡最長的影片為準，讓它完整播完一次再換組，較短的影片在等待時循環播放。另外也修正了從單張切換成四張拼貼後，「下一組」只跳一張的導覽問題。

現況

iPhone 與 iPad 版在 App Store 免費提供；Apple TV 版是另一個獨立的 App。