為 Cast 接收器新增即時支援

1. 總覽

Google Cast 標誌

本程式碼研究室將說明如何建構使用 Cast Live Breaks API 的自訂網頁接收器應用程式。

什麼是 Google Cast？

使用者可以透過 Google Cast，將行動裝置中的內容投放到電視上。使用者就能將行動裝置當成遙控器，控制電視上的媒體播放。

透過 Google Cast SDK，您可以擴充應用程式，控制電視或音響系統。Cast SDK 可讓您根據 Google Cast 設計檢查清單新增必要的使用者介面元件。

我們提供 Google Cast 設計檢查清單，確保所有支援的平台都能提供簡單易懂的 Cast 使用者體驗。

我們要建構什麼內容？

完成本程式碼研究室後，您將建構出可運用 Live API 的 Cast 接收器。

課程內容

如何在 Google Cast 中處理直播影片內容。
如何設定 Cast 支援的各種直播情境。
如何在直播中加入節目資料

軟硬體需求

最新版 Google Chrome 瀏覽器。
HTTPS 代管服務，例如 Firebase 代管或 ngrok。
已設定網路連線的 Google Cast 裝置，例如 Chromecast 或 Android TV。
具備 HDMI 輸入端的電視或螢幕，或是 Google Home Hub

體驗

須具備先前的網頁開發知識。
具備建構 Cast 傳送端和接收端應用程式的經驗。

您會如何使用本教學課程？

僅閱讀

閱讀並完成練習

您對建構網頁應用程式的體驗滿意嗎？

新手

中級

熟練

2. 取得程式碼範例

您可以將所有範例程式碼下載到電腦...

並解壓縮下載的 ZIP 檔案。

3. 在本機部署接收器

如要透過 Cast 裝置使用網頁接收器，必須將接收器代管在 Cast 裝置可存取的位置。如果您已有支援 HTTPS 的伺服器，請略過下列操作說明，並記下網址，因為您會在下一節用到。

如果沒有可用的伺服器，可以使用 Firebase Hosting 或 ngrok。

執行伺服器

設定好所選服務後，請前往 app-start 並啟動伺服器。

請記下代管接收器的網址。您會在下一節中使用這項資訊。

4. 在 Cast 開發人員控制台中註冊應用程式

您必須註冊應用程式，才能在 Chromecast 裝置上執行自訂接收器 (如本程式碼研究室所建構)。註冊應用程式後，您會收到應用程式 ID，傳送端應用程式必須使用這個 ID 執行 API 呼叫，例如啟動接收端應用程式。

Google Cast SDK 開發人員控制台的圖片，並醒目顯示「Add New Application」(新增應用程式) 按鈕

按一下「新增應用程式」

「New Receiver Application」(新增接收器應用程式) 畫面圖片，當中標出「Custom Receiver」(自訂接收器) 選項

選取「自訂接收器」，這就是我們要建構的項目。

「新增自訂接收器」畫面圖片，顯示使用者在「接收器應用程式網址」欄位中輸入的網址

輸入新接收器的詳細資料，請務必使用您最終取得的網址

在最後一個部分中，記下指派給全新接收器的應用程式 ID。

您也必須註冊 Google Cast 裝置，才能在發布接收器應用程式前存取該應用程式。發布接收器應用程式後，所有 Google Cast 裝置都能使用。在本程式碼研究室中，建議使用未發布的接收器應用程式。

Google Cast SDK 開發人員控制台的圖片，其中醒目顯示「新增裝置」按鈕

按一下「新增裝置」

「新增 Cast 接收端裝置」對話方塊圖片

輸入 Cast 裝置背面印製的序號，並為裝置取個清楚易懂的名稱。你也可以在存取 Google Cast SDK 開發人員控制台時，透過 Chrome 投放螢幕畫面來查看序號

接收器和裝置需要 5 到 15 分鐘才能準備好進行測試。等待 5 到 15 分鐘後，請重新啟動 Cast 裝置。

5. 投放簡單的直播

圖片：Android 手機正在播放影片，底部顯示「正在投放到起居室」訊息，上方為影片播放器控制項全螢幕播放同一部影片的圖片

開始本程式碼研究室之前，建議先詳閱即時開發人員指南，瞭解即時 API 的相關資訊。

對於傳送端，我們會使用 Cactooll 啟動 Cast 工作階段。接收器會自動開始播放直播。

接收器由三個檔案組成。名為 receiver.html 的基本 HTML 檔案，內含主要應用程式結構。您不需要修改這個檔案。此外，還有一個名為 receiver.js 的檔案，其中包含接收器的所有邏輯。最後，還有一個 metadata_service.js，稍後在程式碼研究室中會使用這個函式，模擬取得節目表資料。

