本頁面由 Cloud Translation API 翻譯而成。

對 Cast 接收器應用程式進行偵錯

1. 總覽

Google Cast 標誌

本程式碼研究室將說明如何將 Cast Debug Logger 新增至現有的自訂網路接收器應用程式。

什麼是 Google Cast？

Google Cast SDK 可讓應用程式在支援 Google Cast 的裝置上播放內容及控製播放。根據 Google Cast 設計檢查清單，為您提供必要的 UI 元件。

我們提供了 Google Cast 設計檢查清單，大幅簡化所有支援平台的 Cast 使用者體驗，並讓使用者享有簡單預測。

我們要建構什麼？

完成這個程式碼研究室後，您就能使用與 Cast Debug Logger 整合的自訂網路接收器。

詳情請參閱 Cast 偵錯記錄器指南。

課程內容

如何設定 Web Receiver 開發環境。
如何將偵錯記錄器整合至 Cast Receiver。

軟硬體需求

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

體驗

你必須具有投放功能，並瞭解 Cast Web 接收器的運作方式。
您必須具有網站開發背景知識。
你也需要事先瞭解看電視的知識 :)

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

僅供閱讀

閱讀並完成練習

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

新手

中級

還算容易

你對觀看電視的體驗有什麼評價？

新手

中級

還算容易

2. 取得程式碼範例

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

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

3. 在本機部署接收器

如要搭配投放裝置使用網路接收器，請將裝置代管在投放裝置的位置。如果您已擁有支援 https 的伺服器，請略過下列指示並記下網址，因為在下一節中會用到。

如果你沒有可用伺服器，可改用 Firebase 代管或 ngrok。

執行伺服器

設定好您選擇的服務後，請前往「app-start」並啟動伺服器。

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

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

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

Cast 開發人員控制台顯示「新增應用程式」的圖片醒目顯示按鈕

按一下「新增應用程式」

「新接收端應用程式」的圖片顯示「Custom Receiver」已醒目顯示選項

選取 [自訂接收器]，也就是我們要建構的接收器。

「接收端應用程式網址」的圖片欄位的值對話方塊填滿

輸入新接收端的詳細資料。請務必使用最後部分的網址。請記下指派給全新接收器的應用程式 ID。

此外，你必須註冊 Google Cast 裝置，以便在發布前存取接收器應用程式。接收器應用程式發布後，所有的 Google Cast 裝置皆可使用該應用程式。就本程式碼研究室而言，建議您使用尚未發布的接收器應用程式。

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

按一下「新增裝置」

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

輸入印在投放裝置背面的序號，並輸入描述性名稱。在 Chrome 中存取 Google Cast SDK 開發人員控制台時，您也可以投放畫面來找出序號

接收方和裝置需要 5 到 15 分鐘的時間才能進行測試。等待 5 到 15 分鐘後，你必須重新啟動投放裝置。

5. 執行範例應用程式

Google Chrome 標誌

等待新版 Web Receiver 處於測試狀態的期間，現在就來看看已完成的 Web Receiver 應用程式的樣子。我們要建立的接收器將能透過自動調整位元率串流播放媒體。

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

「Cast Connect &」畫面的圖片Logger 控制項命令與控制 (CaC) 工具的標籤

使用預設的 CC1AD845 接收器 ID，然後按一下 SET APP ID 按鈕。
按一下左上方的「投放」按鈕，然後選取支援 Google Cast 的裝置。

「Cast Connect &」畫面的圖片Logger 控制項命令與控制 (CaC) 工具的分頁，表示其已連線至接收端應用程式

前往頂端的「LOAD MEDIA」分頁。

「Load Media」的圖片命令與控制 (CaC) 工具的標籤

將要求類型圓形按鈕變更為 LOAD。
按一下 SEND REQUEST 按鈕即可播放範例影片。
影片會在支援 Google Cast 的裝置上開始播放，並顯示透過預設接收器呈現的基本接收器功能。

6. 準備 start 專案

系統會在您下載的啟動應用程式中新增 Google Cast 支援功能。以下是本程式碼研究室將使用的 Google Cast 術語：

寄件者應用程式是在行動裝置或筆記型電腦上執行
接收器應用程式可以在 Google Cast 或 Android TV 裝置上執行。

現在，您可以使用喜愛的文字編輯器，在範例專案上進行建構：

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

請注意，在執行本程式碼研究室的過程中，http-server 應擷取您的變更。如果沒有，請嘗試停止並重新啟動 http-server。

應用程式設計

接收端應用程式會初始化投放工作階段，並在傳送端收到 LOAD 要求 (例如播放媒體的指令) 之前，待機執行。

