因為ESP32-CAM沒有HDMI口,今天嘗試的是如何讓產生的廣告在螢幕上面顯示 ,
家裡剛好有google model G454V , 所以想透過安裝kiosk連結上html , 過程中比我想像中順利很多 , 安裝的軟體是fully kiosk browser & lockdown , 幾乎就是下載好就能夠連上了
https://play.google.com/store/apps/details?id=de.ozerov.fully&hl=zh_TW
以下為今日遇到的難點紀錄 :
| 階段 | 遇到的難點 (Challenges) | 建議的解決方式 (Solutions) |
|---|---|---|
| 終止舊的 Flask 程式 | 嘗試使用 kill -9 時，出現 syntax error near unexpected token newline 的錯誤。 |
1. 確保 kill -9 後方要替換成實際的進程 ID (PID)，例如：kill -9 736966。2. 建議使用 pkill -f "flask --app backend.app" 來一次終止所有相關進程。 |
| 了解 PID 差別 | 執行 ps aux grep flask 顯示了兩個 PID (736966 與 965916)，不清楚其差異。 |
Flask 伺服器本身在執行的進程 和 執行 ps aux grep flask 指令時，grep 自己也變成了一個進程。 |
| Flask 啟動失敗 (Exit 1) | 使用 nohup flask ... & 嘗試背景運行時，出現 + Exit 1 的結果，Flask 沒有成功跑起來。 |
建議查看 flask.log，以找到詳細的錯誤原因。 |
NameError: _serialize_ad_context |
在 backend/app.py 第 103 行報錯，由於此函式未定義，導致 Flask 啟動中斷。 |
1. 追蹤 _serialize_ad_context 是否遺漏定義或 import。2. 補上此函式（例如：讓它回傳 dict 或 JSON 資料）。 |
| Flask 成功啟動 | (啟動狀態確認) | 修正程式碼後，Flask 伺服器成功啟動，並經由 ss -tlnp grep 8000 確認在 8000 port 正常監聽。 |
| Gemini 初始化訊息消失 | 之前 log 中有顯示 Gemini 初始化成功，但後續啟動時相關訊息消失。 | 1. 確認程式碼有呼叫 genai.configure(api_key=...)。2. 在 VM 中檢查環境變數：echo $GEMINI_API_KEY 是否設定正確。3. 撰寫簡單的 check_gemini.py 腳本，測試是否能順利呼叫 Gemini API。 |
| 階段 | 遇到的難點 (Challenges) | 建議的解決方式 (Solutions) |
|---|---|---|
| Kiosk Browser 設定不確定 | 不知道如何設定 Fully Kiosk Browser 才能自動載入廣告頁、保持全螢幕並避免誤觸。 | 在 Fully Kiosk Browser 中設定：1. Start URL → 指向廣告頁（例如：http:///ad.html?screen_id=storeA）。2. 啟用 Launch on Boot、Keep Screen On (開機自動啟動、螢幕常亮)。3. 啟用 Fullscreen Mode、Hide Navigation Bar (全螢幕沉浸)。4. 設定 Kiosk Mode 來鎖定頁面，避免退出。 |
| 廣告即時更新機制 | 目前使用每 5 秒自動刷新的機制，導致頁面會閃爍，目標是讓電視棒「收到訊息」即時更新。 | 方案 A (短期)：保留 5 秒自動刷新（簡單，但頁面會閃爍）。方案 B (建議)：改用 SSE (Server-Sent Events)，讓後端推送更新，前端即時換廣告，不需整頁重載。方案 C (進階)：使用 WebSocket，實現雙向通訊，但比 SSE 複雜。 |
| 廣告頁僅綁定單一會員 | /ad/ 頁面目前只能顯示單一會員的廣告，無法自動切換不同會員的內容。 |
方案 A (後端控制)：新增 /ad/latest 頁面，由後端控制顯示哪一位會員的廣告，電視棒固定開啟此頁面。方案 B (前端控制)：前端製作 /ad/loop 頁面，利用 JavaScript 定時切換不同會員的頁面。方案 C (即時推送)：透過 SSE 或 WebSocket 讓後端即時指定顯示哪個會員的廣告。 |
| 電視棒無法插電腦螢幕顯示 | 將電視棒接到電腦螢幕（尤其筆電）後，沒有畫面顯示。 | 1. 最簡單方式：直接插在一般電視的 HDMI 埠測試。2. 若要在電腦上觀看，需要添購 HDMI 擷取卡。3. 若使用桌機螢幕且有 HDMI-in 埠，需在螢幕 OSD 選單中切換輸入源。 |
| 同時顯示廣告頁與儀表板 | 電視棒是單視窗，無法同時顯示兩個網址（/ad/latest 和 /latest_upload）。 |
方案 A (最佳解)：建立一個 /combo 頁面，利用左右分割或 iframe 同時載入廣告與儀表板的網址。方案 B (輪播)：Fully Kiosk 支援 Tab Rotation，可設定讓兩頁輪播顯示。方案 C (單頁整合)：把儀表板的數據直接嵌入廣告頁，整合成單一頁面。 |
iThome鐵人賽
看影片追技術