建立自訂網路接收器

1. 總覽

Google Cast 標誌

本程式碼研究室會說明如何建構自訂網頁接收器應用程式，在支援 Cast 的裝置上播放內容。

什麼是 Google Cast？

使用者可以透過 Google Cast，將行動裝置中的內容投放到電視上。使用者就能透過行動裝置或電腦版 Chrome 瀏覽器，遙控電視播放媒體。

Google Cast SDK 可讓應用程式控制支援 Google Cast 的裝置 (例如電視或音響系統)。Cast SDK 會根據 Google Cast 設計檢查清單，提供必要的 UI 元件。

我們提供 Google Cast 設計檢查清單，確保所有支援的平台都能提供簡單易懂的 Cast 使用者體驗。請參閱這篇文章瞭解詳情。

我們要建構什麼內容？

完成本程式碼研究室後，您將擁有一個 HTML5 應用程式，可做為專屬的自訂接收器，在支援 Cast 的裝置上顯示影片內容。

課程內容

如何設定接收器開發環境。
以 Cast 應用程式架構為基礎的支援 Cast 接收器基本概念。
如何接收投放的影片。
如何整合 Debug Logger。
如何為智慧螢幕最佳化接收器。

軟硬體需求

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

體驗

須具備先前的網頁開發知識。
你還需要具備觀看電視的相關知識 :)

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

僅閱讀

閱讀並完成練習

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

新手

中級

熟練

你對觀看電視的體驗滿意嗎？

新手

中級

熟練

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. 執行範例應用程式

Google Chrome 標誌

在等待新的接收器應用程式準備好進行測試時，讓我們看看已完成的接收器應用程式範例。我們要建構的接收器將能使用自動調整位元率串流播放媒體 (我們會使用為基於 HTTP 的動態自動調整串流 (DASH) 編碼的範例內容)。

在瀏覽器中開啟命令與控制 (CaC) 工具。

指令與控制 (CaC) 工具的「Cast Connect & Logger Controls」分頁圖片

您應該會看到我們的 CaC 工具。
使用預設的「CC1AD845」範例接收器 ID，然後按一下「Set App ID」按鈕。
按一下左上方的「投放」按鈕，然後選取 Google Cast 裝置。

這張圖片顯示「Command and Control (CaC) Tool」的「Cast Connect & Logger Controls」分頁，指出已連線至接收器應用程式

前往頂端的「載入媒體」分頁。

指令與控制 (CaC) 工具的「Load Media」(載入媒體) 分頁圖片

按一下「Load by Content」(依內容載入) 按鈕，播放範例影片。
影片會在 Google Cast 裝置上開始播放，顯示使用預設接收器時的基本接收器功能。

6. 準備啟動專案

我們需要為您下載的啟動應用程式新增 Google Cast 支援。以下是我們在本程式碼研究室中會使用的 Google Cast 術語：

傳送者應用程式在行動裝置或筆電上執行，
Google Cast 裝置上執行接收端應用程式。

現在，您可以使用慣用的文字編輯器，在入門專案的基礎上進行建構：

從下載的程式碼範例中選取 app-start 目錄。
開啟 js/receiver.js 和 index.html

請注意，在您完成本程式碼研究室時，http-server 應會擷取您所做的變更。如果沒有，請嘗試終止並重新啟動 http-server。

應用程式設計

接收器應用程式會初始化 Cast 工作階段，並待命直到收到傳送者的 LOAD 要求 (也就是播放媒體片段的指令)。

應用程式包含一個主要檢視區塊 (定義於 index.html)，以及一個名為 js/receiver.js 的 JavaScript 檔案，內含所有可讓接收器運作的邏輯。

index.html

這個 HTML 檔案會包含接收器應用程式的 UI。目前檔案是空白的，我們會在程式碼研究室中逐步新增內容。

receiver.js

這個指令碼會管理接收器應用程式的所有邏輯。目前這只是一個空白檔案，但我們會在下一節中，透過幾行程式碼將其變成功能齊全的 Cast 接收器。

7. 基本 Cast 接收器

基本 Cast 接收器會在啟動時初始化 Cast 工作階段。這是必要步驟，可通知所有已連線的傳送端應用程式，接收端已成功啟動。此外，新版 SDK 預先設定為處理自動調整位元率的串流媒體 (使用 DASH、HTTP 即時串流和 Smooth Streaming)，以及開箱即用的純 MP4 檔案。我們來試試看。