應用程式包含一個在 index.html 中定義的主要檢視畫面，以及一個稱為 js/receiver.js 的 JavaScript 檔案，該檔案包含使接收端正常運作的所有邏輯。

index.html

這個 HTML 檔案包含接收端應用程式的所有使用者介面。

receiver.js

這個指令碼會管理接收器應用程式的所有邏輯。

常見問題

7. 與 CastDebugLogger API 整合

Cast Receiver SDK 可讓開發人員使用 CastDebugLogger API 輕鬆對接收器應用程式進行偵錯。

詳情請參閱 Cast 偵錯記錄器指南。

初始化

在網路接收端 SDK 指令碼後方的 index.html 中，將下列指令碼加入接收器應用程式的 <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>

在檔案頂端和 playerManager 下方的 js/receiver.js 中，取得 CastDebugLogger 例項並在 READY 事件監聽器中啟用記錄器：

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 的重疊元素。

影片播放時使用「偵錯模式」的圖片訊息顯示在外框左上角的紅色背景上

記錄播放器事件

使用 CastDebugLogger 即可輕鬆記錄由 Cast Web 接收器 SDK 觸發的玩家事件，並使用不同記錄器層級記錄事件資料。loggerLevelByEvents 設定使用 cast.framework.events.EventType 和 cast.framework.events.category 來指定要記錄的事件。

將以下內容新增到 READY 事件監聽器下方，以在系統觸發玩家 CORE 事件或播送 mediaStatus 變更時記錄：

...

// 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);

每一個記錄方法的第一個參數都應該是自訂標記，第二個參數則是記錄訊息。標記可以是任何您認為有幫助的字串。

如要顯示記錄的實際運作情形，請將記錄新增至 LOAD 攔截器。

playerManager.setMessageInterceptor(cast.framework.messages.MessageType.LOAD,
      loadRequestData => {
    // Listed in order from highest to lowest priority.
    castDebugLogger.error(LOG_TAG, 'Test error log');

    castDebugLogger.warn(LOG_TAG, 'Test warn log');

    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request', loadRequestData);

    castDebugLogger.debug(LOG_TAG, 'Test debug log');

    return loadRequestData;
  }
);

只要在 loggerLevelByTags 中設定每個自訂標記的記錄層級，即可控制要顯示在偵錯疊加畫面的訊息。舉例來說，啟用記錄層級 cast.framework.LoggerLevel.DEBUG 的自訂標記時，會顯示所有加入的訊息，以及錯誤、警告、資訊和偵錯記錄訊息。另一個例子是，啟用含有 WARNING 層級的自訂標記時，系統只會顯示錯誤，以及警告記錄訊息。

loggerLevelByTags 設定為選用項目。如果沒有針對記錄器層級設定自訂標記，偵錯疊加畫面將顯示所有記錄訊息。

請在 loggerLevelByEvents 呼叫下方新增以下內容：

...

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

...

8. 使用偵錯疊加層

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

將以下內容新增至 READY 事件監聽器，即可在接收器上預覽偵錯疊加層：

// 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);

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

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

顯示偵錯重疊圖片的圖片，這是一個半透明背景的偵錯記錄訊息清單，位於影片影格上方

9. 使用命令與控制 (CaC) 工具

總覽

命令與控制 (CaC) 工具擷取您的記錄檔，並控制偵錯疊加層。

你可以透過兩種方式將接收器連線至 CaC 工具：

開始新的 Cast 連線：

開啟 CaC 工具並設定接收器應用程式 ID，然後按一下「投放」按鈕即可投放到接收器。
將另一個「傳送者」應用程式投放到具有相同接收端應用程式 ID 的同一部裝置。
從傳送者應用程式載入媒體，記錄訊息就會顯示在工具中。

加入現有的投放工作階段：

使用接收器 SDK 或傳送方 SDK 取得執行中的投放工作階段 ID。在接收端端輸入以下指令，在 Chrome 遠端偵錯工具控制台中取得工作階段 ID：

cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

或者，您也可以從已連結的網路傳送端取得工作階段 ID，方法如下：

cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();

「Cast Connect &」畫面的圖片Logger 控制項以便繼續執行工作階段

在 CaC 工具中輸入工作階段 ID，然後按一下 RESUME 按鈕。
「投放」按鈕應已連線，並開始在工具中顯示記錄訊息。

10. 恭喜

您現已瞭解如何使用最新的 Cast Receiver SDK，將 Cast 偵錯記錄器新增至支援 Cast 的網路接收端應用程式。

詳情請參閱 Cast 偵錯記錄器和 Command and Control (CaC) 工具開發人員指南。