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

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

1. 總覽

Google Cast 標誌

本程式碼研究室會說明如何將 Cast 偵錯記錄工具新增至現有的自訂 Web Receiver 應用程式。

什麼是 Google Cast?

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

提供 Google Cast 設計檢查清單,以便在所有支援的平台上提供簡單且可預測的 Cast 使用者體驗。

我們要建構的是什麼?

完成本程式碼研究室後,您將取得整合 Cast Debug Loger 的自訂 Web Receiver

如需詳細資訊,請參閱 Cast 偵錯記錄工具指南

課程內容

  • 如何設定 Web Receiver 開發環境。
  • 如何將 Debug Loger 整合至 Cast 接收器。

軟硬體需求

  • 最新的 Google Chrome 瀏覽器。
  • node.js、npm、http-serverngrok 模組
  • Google Cast 裝置,例如已設定網路連線的 ChromecastAndroid TV
  • 具備 HDMI 輸入端的電視或螢幕。

功能

  • 你必須擁有舊版 Cast 體驗,並瞭解 Cast Web Receiver 的運作方式。
  • 您必須先具備之前的網站開發知識。
  • 您也需要具備先前觀看電視節目的知識 :)

您如何使用這個教學課程?

唯讀閱讀 閱讀並完成練習

你對建構網頁應用程式體驗的體驗如何?

新手 中級 專業知識

針對觀看電視的體驗,你會給予什麼評價?

新手 中級 專業知識

2. 取得程式碼範例

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

將下載的 ZIP 檔案解壓縮。

3. 在本機部署接收器

如要透過投放裝置使用網路接收器,你的 Cast 裝置必須託管該應用程式。如果您已經有支援 HTTPS 的伺服器,請略過下列操作說明,只要記住網址即可。在下一個部分中,您將需要這麼做。

如果您沒有可用的伺服器,請勿煩惱。您可以安裝 node.js (http-serverngrok 節點模組),或是使用 Firebase 託管等服務託管專案。

npm install -g http-server
npm install -g ngrok

執行伺服器

如果你使用 http-server,請前往主控台並執行以下操作:

cd app-done
http-server

畫面應如下所示:

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://172.19.17.192:8080
Hit CTRL-C to stop the server

請注意使用的本機通訊埠,然後在新的終端機中執行下列操作,以使用 ngrok 透過 HTTPS 公開本機接收器:

ngrok http 8080