初始化

在標頭的 index.html 中新增下列程式碼：

<head>
  ...

  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
</head>

在 index.html <body> 中 <footer> loading receiver.js, 之前加入下列程式碼，為接收器 SDK 提供空間，以便顯示隨您剛新增的指令碼一併提供的預設接收器 UI。

<cast-media-player></cast-media-player>

現在，我們需要在 js/receiver.js 中初始化 SDK，包括：

取得 CastReceiverContext 的參照，這是整個 Receiver SDK 的主要進入點
儲存 PlayerManager 的參照，這個物件會處理播放作業，並提供所有掛鉤，方便您插入自己的自訂邏輯
在 CastReceiverContext 上呼叫 start()，初始化 SDK

將以下內容新增至 js/receiver.js。

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

context.start();

8. 投放「基本」影片內容

在本程式碼研究室中，請使用 CaC 工具試用全新接收器。

將網路瀏覽器設為指向指令與控制 (CaC) 工具。

指令與控制 (CaC) 工具的「Cast Connect & Logger Controls」分頁圖片

請務必在欄位中代入您先前註冊的應用程式 ID，然後按一下「設定應用程式 ID」。這會指示工具在啟動 Cast 工作階段時使用接收器。

投放媒體

如要在 Cast 裝置上播放媒體，大致需要執行下列操作：

傳送者會從 Cast SDK 建立 MediaInfo JSON 物件，模擬媒體項目。
傳送者連線至投放裝置，啟動接收端應用程式。
接收器會透過 LOAD 要求載入 MediaInfo 物件，以播放內容。
接收器會監控及追蹤媒體狀態。
傳送者會根據使用者與傳送者應用程式的互動，將播放指令傳送至接收者，藉此控制播放作業。

在第一次基本嘗試中，我們會使用可播放的資產網址 (儲存在 MediaInfo.contentUrl 中) 填入 MediaInfo。

現實生活中的傳送者會在 MediaInfo.contentId 中使用應用程式專屬的媒體 ID。接收器會使用 contentId 做為 ID，發出適當的後端 API 呼叫，以解析實際的資產網址並設為 MediaInfo.contentUrl.。接收器也會處理 DRM 授權取得或插入廣告插播資訊等工作。

我們將在下一節擴充接收器，以執行類似的操作。目前請按一下「投放」圖示，然後選取裝置來開啟接收器。

這張圖片顯示「Command and Control (CaC) Tool」的「Cast Connect & Logger Controls」分頁，指出已連線至接收器應用程式

前往「Load Media」(載入媒體) 分頁，然後按一下「Load by Content」(依內容載入) 按鈕。接收器應會開始播放範例內容。

指令與控制 (CaC) 工具的「Load Media」(載入媒體) 分頁圖片

因此，Receiver SDK 開箱即用，可處理下列事項：

初始化 Cast 工作階段
處理來自寄件者的傳入 LOAD 要求，其中包含可播放的資產
提供可在電視上顯示的基本播放器 UI。

請隨意探索 CaC 工具及其程式碼，再前往下一節。我們將擴充接收器，與簡單的範例 API 通訊，以滿足傳送端傳入的 LOAD 要求。

9. 整合外部 API

為了配合大多數開發人員在實際應用程式中與 Cast 接收器互動的方式，我們將修改接收器，以處理參照預期媒體內容的 LOAD 要求 (透過 API 金鑰)，而不是傳送可播放的資產網址。

應用程式通常會這麼做，是因為：

傳送者可能不知道內容網址。
Cast 應用程式的設計宗旨，是直接在接收器上處理驗證、其他商業邏輯或 API 呼叫。

這項功能主要是在 PlayerManager setMessageInterceptor() 方法中實作。這樣一來，您就能依類型攔截內送訊息，並在訊息傳送至 SDK 的內部訊息處理常式前進行修改。在本節中，我們將處理 LOAD 要求，並執行下列操作：

讀取傳入的 LOAD 要求及其自訂 contentId。
GET呼叫我們的 API，依 contentId 查詢可串流的資產。
使用串流的網址修改 LOAD 要求。
修改 MediaInformation 物件，設定串流類型參數。
將要求傳遞至 SDK 以進行播放，或在無法查閱要求媒體時拒絕指令。