首先，請在 Chrome 中開啟 Cactool。輸入 Cast SDK 開發人員控制台提供的「接收器應用程式 ID」，然後按一下「設定」。

必須指示 Web Receiver Cast 應用程式架構 (CAF)，要播放的內容是直播。如要這麼做，請使用下列程式碼行修改應用程式。在 receiver.js 中，將其新增至負載攔截器的主要主體：

request.media.streamType = cast.framework.messages.StreamType.LIVE;

將串流類型設為 LIVE，即可啟用 CAF 的即時使用者介面。Web Receiver SDK 會自動跳至串流的直播邊緣。系統尚未新增即時節目表資料，因此時間軸會顯示可搜尋的完整直播範圍。

儲存 receiver.js 的變更，然後在 Cactool 上按一下「投放」按鈕並選取目標投放裝置，即可啟動投放工作階段。直播應會立即開始播放。

6. 新增節目表資料

CAF 現在支援在接收器和傳送器應用程式中顯示節目表資料，進一步支援直播內容。我們強烈建議內容供應商在接收器應用程式中加入節目元資料，以提供更優質的終端使用者體驗，尤其是電視頻道等長時間播放的直播串流。

CAF 支援在單一串流中設定多個節目的中繼資料。在 MediaMetadata 物件上設定開始時間戳記和時間長度後，接收器會根據播放器在串流中的目前位置，自動更新傳送器上顯示的中繼資料和疊加層。以下是 API 及其一般用途的範例。

// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;

在本程式碼研究室中，我們會使用範例中繼資料服務，為直播提供中繼資料。如要建立節目中繼資料清單，請建立容器。ContainerMetadata 會保留單一媒體串流的 MediaMetadata 物件清單。每個 MediaMetadata 物件都代表容器中的單一區段。當播放頭位於特定區段的界線內時，系統會自動將該區段的中繼資料複製到媒體狀態。在 receiver.js 檔案中新增下列程式碼，從我們的服務下載範例中繼資料，並將容器提供給 CAF。

/**
 *   Gets the current program guide data from the sample MetadataService. Once
 *   obtained, the guide information is added using QueueManager.
 */
async function loadGuideData() {
  const data = await MetadataService.fetchLiveMetadata();
  const containerMetadata = new cast.framework.messages.ContainerMetadata();
  containerMetadata.sections = data;

  playerManager.getQueueManager().setContainerMetadata(containerMetadata);
}

此外，在載入攔截器中新增對函式的呼叫，以載入指南資料：

loadGuideData();

儲存 receiver.js 檔案並啟動 Google Cast 工作階段。畫面上應該會顯示節目開始時間、結束時間和標題。

當播放指標在容器中移至新區段時，接收端會向所有傳送端傳送新的媒體狀態訊息，讓傳送端應用程式更新 UI。建議接收端應用程式在媒體狀態攔截器中更新容器中繼資料，繼續將節目資訊提供給傳送端應用程式。在我們的範例服務中，我們會傳回目前的節目中繼資料，以及接下來兩個節目的中繼資料。如要更新串流的中繼資料，請建立新容器，然後呼叫 setContainerMetadata，如上一個範例所示。

7. 停用搜尋

大多數視訊串流是由包含一系列視訊影格的片段組成。除非另有規定，否則 CAF 會允許使用者在這些區段中搜尋。Web Receiver 可以呼叫幾個可用的 API 來指定這項設定。

在負載攔截器中，移除 SEEK 支援的媒體指令。這會停用所有行動裝置傳送端和觸控介面的搜尋功能。在 receiver.js 中 SDK 執行個體變數的定義後方，新增下列程式碼。

// Disable seeking
playerManager.removeSupportedMediaCommands(
    cast.framework.messages.Command.SEEK, true);

如要停用由 Google 助理支援的語音搜尋指令 (例如「Ok Google，倒轉 60 秒」)，請使用搜尋攔截器。每次發出搜尋要求時，系統都會呼叫這個攔截器。如果停用 SEEK 支援的媒體指令，攔截器會拒絕搜尋要求。在 receiver.js 檔案中新增下列程式碼片段：

/**
 * A seek interceptor is called whenever CAF receives a request to seek to
 * a different location in media. This interceptor can be used to modify that
 * seek request or disable seeking completely.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
      // if the SEEK supported media command is disabled, block seeking
      if (!(playerManager.getSupportedMediaCommands() &
            cast.framework.messages.Command.SEEK)) {
        castDebugLogger.info(TAG, 'Seek blocked.');
        return null;
      }

      return seekRequestData;
    });

儲存 receiver.js 檔案並啟動 Google Cast 工作階段。你應該無法再在直播中倒轉或快轉。

8. 恭喜

您現在已瞭解如何使用最新版 Cast Receiver SDK 建立自訂接收器應用程式。

詳情請參閱「直播」開發人員指南。