這項操作會將 ngrok 通道設為本機 HTTP 伺服器,以指派給全球的 HTTPS 安全端點,供您在下一個步驟中使用 (https://116ec943.eu.ngrok.io):

ngrok by @inconshreveable                                                                                                                                                                                                                                     (Ctrl+C to quit)

Session Status         online
Version                2.2.4
Web Interface          http://127.0.0.1:8080
Forwarding             http://116ec943.eu.ngrok.io -> localhost:8080
Forwarding             https://116ec943.eu.ngrok.io -> localhost:8080

在程式碼研究室期間,您應讓 ngrokhttp-server 保持執行。您所做的本機變更會立即生效。

4. 在 Cast Developer Console 中註冊應用程式

您必須註冊應用程式,才能在 Chromecast 裝置上執行本程式碼研究室內建的自訂 Web Receiver。註冊應用程式後,您會收到應用程式 ID 傳送的應用程式 ID,以便啟動 API 呼叫 (例如啟動接收器應用程式)。

Cast Developer Console 圖片,以方框特別標出「' New Application'」按鈕

按一下「新增應用程式」

'新增接收端應用程式'畫面,以 '自訂接收器'選項醒目顯示

選取「自訂接收器」,也就是我們正在建構的內容。

'Receiver 應用程式網址'「#39;New Custom Receiver'」欄位中的圖片填寫中

輸入新接收端的詳細資料,請務必使用上一節的網址。記下指派給新接收者的申請 ID

你必須先註冊 Google Cast 裝置,才能讓裝置存取接收器應用程式。發布應用程式後,該應用程式將適用於所有 Google Cast 裝置。在這個程式碼研究室中,建議您與未發布的接收端應用程式搭配使用。

Google Cast SDK Developer Console 的圖片,以方框特別標出「' Add Device」' 按鈕

按一下「新增裝置」。

「新增投放接收裝置」'「對話方塊」圖片

輸入顯示在投放裝置背面的序號,並輸入描述性名稱。在存取 Google Cast SDK Developer Console 時,您也可以在 Chrome 中投放螢幕,藉此找出序號

接收器和裝置需要 5 到 15 分鐘才能完成測試。等候 5 至 15 分鐘後,你必須重新啟動投放裝置。

5. 執行範例應用程式

Google Chrome 標誌

在我們等待新的 Web Receiver 準備完成測試的期間,不妨看看完成的 Web Receiver 應用程式範例。即將建構的接收器將可使用自動調整位元率串流功能播放媒體。

  1. 在瀏覽器中開啟 Command and Control (CaC) 工具

The#39;Cast Connect & Logger Controls' Command and Control (CaC) 工具分頁的圖片

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

'Cast Connect 展示工具記錄器控制項'指令與控制 (CaC) 工具分頁指示已連接至接收器應用程式

  1. 前往頂端的 [LOAD MEDIA] 分頁標籤。

'Load Media' 指令與控制 (CaC) 工具分頁的圖片

  1. 將要求類型圓形按鈕變更為 LOAD
  2. 按一下 SEND REQUEST 按鈕即可播放範例影片。
  3. 影片會從支援 Google Cast 的裝置開始播放,以顯示使用預設接收器的基本接收器功能。

6. 準備起始專案

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

  • 寄件者應用程式位於行動裝置或筆記型電腦上執行
  • 接收端應用程式會在 Google Cast 或 Android TV 裝置上執行。

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

  1. 從下載的程式碼範例中選取 資料夾圖示app-start 目錄。
  2. 開啟 js/receiver.jsindex.html

請注意,當您逐步完成本程式碼研究室時,http-server 應挑選您進行的變更。如果沒有,請嘗試停止並重新啟動 http-server

應用程式設計

接收端應用程式會初始化 Cast 工作階段,並待命中,直到傳送者傳來 LOAD 要求 (例如播放媒體的指令) 為止。

此應用程式包含一個主要檢視畫面,定義於 index.html 中,以及一個名為 js/receiver.js 的 JavaScript 檔案,此檔案內含所有邏輯,讓接收器得以正常運作。

index.html

這個 HTML 檔案包含接收器應用程式的所有 UI。

接收器.js

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

常見問題

7. 與 CastDebugLogger API 整合

Cast Receiver SDK 提供開發人員另一種選擇,使用 CastDebugLogger API 對接收器應用程式進行偵錯。

如需詳細資訊,請參閱 Cast 偵錯記錄工具指南

初始化

將下列指令碼加進接收器應用程式應用程式的 <head> 標記中,緊接在 index.html 中:

<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.jsplayerManager 下方,取得 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

含有「&BU39」偵錯影片的圖片

記錄播放器事件

使用 CastDebugLogger 即可輕鬆記錄 Cast Web Receiver SDK 觸發的玩家事件,並使用不同的記錄器層級記錄事件資料。loggerLevelByEvents 設定需要 cast.framework.events.EventTypecast.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. 使用偵錯重疊元素

投放偵錯記錄器會在接收端提供偵錯重疊元素,以顯示自訂記錄訊息。使用 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 連線:

  1. 開啟 CaC 工具,設定接收端應用程式 ID,然後按一下「投放」按鈕,即可將內容投放到接收器。
  2. 使用相同接收端應用程式 ID 將個別傳送端應用程式投放到同一部裝置。
  3. 從寄件者應用程式載入媒體,記錄工具將顯示記錄訊息。

加入現有的 Cast 工作階段:

  1. 使用接收器 SDK 或傳送者 SDK 取得執行中的 Cast 工作階段 ID。在接收端輸入以下指令,即可在 Chrome Remote Debugger 控制台中取得工作階段 ID:
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

你也可以從連線的網路寄件者取得工作階段 ID,方法如下:

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

&#39;Cast Connect 與「記錄器控制項」&#39;「作用是指令與控制 (CaC)」工具的分頁以繼續工作階段

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

試試功能

接下來,我們會使用 CaC 工具查看範例接收器的記錄檔。

  1. 開啟 CaC 工具

The#39;Cast Connect & Logger Controls&#39; Command and Control (CaC) 工具分頁的圖片

  1. 輸入範例應用程式的接收器應用程式 ID,然後按一下 SET APP ID 按鈕。
  2. 按一下左上方的「投放」按鈕,然後選取支援 Google Cast 的裝置來開啟接收器。

&#39;Cast Connect 展示工具記錄器控制項&#39;指令與控制 (CaC) 工具分頁指示已連接至接收器應用程式

  1. 前往頂端的 [LOAD MEDIA] 分頁標籤。

&#39;Load Media&#39; 指令與控制 (CaC) 工具分頁的圖片

  1. 將要求類型圓形按鈕變更為 LOAD
  2. 按一下 SEND REQUEST 按鈕即可播放範例影片。

&#39;Cast Connect 與「記錄器控制項」&#39;「指令與控制 (CaC)」工具的分頁,底部訊息會填滿底部窗格

  1. 現在裝置上應會播放範例影片。您一開始應該已開始在記錄的「記錄檔訊息」分頁中看到上述步驟中的記錄。

請嘗試下列功能來調查記錄並控制接收器:

  • 按一下 [MEDIA INFO] 或 [MEDIA STATUS] 分頁標籤即可查看媒體資訊和媒體狀態。
  • 按一下 SHOW OVERLAY 按鈕即可查看接收器的偵錯重疊元素。
  • 使用 CLEAR CACHE AND STOP 按鈕重新載入接收器應用程式,然後重新投放。

10. 恭喜

現在你已瞭解如何使用最新的 Cast Receiver SDK,將投放偵錯記錄器新增至支援 Cast 的 Web Receiver 應用程式。

詳情請參閱投放偵錯記錄器指令與控制 (CaC) 工具開發人員指南。