提供的範例 API 會展示 SDK 的掛鉤，用於自訂常見的接收器工作，同時仍依賴大部分的預設體驗。

API 範例

在瀏覽器中前往 https://storage.googleapis.com/cpe-sample-media/content.json，查看我們的範例影片目錄。內容包括 png 格式的海報圖片網址，以及 DASH 和 HLS 串流。DASH 和 HLS 串流會指向儲存在片段式 MP4 容器中的解多工影片和音訊來源。

{
  "bbb": {
    "author": "The Blender Project",
    "description": "Grumpy Bunny is grumpy",
    "poster": "https://[...]/[...]/BigBuckBunny/images/screenshot1.png",
    "stream": {
      "dash": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.mpd",
      "hls": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.m3u8",
    "title": "Big Buck Bunny"
  },
  "fbb_ad": {
    "author": "Google Inc.",
    "description": "Introducing Chromecast. The easiest way to enjoy [...]",
    "poster": "https://[...]/[...]/ForBiggerBlazes/images/screenshot8.png",
    "stream": {
      "dash": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.mpd",
      "hls": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.m3u8",
    "title": "For Bigger Blazes"
  },

  [...]

}

在下一個步驟中，接收器收到 LOAD 要求後，我們會將每個項目的鍵 (例如 bbb, fbb_ad ) 對應至串流的網址。

攔截 LOAD 要求

在這個步驟中，我們會建立載入攔截器，並使用函式向代管的 JSON 檔案發出 XHR 要求。取得 JSON 檔案後，我們會剖析內容並設定中繼資料。在接下來的章節中，我們會自訂 MediaInformation 參數，指定內容類型。

在呼叫 context.start() 之前，將下列程式碼新增至 js/receiver.js 檔案。

function makeRequest (method, url) {
  return new Promise(function (resolve, reject) {
    let xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(JSON.parse(xhr.response));
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
        // Fetch content repository by requested contentId
        makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json').then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            reject();
          } else {
            // Add metadata
            let metadata = new
               cast.framework.messages.GenericMediaMetadata();
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
        });
      });
    });

下一節將說明如何為 DASH 內容設定載入要求的 media 屬性。

使用 Sample API DASH Content

我們已準備好載入攔截器，現在要向接收端指定內容類型。這項資訊會提供主播放清單網址和串流 MIME 類型給接收器。在攔截器的 LOAD Promise() 中，將下列程式碼新增至 js/receiver.js 檔案：

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            ...
          }
        });
      });
    });

完成這個步驟後，即可繼續進行「測試」部分，嘗試載入 DASH 內容。如要改用 HLS 內容測試載入作業，請參閱下一個步驟。

使用 Sample API HLS 內容

範例 API 包含 HLS 和 DASH 內容。除了像上一個步驟一樣設定 contentType 之外，載入要求還需要一些額外屬性，才能使用範例 API 的 HLS 網址。當接收器設為播放 HLS 串流時，預期的預設容器類型為傳輸串流 (TS)。因此，如果只修改 contentUrl 屬性，接收器會嘗試以 TS 格式開啟範例 MP4 串流。在載入要求中，應使用其他屬性修改 MediaInformation 物件，讓接收器知道內容類型為 MP4，而非 TS。在載入攔截器中，將下列程式碼新增至 js/receiver.js 檔案，修改 contentUrl 和 contentType 屬性。此外，請新增 HlsSegmentFormat 和 HlsVideoSegmentFormat 屬性。

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.hls;
            request.media.contentType = 'application/x-mpegurl';
            request.media.hlsSegmentFormat = cast.framework.messages.HlsSegmentFormat.FMP4;
            request.media.hlsVideoSegmentFormat = cast.framework.messages.HlsVideoSegmentFormat.FMP4;
            ...
          }
        });
      });
    });

測試

再次開啟指令與控制 (CaC) 工具，並將應用程式 ID 設為接收端的應用程式 ID。使用「投放」按鈕選取裝置。

前往「載入媒體」分頁。這次請刪除「依內容載入」按鈕旁邊「內容網址」欄位中的文字，強制應用程式只傳送包含媒體contentId參照的 LOAD 要求。

指令與控制 (CaC) 工具的「Load Media」(載入媒體) 分頁圖片

假設您對接收器所做的修改一切正常，攔截器應會負責將 MediaInfo 物件塑造成 SDK 可以在畫面上播放的內容。

