1. 概览
在此 Codelab 中，您将学习如何将 Cast 调试日志记录器添加到现有的自定义 Web 接收器应用中。
什么是 Google Cast？
借助 Google Cast SDK，您的应用可在支持 Google Cast 的设备上播放内容并控制播放。它为您提供了根据 Google Cast 设计核对清单而必需的界面组件。
Google Cast 设计核对清单用于在所有支持的平台上实现简单、可预测的 Cast 用户体验。
构建目标
完成此 Codelab 后，您将拥有一个与 Cast 调试日志记录器集成的自定义 Web 接收器。
如需了解详情，请参阅 Cast 调试日志记录器指南。
学习内容
- 如何为 Web Receiver 开发设置环境。
- 如何将调试日志记录器集成到 Cast 接收器。
所需条件
- 最新版本的 Google Chrome 浏览器。
- HTTPS 托管服务，例如 Firebase Hosting 或 ngrok。
- 具有互联网访问权限的 Chromecast 或 Android TV 等 Google Cast 设备。
- 一台带 HDMI 输入端口的电视或显示器。
体验
- 您应该已使用过 Cast 体验，并了解 Cast 网络接收器的工作原理。
- 您需要具备网络开发知识。
- 您还需要有观看电视的经验 :)
您打算如何使用本教程？
您如何评价自己在构建 Web 应用方面的经验水平？
您如何评价自己在观看电视方面的经验水平？
2. 获取示例代码
您可以将所有示例代码下载到您的计算机…
然后解压下载的 zip 文件。
3. 在本地部署接收器
若要将网络接收器与 Cast 设备搭配使用，需要将其托管在 Cast 设备可以访问的位置。如果您已有支持 https 的服务器，请跳过以下说明并记下该网址，因为下一部分需要用到该网址。
如果您没有可供使用的服务器，则可以使用 Firebase Hosting 或 ngrok。
运行服务器
设置完您所选的服务后，请转到 app-start 并启动您的服务器。
记下托管接收器的网址。您将在下一部分中使用它。
4. 在 Cast 开发者控制台中注册应用
您必须注册应用，才能在 Chromecast 设备上运行自定义的 Web 接收器（如本 Codelab 中所构建）。注册您的应用后，您会收到一个应用 ID，发送者的应用必须使用该 ID 来执行 API 调用，例如启动接收器应用。
点击“添加新应用”
选择“Custom Receiver”（自定义接收器），这就是我们正在构建的应用。
输入新接收器的详细信息，请务必使用最后一部分中的网址。记下分配给全新接收器的应用 ID。
此外，您必须注册 Google Cast 设备，才能让该设备访问您的接收器应用，然后再发布该应用。您发布接收器应用后，便可在所有 Google Cast 设备上使用。在此 Codelab 中，建议使用未发布的接收器应用。
点击“添加新设备”
输入印在设备背面的序列号，并为其指定一个描述性名称。访问 Google Cast SDK 管理中心时，您也可在 Chrome 中投射屏幕，从而找到您的序列号
接收器和设备需要 5-15 分钟才能准备好进行测试。等待 5-15 分钟后，您必须重新启动自己的投放设备。
5. 运行示例应用
在等待新的 Web Receiver 准备就绪以进行测试时，我们来看一看已完成的示例 Web Receiver 应用是什么样的。我们要构建的接收器能够使用自适应比特率流式传输来播放媒体。
- 在浏览器中，打开命令与控制 (CaC) 工具。
- 使用默认的
CC1AD845接收器 ID 并点击SET APP ID按钮。 - 点击左上角的“投放”按钮，然后选择支持 Google Cast 的设备。
- 转到顶部的
LOAD MEDIA标签页。
- 将请求类型单选按钮更改为
LOAD。 - 点击
SEND REQUEST按钮可播放示例视频。 - 视频便会开始在支持 Google Cast 的设备上播放，以便显示使用默认接收器的基本接收器功能。
6. 准备起始项目
我们需要在您下载的入门级应用中添加 Google Cast 支持。以下是我们将在此 Codelab 中使用的一些 Google Cast 术语：
- 发送设备应用是指在移动设备或笔记本电脑上运行的应用；
- 接收器应用可在 Google Cast 或 Android TV 设备上运行。
现在，您可以使用自己喜爱的文本编辑器基于入门级项目进行构建了：
- 从下载的示例代码中选择
app-start目录。 - 打开
js/receiver.js和index.html
请注意，在学习此 Codelab 的过程中，http-server 应该会捕捉您的更改。如果没有，请尝试停止，然后重新启动 http-server。
应用设计
接收者应用初始化投放会话并处于待机状态，直到发送者发送 LOAD 请求（例如，播放媒体内容的命令）。
该应用由一个主视图（在 index.html 中定义）和一个名为 js/receiver.js 的 JavaScript 文件组成，该文件包含使接收器正常运行的所有逻辑。
index.html
此 HTML 文件包含接收器应用的所有界面。
接收器.js
此脚本可管理接收器应用的所有逻辑。
常见问题解答
7. 与 CastDebugLogger API 集成
Cast Receiver SDK 提供了另一个选项，供开发者使用 CastDebugLogger API 轻松调试接收器应用。
如需了解详情，请参阅 Cast 调试日志记录器指南。
初始化
将以下脚本添加到接收器应用的 <head> 标记中，紧跟在 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. 使用调试叠加层
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) 工具
概览
命令和控制 (CaC) 工具可捕获您的日志并控制调试叠加层。
您可以通过以下两种方式将接收器连接到 CAC 工具：
创建新的 Cast 连接：
- 打开 CaC 工具，设置接收者应用 ID，然后点击“投放”按钮以投放到接收方。
- 将单独的发送者应用投屏到具有相同接收者应用 ID 的同一设备上。
- 从发送者应用加载媒体，日志消息将显示在该工具中。
加入现有的投放会话：
- 使用接收器 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 调试日志记录器添加到支持 Cast 的 Web Receiver 应用中。
如需了解详情，请参阅 Cast 调试日志记录器和命令与控制 (CaC) 工具开发者指南。