為 Cast 接收器新增即時支援

1. 總覽

本程式碼研究室將說明如何建構使用 Cast Live Breaks API 的自訂 Web Receiver 應用程式。

什麼是 Google Cast？

Google Cast 可讓使用者將行動裝置上的內容投放到電視上。讓使用者能將行動裝置當做電視播放媒體的遙控器。

Google Cast SDK 可讓您擴充應用程式，輕鬆控制電視或音響系統。Cast SDK 可讓您根據 Google Cast 設計檢查清單新增必要的 UI 元件。

我們歸納了 Google Cast 設計檢查清單，目的是讓所有支援的平台都能簡單且可預測的 Cast 使用者體驗。

我們要建構什麼？

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

課程內容

• 如何在 Cast 中處理即時影片內容。
• 如何設定 Cast 支援的各種直播活動情境。
• 如何在直播中新增節目資料

軟硬體需求

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

功能

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

>「網路連線有問題嗎？」> 如果你所在地區的 Wi-Fi 網路不穩定，可以使用乙太網路轉換器連接 Chromecast 裝置，

Chromecast 或 Chromecast (支援 Google TV)

您將會如何使用這個教學課程？

僅供閱讀 閱讀並完成練習

針對建構網頁應用程式的體驗，您會給予什麼評價？

初級 中級 專業

2. 取得程式碼範例

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

下載原始碼

然後將下載的 ZIP 檔案解壓縮

> cast-videos-cast 程式碼研究室存放區包含兩個範例專案：> * app-start：您將在這個程式碼研究室中建構的起始程式碼。* 應用程式完成：完成的範例影片應用程式完整程式碼。

3. 在本機部署接收器

如要搭配投放裝置使用網路接收器，您必須將裝置代管於支援 Cast 裝置的位置。如果您已擁有支援 https 的伺服器，請略過下列步驟，並記下網址 (下一節會用到)。

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

執行伺服器

設定完畢後，請前往 app-start 並啟動伺服器。

記下代管接收器的網址。您會在下一節中用到。

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

> 沒有 Cast 開發人員帳戶嗎？> 前往 Google Cast SDK 開發人員控制台註冊帳戶，並支付註冊費。

您必須註冊應用程式，才能在 Chromecast 裝置上執行自訂接收器，就像本程式碼研究室的內建功能。註冊應用程式後，您會收到傳送應用程式 ID 供傳送者應用程式執行 API 呼叫，例如啟動接收器應用程式。

按一下「新增應用程式」

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

輸入新接收器的詳細資料，務必使用最後用來

可提供所有相關資訊記下指派給新接收端的應用程式 ID。

此外，您也必須註冊 Google Cast 裝置，這樣裝置才能在您發布前存取接收器應用程式。發布接收器應用程式後，即可供所有 Google Cast 裝置使用。基於本程式碼研究室的用途，建議您使用未發布的接收器應用程式。

按一下「新增裝置」

輸入印在 Google Cast 裝置背面的序號，然後設定一個描述性名稱。存取 Google Cast SDK 開發人員控制台時，在 Chrome 中投放畫面，也可以找到序號

接收者和裝置可能需要 5 到 15 分鐘才能進行測試。等待 5 到 15 分鐘後，您必須重新啟動投放裝置。

5. 投放簡易直播

開始本程式碼研究室前，建議您參考 即時開發人員指南，概略瞭解即時 API。

我們會使用 Cactool 啟動投放工作階段。接收端可以自動開始播放直播，

接收器由三個檔案組成，名為 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 的即時 UI。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 檔案並啟動投放工作階段。畫面上應該會顯示計畫開始時間、結束時間和標題。

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

7. 停用跳轉功能

大多數的影片串流是由包含一組視訊畫面的片段組成。除非另有指定，否則 CAF 可讓使用者在區隔中搜尋。「網路接收端」可以呼叫幾個可用的 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 檔案並啟動投放工作階段。不過，你無法再於直播中使用跳轉功能。

8. 恭喜

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

詳情請參閱《即時串流開發人員指南》。

> 想投放更多內容嗎？> 查看其他 Cast 程式碼研究室和 GitHub 範例應用程式。