按一下「Load by Content」按鈕，確認媒體是否正常播放。您可以在 content.json 檔案中將內容 ID 變更為其他 ID。

10. 為智慧螢幕進行最佳化調整

智慧螢幕是具備觸控功能的裝置，可讓接收器應用程式支援觸控式控制項。

本節說明如何在智慧螢幕上啟動接收器應用程式時進行最佳化，以及如何自訂播放器控制項。

存取 UI 控制項

智慧螢幕的 UI 控制項物件可透過 cast.framework.ui.Controls.GetInstance() 存取。在 context.start() 上方的 js/receiver.js 檔案中新增下列程式碼：

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();

context.start();

如果未使用 <cast-media-player> 元素，則必須在 CastReceiverOptions 中設定 touchScreenOptimizedApp。在本程式碼研究室中，我們使用的是 <cast-media-player> 元素。

context.start({ touchScreenOptimizedApp: true });

系統會根據 MetadataType 和 MediaStatus.supportedMediaCommands，為每個位置指派預設控制按鈕。

影片控制選項

如果是 MetadataType.MOVIE、MetadataType.TV_SHOW 和 MetadataType.GENERIC，智慧螢幕的 UI 控制項物件會顯示如下方範例。

圖片：影片正在播放，上方疊加使用者介面控制項

--playback-logo-image
MediaMetadata.subtitle
MediaMetadata.title
MediaStatus.currentTime
MediaInformation.duration
ControlsSlot.SLOT_SECONDARY_1：ControlsButton.QUEUE_PREV
ControlsSlot.SLOT_PRIMARY_1：ControlsButton.SEEK_BACKWARD_30
PLAY/PAUSE
ControlsSlot.SLOT_PRIMARY_2：ControlsButton.SEEK_FORWARD_30
ControlsSlot.SLOT_SECONDARY_2：ControlsButton.QUEUE_NEXT

音訊控制

如果是 MetadataType.MUSIC_TRACK，智慧螢幕的 UI 控制項物件會顯示如下：

圖片：正在播放音樂，上方疊加 UI 控制選項

--playback-logo-image
MusicTrackMediaMetadata.albumName
MusicTrackMediaMetadata.title
MusicTrackMediaMetadata.albumArtist
MusicTrackMediaMetadata.images[0]
MediaStatus.currentTime
MediaInformation.duration
ControlsSlot.SLOT_SECONDARY_1：ControlsButton.NO_BUTTON
ControlsSlot.SLOT_PRIMARY_1：ControlsButton.QUEUE_PREV
PLAY/PAUSE
ControlsSlot.SLOT_PRIMARY_2：ControlsButton.QUEUE_NEXT
ControlsSlot.SLOT_SECONDARY_2：ControlsButton.NO_BUTTON

更新支援的媒體指令

UI 控制項物件也會根據 MediaStatus.supportedMediaCommands 判斷是否顯示 ControlsButton。

當 supportedMediaCommands 的值等於 ALL_BASIC_MEDIA 時，預設控制項版面配置會如下所示：

媒體播放器控制項的圖片：進度列、「播放」按鈕、「快轉」和「倒轉」按鈕已啟用

當 supportedMediaCommands 的值等於 ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT 時，預設控制項版面配置會如下所示：

媒體播放器控制項的圖片：進度列、「播放」按鈕、「快轉」和「倒轉」按鈕，以及「將上一個加入佇列」和「將下一個加入佇列」按鈕已啟用

當 supportedMediaCommands 的值等於 PAUSE | QUEUE_PREV | QUEUE_NEXT 時，預設控制項版面配置會如下所示：

媒體播放器控制項的圖片：進度列、「播放」按鈕，以及已啟用的「將上一首加入佇列」和「將下一首加入佇列」按鈕

如有文字軌，隱藏式輔助字幕按鈕一律會顯示在 SLOT_1。

媒體播放器控制項的圖片：進度列、「播放」按鈕、「快轉」和「倒轉」按鈕、「將上一個加入佇列」和「將下一個加入佇列」按鈕，以及已啟用的「隱藏式輔助字幕」按鈕

如要在啟動接收器環境後動態變更 supportedMediaCommands 的值，可以呼叫 PlayerManager.setSupportedMediaCommands 覆寫該值。此外，您可以使用 addSupportedMediaCommands 新增指令，或使用 removeSupportedMediaCommands 移除現有指令。

自訂控制按鈕

