1. 總覽
本程式碼研究室將說明如何將 Cast 偵錯記錄器新增至現有的自訂網路接收器應用程式。
什麼是 Google Cast？
Google Cast SDK 可讓您的應用程式在支援 Google Cast 的裝置上播放內容及控製播放。本文會根據 Google Cast 設計檢查清單，列出必要的 UI 元件。
我們歸納了 Google Cast 設計檢查清單，目的是讓所有支援的平台都能簡單且可預測的 Cast 使用者體驗。
我們要建構什麼？
完成本程式碼研究室後，您將擁有與 Cast 偵錯記錄器整合的 Custom Web Receiver。
如需詳細資訊，請參閱 Cast 偵錯記錄程式指南。
課程內容
- 如何設定網路接收器開發環境。
- 如何將偵錯記錄器整合至 Cast 接收器。
軟硬體需求
- 最新版的 Google Chrome 瀏覽器。
- HTTPS 代管服務，例如 Firebase 託管或 ngrok。
- 一部 Google Cast 裝置，例如已設定網際網路連線的 Chromecast 或 Android TV。
- 具備 HDMI 輸入端的電視或顯示器。
功能
- 建議你使用舊版 Cast 服務，並瞭解投放網路接收器的運作方式。
- 您必須事先具備網頁開發知識。
- 並具備觀看電視的知識 :)
您將會如何使用這個教學課程？
針對建構網頁應用程式的體驗，您會給予什麼評價？
針對觀看電視的體驗，你會給予什麼評價？
2. 取得程式碼範例
您可以將所有程式碼範例下載至電腦...
然後將下載的 ZIP 檔案解壓縮
3. 在本機部署接收器
如要搭配投放裝置使用網路接收器，您必須將裝置代管於支援 Cast 裝置的位置。如果您已擁有支援 https 的伺服器，請略過下列步驟，並記下網址 (下一節會用到)。
如果沒有可以使用的伺服器，可以使用 Firebase 託管或 ngrok。
執行伺服器
設定完畢後，請前往 app-start 並啟動伺服器。
記下代管接收器的網址。您會在下一節中用到。
4. 在 Cast 開發人員控制台註冊應用程式
您必須註冊應用程式，才能在 Chromecast 裝置上執行自訂 Web Receiver (本程式碼研究室內建於此)。註冊應用程式後，您會收到傳送應用程式 ID 供傳送者應用程式執行 API 呼叫，例如啟動接收器應用程式。
按一下「新增應用程式」
選取「自訂接收端」，這就是我們正在建構的項目。
輸入新接收器的詳細資料，請務必使用上一節中的網址。記下指派給新接收端的應用程式 ID。
此外，您也必須註冊 Google Cast 裝置，這樣裝置才能在您發布前存取接收器應用程式。發布接收器應用程式後，即可供所有 Google Cast 裝置使用。基於本程式碼研究室的用途，建議您使用未發布的接收器應用程式。
按一下「新增裝置」
輸入印在 Google Cast 裝置背面的序號，然後設定一個描述性名稱。存取 Google Cast SDK 開發人員控制台時，在 Chrome 中投放畫面，也可以找到序號
接收者和裝置可能需要 5 到 15 分鐘才能進行測試。等待 5 到 15 分鐘後，您必須重新啟動投放裝置。
5. 執行範例應用程式
在我們等待新版 Web Receiver 準備進行測試的同時，來看看一個已完成的 Web Receiver 應用程式範例。我們要建構的接收器將能透過自動調整位元率串流播放媒體。
- 在瀏覽器中開啟 Command and Control (CaC) Tool。
- 使用預設的
CC1AD845接收器 ID，然後按一下「SET APP ID」按鈕。 - 按一下左上方的「投放」按鈕，然後選取支援 Google Cast 的裝置。
- 前往頂端的「
LOAD MEDIA」分頁。
- 將要求類型圓形按鈕變更為
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 偵錯記錄程式指南。
初始化
請在 Web Receiver 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 Receiver 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 偵錯記錄器會在接收器上提供偵錯疊加層，以顯示自訂記錄訊息。使用 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) 工具
總覽
Command and Control (CaC) 工具可擷取記錄並控制偵錯重疊元素。
有兩種方法可將接收器連接至 CaC 工具：
啟動新的 Cast 連線：
- 開啟 CaC 工具，設定接收器應用程式 ID，然後按一下「投放」按鈕，將內容投放到接收端。
- 將不同的寄件者應用程式投放到具有相同接收端應用程式 ID 的同一裝置。
- 從傳送者應用程式載入媒體，記錄訊息就會顯示在這項工具中。
加入現有的投放工作階段：
- 使用接收器 SDK 或寄件者 SDK 取得執行中的 Cast 工作階段 ID。在接收器端輸入以下指令，在 Chrome Remote Debugger 控制台中取得工作階段 ID：
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;
或者，您也可以從已連結的網路傳送者取得工作階段 ID，並使用以下方法：
cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();
- 在 CaC 工具中輸入工作階段 ID，然後按一下
RESUME按鈕。 - 「投放」按鈕應已連線，並開始在工具中顯示記錄訊息。
試試其他選項
接下來，我們將使用 CaC 工具查看範例接收器的記錄。
- 開啟 CaC 工具。
- 輸入範例應用程式的接收端應用程式 ID，然後按一下「
SET APP ID」按鈕。 - 按一下左上方的「投放」按鈕，然後選取支援 Google Cast 的裝置，即可開啟接收器。
- 前往頂端的「
LOAD MEDIA」分頁。
- 將要求類型圓形按鈕變更為
LOAD。 - 按一下「
SEND REQUEST」按鈕即可播放範例影片。
- 現在應該在裝置上播放範例影片了。您應該會在上述步驟中開始看到先前步驟的記錄，會顯示在工具底部的「記錄訊息」分頁中。
請嘗試探索下列功能，調查記錄並控制接收器：
- 按一下「
MEDIA INFO」或「MEDIA STATUS」分頁標籤，即可查看媒體資訊和媒體狀態。 - 按一下「
SHOW OVERLAY」按鈕，即可查看接收器上的偵錯疊加層。 - 使用
CLEAR CACHE AND STOP按鈕即可重新載入接收器應用程式，然後再次投放。
10. 恭喜
您已瞭解如何使用最新的 Cast Receiver SDK，將 Cast 偵錯記錄器新增至支援 Cast 的網路接收器應用程式。
詳情請參閱 Cast 偵錯工具和 Command and Control (CaC) 工具開發人員指南。