即時影音互動式遊戲、益智問答節目

產品發展

這個產品主要開發時間從 2017 年 8 月到 2018 年 8 月、2020 年 5 月到 2021 年 1 月。產品發展分為三個階段：

1. 遊戲間 - 一個小時一次的遊戲室，每小時自動結算頒發獎勵點數
2. 即時串流競賽 - 固定時間舉辦的節目，節目包含小遊戲以及益智問答環節
3. 宣傳節目 - 宣傳用的競賽，節目包含限時問答（Lightning Round）以及益智問答

這個產品在 2018 年吸引了幾百人參加，吸引了三萬以上用戶；後來 2021 年與學校合作的數學競賽也有一百多人同時上線參與。

技術規劃

在設計系統時，我們選擇價格低廉的 HLS 串流搭配 Firebase 加速開發速度以及營運的花費。

2018 年的即時系統包含一個節目主控台讓主持人可以即時對留言以及排行榜做出反應，增加節目的即時趣味性。後來 2021 年的宣傳競賽採用預先錄製的影片（Live VOD 形式）以及 CLI 工具讓工程師可以更輕鬆地用一行指令舉辦競賽。這一次重構也將 API 整理成正式的 OpenAPI 文件並採用 RESTful 的理念規劃。

技術關鍵字：Firebase（Auth、Realtime Database、Firestore、Functions、Storage）、FaaS、Angular、Electron。

我們也短暫在平台上辦了一個影片競賽，舉辦過的活動可以參閱粉絲專頁。

詳細技術內容

以 2021 年重構之後的架構來看。

影片以及事件串流

串流部分採用 Wowza Streaming Engine 搭配 Wowza CDN 串流到使用者的裝置上。選擇 Wowza 是為了他所提供的 Java 插件 API 和比較便宜的 CDN。串流透過字幕觸發前端的事件讓影片以及事件同步，因為 HLS 本身的設計裝置之間會有誤差，但是我們的競賽性質比較不受到誤差影響。我們用 Docker Compose 把 Wowza 以及 NGINX 包裝成一個應用程式。

後端

目前的後端採 RESTful 設計，並提供 Batch API 加速連續但是沒有資料相依性（但是可以有狀態相依性）的要求。我們用 JSON Web Token 驗證某些要求，像是：讓使用者無法在時間超過的時候答題，這個就完全不用打資料庫。

資料庫使用 Firebase 的 Firestore，這次重構也有將所有 API 做成 OpenAPI 文件。

營運

原本 2018 年的設計會有一個串流主控台會同時控制節目進程和 OBS 場景。2021 年的新設計取消了這個主控台，直接透過 CLI 工具以 ffmpeg 串流預先錄製的影片到 Wowza 並同時透過 HTTP API 控制 Wowza 端的節目狀態。這讓節目安排更容易，可以寫成一個定義檔案，在執行 CLI 工具的時候將節目定義寫入資料庫，再開始競賽。

前端

採用 Angular 與番茄小學堂的應用程式結合在一起。我們有一個 Coding 程式庫可以將後端的 HTTP 取得的 JSON 物件解碼成 JavaScript 物件（帶有 Prototype 的物件，也可以同時確認資料的正確性）。

另外，我們用 Showdown 以及 Katex 撰寫題目內容，並在前端用 JavaScript 渲染出來。