您可以使用 PlayerDataBinder 自訂控制項。在 js/receiver.js 檔案的 touchControls 下方新增下列程式碼，設定控制項的第一個位置：

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    // Clear default buttons and re-assign
    touchControls.clearDefaultSlotAssignments();
    touchControls.assignButton(
      cast.framework.ui.ControlsSlot.SLOT_PRIMARY_1,
      cast.framework.ui.ControlsButton.SEEK_BACKWARD_30
    );
  });

context.start();

11. 在智慧螢幕上實作媒體瀏覽功能

媒體瀏覽是 CAF 接收器功能，可讓使用者在觸控裝置上探索其他內容。如要實作這項功能，請使用 PlayerDataBinder 設定 BrowseContent UI。然後根據要顯示的內容填入 BrowseItems。

BrowseContent

以下是 BrowseContent UI 及其屬性的範例：

BrowseContent 使用者介面圖片，顯示兩個影片縮圖和第三個影片的部分縮圖

BrowseContent.title
BrowseContent.items

顯示比例

使用 targetAspectRatio property 為圖片素材資源選取最佳顯示比例。CAF Receiver SDK 支援三種長寬比：SQUARE_1_TO_1、PORTRAIT_2_TO_3、LANDSCAPE_16_TO_9。

BrowseItem

使用 BrowseItem 顯示每個項目的標題、副標題、時間長度和圖片：

BrowseContent 使用者介面圖片，顯示兩個影片縮圖和第三個影片的部分縮圖

BrowseItem.image
BrowseItem.duration
BrowseItem.title
BrowseItem.subtitle

設定媒體瀏覽資料

您可以呼叫 setBrowseContent，提供媒體內容清單供瀏覽。在 playerDataBinder 下方和 MEDIA_CHANGED 事件監聽器中，將下列程式碼新增至 js/receiver.js 檔案，即可設定瀏覽項目，並將標題設為「即將播放」。

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

...

let browseItems = getBrowseItems();

function getBrowseItems() {
  let browseItems = [];
  makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
  .then(function (data) {
    for (let key in data) {
      let item = new cast.framework.ui.BrowseItem();
      item.entity = key;
      item.title = data[key].title;
      item.subtitle = data[key].description;
      item.image = new cast.framework.messages.Image(data[key].poster);
      item.imageType = cast.framework.ui.BrowseImageType.MOVIE;
      browseItems.push(item);
    }
  });
  return browseItems;
}

let browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = browseItems;
browseContent.targetAspectRatio = cast.framework.ui.BrowseImageAspectRatio.LANDSCAPE_16_TO_9;

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    ....

    // Media browse
    touchControls.setBrowseContent(browseContent);
  });

點選媒體瀏覽項目會觸發 LOAD 攔截器。在 LOAD 攔截器中新增下列程式碼，將 request.media.contentId 對應至媒體瀏覽項目的 request.media.entity：

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      ...

      // Map contentId to entity
      if (request.media && request.media.entity) {
        request.media.contentId = request.media.entity;
      }

      return new Promise((resolve, reject) => {
            ...
        });
    });

您也可以將 BrowseContent 物件設為 null，移除媒體瀏覽使用者介面。

12. 偵錯接收器應用程式

開發人員也可以使用 CastDebugLogger API 和隨附的 Command and Control (CaC) Tool 擷取記錄，輕鬆偵錯接收器應用程式。

初始化

如要整合 API，請在 index.html 檔案中新增 CastDebugLogger 來源指令碼。來源應在 Cast 接收器 SDK 宣告後的 <head> 標記中宣告。

<head>
  ...
  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <!-- Cast Debug Logger -->
  <script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
</head>

在檔案頂端的 js/receiver.js 中，於 playerManager 下方新增下列程式碼，以擷取 CastDebugLogger 例項並啟用記錄器：

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const LOG_TAG = 'MyAPP.LOG';

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);
  }
});

啟用偵錯記錄器後，接收器會顯示 DEBUG MODE 的重疊畫面。

圖片：影片正在播放，畫面左上角以紅色背景顯示「DEBUG MODE」訊息

記錄播放器事件

使用 CastDebugLogger 即可輕鬆記錄 CAF Receiver SDK 觸發的播放器事件，並使用不同的記錄器層級記錄事件資料。loggerLevelByEvents 設定會使用 cast.framework.events.EventType 和 cast.framework.events.category 指定要記錄的事件。

