1. 總覽
本程式碼研究室會說明如何將 Cast 偵錯記錄工具新增到現有的自訂 Web Receiver 應用程式。
什麼是 Google Cast？
Google Cast SDK 可讓應用程式在支援 Google Cast 的裝置上播放內容及控製播放功能。這項功能會根據 Google Cast 設計檢查清單，提供必要的 UI 元件。
我們提供了 Google Cast 設計檢查清單，讓您在所有支援平台上都能享有簡單且可預測的投放體驗。
我們要建構的是什麼？
完成本程式碼研究室後，您將取得整合 Cast 偵錯記錄工具的自訂網頁接收器。
如需詳細資訊，請參閱 Cast 偵錯記錄工具指南。
課程內容
- 如何設定 Web Receiver 開發環境。
- 如何將 Debug Logger 整合至 Cast 接收器。
軟硬體需求
- 最新的 Google Chrome 瀏覽器。
- HTTPS 代管服務，例如 Firebase 託管或 ngrok。
- Google Cast 裝置，例如已設定網際網路連線的 Chromecast 或 Android TV。
- 具備 HDMI 輸入端的電視或螢幕。
功能
- 你必須擁有舊版 Cast 體驗，並瞭解 Cast 網頁接收器的運作方式。
- 您必須先具備之前的網站開發相關知識。
- 您也需要具備先前觀看電視節目的知識 :)
您會如何使用這個教學課程？
您對於建構網路應用程式的體驗如何？
針對觀看電視的體驗，你會給予什麼評價？
2. 取得程式碼範例
您可以將所有程式碼範例下載至電腦上...
將下載的 ZIP 檔案解壓縮
3. 在本機部署接收器
如要透過 Cast 裝置使用網路接收器，你必須將網路託管於投放裝置可連結的地方。如果您已經有支援 https 的伺服器，請略過下列操作說明並記下網址，因為下一節將需要用到。
如果您沒有可用的伺服器，可以使用 Firebase 託管或 ngrok。
執行伺服器
選好服務之後，請前往 app-start 啟動您的伺服器。
記下代管接收器的網址。您將在下一節實作這項功能。
4. 在 Cast Developer Console 中註冊應用程式
您必須註冊應用程式，才能在 Chromecast 裝置上執行本程式碼研究室內建的自訂網頁接收器。註冊應用程式之後，您會收到應用程式 ID，您的應用程式傳送端應用程式必須用來執行 API 呼叫，例如啟動接收器應用程式。
按一下 [新增應用程式]。
選取 [自訂接收器]，這是我們所建構的。
輸入新接收器的詳細資料，請務必使用上一節的網址。記下新申請者獲派的申請 ID。
此外，您必須註冊 Google Cast 裝置，才能讓裝置存取接收器應用程式，然後再進行發布。接收器應用程式發布後，可供所有 Google Cast 裝置使用。在這個程式碼研究室中，建議您與未發布的接收器應用程式搭配使用。
按一下 [新增裝置]
輸入顯示在 Cast 裝置背面的序號，並輸入描述性名稱。在存取 Google Cast SDK Developer Console 時，您也可以在 Chrome 中投放螢幕，藉此找出您的序號
接收器和裝置需要 5 到 15 分鐘才能完成測試。等候 5 至 15 分鐘後，您必須重新啟動 Cast 裝置。
5. 執行範例應用程式
在等待新的 Web Receiver 準備進行測試時，讓我們看看已完成的 Web Receiver 應用程式範例。即將建構的接收器將可使用自動調整位元率串流播放媒體。
- 在瀏覽器中開啟指令與控制 (CaC) 工具。
- 使用預設的
CC1AD845接收器 ID，然後按一下SET APP ID按鈕。 - 按一下左上方的「投放」按鈕，然後選取支援 Google Cast 的裝置。
- 前往頂端的 [
LOAD MEDIA] 分頁標籤。
- 將要求類型圓形按鈕變更為
LOAD。 - 按一下
SEND REQUEST按鈕即可播放範例影片。 - 影片會從支援 Google Cast 的裝置開始播放，以顯示「預設接收端」的基本接收功能。
6. 準備起始專案
我們需要針對支援下載的應用程式提供 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 檔案包含接收器應用程式的所有使用者介面。
接收器
這個指令碼會管理接收器應用程式的所有邏輯。
常見問題
7. 與 CastDebugLogger API 整合
Cast Receiver SDK 為開發人員提供了另一種方式，可讓您使用 CastDebugLogger API 對接收器應用程式進行偵錯。
如需詳細資訊，請參閱 Cast 偵錯記錄工具指南。
初始化
將下列指令碼新增至接收器應用程式後，於 Web Receiver SDK 指令碼的 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.js 和 playerManager 的下方，取得 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. 使用偵錯重疊
投放偵錯記錄器會在接收器上提供偵錯重疊元素，以顯示自訂記錄訊息。使用 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 將個別傳送端應用程式投放到同一部裝置。
- 從寄件者應用程式載入媒體，記錄工具將顯示記錄訊息。
加入現有的 Cast 工作階段：
- 使用接收器 SDK 或傳送者 SDK 取得執行中的 Cast 工作階段 ID。從接收器端輸入以下指令，在 Chrome 遠端偵錯工具控制台中取得工作階段 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 的 Web Receiver 應用程式。
詳情請參閱 Cast 偵錯記錄工具和指令與控制 (CaC) 工具開發人員指南。