Product Requirements Document · v0.1 · 2026-09-13
Safari 開嘅網頁提詞器：貼稿、set 總秒數、撳一下，個稿就變成一個浮喺 Apple 原生相機 app 上面嘅畫中畫（Picture in Picture）小窗，自動碌字。你用返平時嘅相機拍片，浮窗唔會入片。
想要：一路用原生相機拍、一路見到自動碌嘅字。
iOS 限制：任何 app 都唔可以喺相機 app 上面疊自己嘅 UI。唯一系統級做法係 畫中畫浮窗：一個播緊片嘅小窗，可以浮喺任何 app（包括相機）上面、拖去任何位置、pinch 縮放、撳暫停。App Store 上所有「floating teleprompter」app（Teleprompt Overlay、FloatText、Beast Floating Teleprompter 等）都係用呢個方法。
純網頁 app，唔使 Xcode、唔使 Apple Developer account。
點解要預先 render 成影片，而唔係即時碌字？
iOS Safari 對「即時串流」（canvas 或 MediaStream）入畫中畫嘅支援一直唔穩定（WebKit bug 262479 / 268732 / 280627，iOS 17–18 會拋 NotSupportedError，尤其係「加到主畫面」模式）。真正嘅影片檔就係普通 <video>，畫中畫一定得。
代價：改速度要重新 render 一次（用 WebCodecs 大約幾秒），唔可以碌緊中途即時改快慢。可以喺浮窗撳暫停 / 繼續 / 倒退 15 秒補救。
Safari 開 CuePrompter
→ 貼稿（或揀返上次嘅稿）
→ 調校：總秒數、字體大小、前置倒數
→ 撳「預覽」睇吓速度啱唔啱，唔啱改完再 render
→ 撳「開始 PiP」→ 浮窗出現，先顯示倒數（預設 5 秒）
→ 切去相機 app（swipe up 或 lock screen 開相機）
→ 將浮窗拖到頂部前鏡頭附近，pinch 放大
→ 撳錄影，望住浮窗讀稿
（需要時撳浮窗：暫停 / 繼續 / 倒退 15 秒）
→ 稿碌完，浮窗顯示「— 完 —」並停住
→ 停錄。想重拍：返 Safari 撳「重播」即刻再嚟
稿件輸入
速度控制
前置倒數
結尾停留
Render 成 MP4
進入畫中畫
預覽
文字排版
autoPictureInPicture：撳開始後一離開 Safari 就自動入 PiP（Safari 支援嘅話）[停] 標記自動加停頓| 設定 | 預設 | 範圍 |
|---|---|---|
| 總時長 | 按字數自動估算 | 10–600 秒 |
| 前置倒數 | 5 秒 | 0–15 秒 |
| 結尾停留 | 10 秒 | 0–30 秒 |
| 字體大小 | 中 | 細 / 中 / 大 |
| 影片比例 | 4:3 | 16:9 / 4:3 / 1:1 |
| 鏡像 | 關 | 開 / 關 |
架構：純靜態網頁，一個 index.html + JS，冇 build step。Host 喺 GitHub Pages 或 Cloudflare Pages，Safari 開 URL。
文字 render
<canvas> 逐 frame 畫字，30 fps編碼
VideoEncoder（avc1），iOS Safari 16.4+ 支援mp4-muxer（jsdelivr npm CDN）打包成 MP4 → Blob → URL.createObjectURLMediaRecorder 錄 canvas.captureStream()（Safari 14.5+ 出 video/mp4），但只能 real-time render（60 秒稿要等 60 秒）播放 & PiP
<video playsinline muted src=blob:...>video.play() → video.webkitSetPresentationMode('picture-in-picture')資料
唔用 standalone PWA 模式
display: browser，避開 iOS 主畫面 web app 嘅 PiP bug| # | 風險 | 點驗證 | 如果唔得 |
|---|---|---|---|
| 1 | Safari 觸發嘅 PiP 浮窗喺相機 app 上面會唔會顯示 | 真機實測 | 轉原生 app 方案（見第 13 節） |
| 2 | 純影像、冇聲軌嘅 MP4 可唔可以入 PiP | 真機實測 | 加一條靜音 AAC 軌（Safari 26 有 AudioEncoder） |
| 3 | WebCodecs 喺 iOS Safari 嘅實際 render 速度 | 量 60 秒稿 render 時間 | 降 fps 到 15，或者降解像度 |
| 4 | PiP 窗最大尺寸下每行放到幾多字先睇得清 | 真機實測三種比例 | 調整預設字體同比例 |
| 5 | autoPictureInPicture 未必每部機都得 | 真機實測 | 只靠手動撳掣 |
| Phase | 內容 | 預計 |
|---|---|---|
| 0 | 一頁 spike：硬 code 一段稿，驗證第 10 節第 1–4 項 | 半日 |
| 1 | P0 全部 + 簡單 UI | 1–2 日 |
| 1.5 | P1 | 1 日 |
| 2 | Notion 整合 | 之後 |
原生 Swift app + PiP（AVSampleBufferDisplayLayer 即時 render） 可以即時改速度、唔使預 render。但要裝 Xcode；免費 Apple ID 每 7 日要重新裝一次；長期用要 US$99/年 developer account。將來如果想要語音跟讀，先值得轉呢條路。
自己拍片嘅 web app（getUserMedia + MediaRecorder） Yolanda 明確想用原生相機。而且 Safari 錄影畫質通常上限 1080p，切 app 會斷錄，存片要經 share sheet。