在 castDebugLogger 宣告下方新增下列程式碼，以便在觸發播放器 CORE 事件或廣播 mediaStatus 變更時記錄：

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);
  }
});

// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}

記錄訊息和自訂標記

CastDebugLogger API 可讓您建立記錄訊息，並以不同顏色顯示在接收器偵錯疊加層。以下列出可用的記錄方法，並依優先順序由高到低排序：

castDebugLogger.error(custom_tag, message);
castDebugLogger.warn(custom_tag, message);
castDebugLogger.info(custom_tag, message);
castDebugLogger.debug(custom_tag, message);

關於每個記錄方法，第一個參數都是自訂標記。可以是任何您認為有意義的識別字串。CastDebugLogger 會使用標記篩選記錄。標記的使用方式詳見下文。第二個參數是記錄訊息。

如要實際顯示記錄，請將記錄新增至 LOAD 攔截器。

playerManager.setMessageInterceptor(
  cast.framework.messages.MessageType.LOAD,
  request => {
    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request');

    // Map contentId to entity
    if (request.media && request.media.entity) {
      request.media.contentId = request.media.entity;
    }

    return new Promise((resolve, reject) => {
      // Fetch content repository by requested contentId
      makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
        .then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            castDebugLogger.error(LOG_TAG, 'Content not found');
            reject();
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            castDebugLogger.warn(LOG_TAG, 'Playable URL:', request.media.contentUrl);

            // Add metadata
            let metadata = new cast.framework.messages.MovieMediaMetadata();
            metadata.metadataType = cast.framework.messages.MetadataType.MOVIE;
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
      });
    });
  });

您可以在每個自訂標記的 loggerLevelByTags 中設定記錄層級，控管要在偵錯疊加層中顯示哪些訊息。舉例來說，啟用記錄層級為 cast.framework.LoggerLevel.DEBUG 的自訂標記，會顯示以錯誤、警告、資訊和偵錯記錄訊息新增的所有訊息。啟用 WARNING 層級的自訂標記後，系統只會顯示錯誤和警告記錄訊息。

loggerLevelByTags 設定為選用項目。如果沒有為記錄器層級設定自訂標記，所有記錄訊息都會顯示在偵錯重疊畫面中。

在 CORE 事件記錄器下方新增下列程式碼：

// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}

// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
    [LOG_TAG]: cast.framework.LoggerLevel.DEBUG,
};

偵錯重疊畫面

Cast Debug Logger 會在接收器上提供偵錯疊加畫面，在 Cast 裝置上顯示自訂記錄訊息。使用 showDebugLogs 切換偵錯重疊畫面，並使用 clearDebugLogs 清除重疊畫面上的記錄訊息。

新增下列程式碼，即可在接收器上預覽偵錯重疊畫面。

context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      // Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
      castDebugLogger.setEnabled(true);

      // Show debug overlay
      castDebugLogger.showDebugLogs(true);

      // Clear log messages on debug overlay
      castDebugLogger.clearDebugLogs();
  }
});

圖片：顯示偵錯重疊畫面，影片影格上方半透明背景上的偵錯記錄訊息清單

13. 恭喜

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

詳情請參閱 Web Receiver 開發人員指南。

建立自訂網路接收器 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

1. 總覽

什麼是 Google Cast？

我們要建構什麼內容？

課程內容

軟硬體需求

體驗

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

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

你對觀看電視的體驗滿意嗎？

2. 取得程式碼範例

3. 在本機部署接收器

執行伺服器

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

5. 執行範例應用程式

6. 準備啟動專案

應用程式設計

index.html

receiver.js

7. 基本 Cast 接收器

初始化

8. 投放「基本」影片內容

投放媒體

9. 整合外部 API

API 範例

攔截 LOAD 要求

使用 Sample API DASH Content

使用 Sample API HLS 內容

測試

10. 為智慧螢幕進行最佳化調整

存取 UI 控制項

影片控制選項

音訊控制

更新支援的媒體指令

自訂控制按鈕

11. 在智慧螢幕上實作媒體瀏覽功能

BrowseContent

顯示比例

BrowseItem

設定媒體瀏覽資料

12. 偵錯接收器應用程式

初始化

記錄播放器事件

記錄訊息和自訂標記

偵錯重疊畫面

13. 恭喜

建立自訂網路接收器