为 Cast 接收器添加实时支持

1. 概览

Google Cast 徽标

此 Codelab 将教您如何构建使用 Cast Live Breaks API 的自定义 Web 接收器应用。

什么是 Google Cast？

Google Cast 可让用户将移动设备上的内容投射到电视上。然后，用户可以将其移动设备用作遥控器，来控制电视上的媒体播放。

借助 Google Cast SDK，您可以扩展应用以控制电视或音响系统。借助 Cast SDK，您可以基于 Google Cast 设计核对清单添加必需的界面组件。

Google Cast 设计核对清单用于在所有支持的平台上实现简单、可预测的 Cast 用户体验。

构建目标

完成此 Codelab 后，您将构建一个利用 Live API 的 Cast 接收器。

学习内容

  • 如何在 Cast 中处理实时视频内容。
  • 如何配置 Cast 支持的各种直播场景。
  • 如何向直播添加节目数据

所需条件

体验

  • 您需要具备 Web 开发经验。
  • 之前有构建 Cast 发送方和接收方应用的经验。

您打算如何使用本教程？

仅阅读教程内容 阅读并完成练习

您如何评价自己在构建 Web 应用方面的经验水平？

新手水平 中等水平 熟练水平

2. 获取示例代码

您可以将所有示例代码下载到您的计算机…

然后解压下载的 zip 文件。

3. 在本地部署接收器

为了能将 Web 接收器与投放设备搭配使用，需要将 Web 接收器托管在投放设备可以访问的某个位置。倘若您已有一台支持 https 的服务器可供使用，请跳过以下说明并记下其网址，因为下一部分需要用到该网址。

如果您没有可用的服务器，可以使用 Firebase Hosting或 ngrok。

运行服务器

设置好所选服务后，前往 app-start 并启动服务器。

记下托管接收器的网址。您将在下一部分中使用它。

4. 在 Cast Developer Console 中注册应用

您必须注册应用，才能在 Chromecast 设备上运行此 Codelab 中构建的这种自定义接收器。注册应用后，您会收到一个应用 ID，发送器应用必须使用此 ID 来执行 API 调用，以实现启动接收器应用等目的。

Google Cast SDK Developer Console 的图片，其中突出显示了“添加新应用”按钮

点击“Add new application”

“新建接收器应用”界面的图片，其中突出显示了“自定义接收器”选项

选择“Custom Receiver”，这是我们将构建的应用类型。

“新建自定义接收器”界面图片，显示了用户正在“接收器应用网址”字段中输入的网址

输入新接收器的详细信息，请务必使用您在上一部分最后

在上一部分中。记下分配给新接收器的应用 ID。

您还必须注册 Google Cast 设备，以便该设备可在您发布接收器应用前对其进行访问。接收器应用发布后，便可供所有 Google Cast 设备使用。在此 Codelab 中，建议使用未发布的接收器应用。

Google Cast SDK 开发者控制台的图片，其中突出显示了“添加新设备”按钮

点击“Add new Device”

“添加投屏接收器设备”对话框的图片

输入印在投放设备背面的序列号，并为其指定一个描述性名称。在访问 Google Cast SDK Developer Console 时将屏幕投射到 Chrome 中，也可以找到此序列号

接收器和设备需要 5-15 分钟才能准备好进行测试。等待 5-15 分钟后，您必须重新启动 Cast 设备。

5. 投放简单的直播

一张 Android 手机播放视频的图片；底部显示“正在投放到客厅”消息，上方是一组视频播放器控件全尺寸屏幕播放同一视频的图片

在开始此 Codelab 之前，建议您先查看 实时开发者指南，其中概述了实时 API。

对于发送方，我们将使用 Cactool 来启动 Cast 会话。接收器旨在自动开始播放直播。

接收器由三个文件组成。一个名为 receiver.html 的基本 HTML 文件，其中包含应用的主要结构。您无需修改此文件。还有一个名为 receiver.js 的文件，其中包含接收器的所有逻辑。最后，还有一个 metadata_service.js，我们将在本 Codelab 的后续内容中使用它来模拟获取收视指南数据。

首先，在 Chrome 中打开 Cactool。输入您在 Cast SDK Developer Console 中获得的接收器应用 ID，然后点击设置。

需要指示 Web 接收器 Cast 应用框架 (CAF) 要播放的内容是直播内容。为此，请使用以下代码行修改应用。将其添加到 receiver.js 中加载拦截器的正文中：

request.media.streamType = cast.framework.messages.StreamType.LIVE;

将流类型设置为 LIVE 可启用 CAF 的直播界面。Web Receiver SDK 会自动跳转到视频流的直播边缘。直播收视指南数据尚未添加，因此进度条将表示直播的可搜索范围的完整长度。

将更改保存到 receiver.js，然后点击投放按钮并选择目标投放设备，在 Cactool 上发起投放会话。直播应立即开始播放。

6. 添加收视指南数据

CAF 对直播内容的支持现在包括在接收器和发送器应用中显示收视指南数据的支持。强烈建议内容提供方在其接收器应用中添加节目元数据，以提供更好的最终用户体验，尤其是对于长时间运行的直播（例如电视频道）。

CAF 支持在单个流中为多个节目设置元数据。通过在 MediaMetadata 对象上设置开始时间戳和时长，接收器会根据播放器在视频流中的当前位置自动更新发送器上显示的元数据和叠加层。以下是 API 及其一般用法的示例。

// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;

在此 Codelab 中，我们将使用示例元数据服务为直播提供元数据。如需创建节目元数据列表，请创建一个容器。ContainerMetadata 包含单个媒体流的 MediaMetadata 对象列表。每个 MediaMetadata 对象都表示容器中的一个部分。当进度条指针位于给定部分范围内时，其元数据会自动复制到媒体状态。将以下代码添加到 receiver.js 文件，以从我们的服务下载示例元数据并向 CAF 提供容器。

/**
 *   Gets the current program guide data from the sample MetadataService. Once
 *   obtained, the guide information is added using QueueManager.
 */
async function loadGuideData() {
  const data = await MetadataService.fetchLiveMetadata();
  const containerMetadata = new cast.framework.messages.ContainerMetadata();
  containerMetadata.sections = data;

  playerManager.getQueueManager().setContainerMetadata(containerMetadata);
}

此外，在加载拦截器中添加对用于加载指南数据的函数的调用：

loadGuideData();

保存 receiver.js 文件并启动 Cast 会话。您应该会在屏幕上看到节目的开始时间、结束时间和标题。

当进度条指针过渡到容器中的新部分时，接收器会向所有发送器发送新的媒体状态消息，以便发送器应用更新其界面。建议接收器应用在媒体状态拦截器中更新容器元数据，以继续向发送器应用提供节目信息。在我们的示例服务中，我们返回当前节目的元数据以及接下来两个节目的元数据。如需更新直播的元数据，请创建一个新容器，然后像上一个示例中那样调用 setContainerMetadata。

7. 停用搜索

大多数视频流都由包含一系列视频帧的片段组成。除非另有规定，否则 CAF 将允许用户在这些细分中进行搜索。Web 接收器可以通过调用几个可用的 API 来指定此设置。

在加载拦截器中，移除了 SEEK 支持的媒体命令。此操作会停用所有移动发送方和触控界面上的搜索功能。在 receiver.js 中 SDK 实例变量的定义之后添加以下代码。

// Disable seeking
playerManager.removeSupportedMediaCommands(
    cast.framework.messages.Command.SEEK, true);

如需停用由 Google 助理支持的语音搜索指令（例如 Ok Google，快退 60 秒），应使用搜索拦截器。每次发出搜索请求时，都会调用此拦截器。如果 SEEK 支持的媒体命令处于停用状态，拦截器将拒绝搜索请求。将以下代码段添加到 receiver.js 文件中：

/**
 * A seek interceptor is called whenever CAF receives a request to seek to
 * a different location in media. This interceptor can be used to modify that
 * seek request or disable seeking completely.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
      // if the SEEK supported media command is disabled, block seeking
      if (!(playerManager.getSupportedMediaCommands() &
            cast.framework.messages.Command.SEEK)) {
        castDebugLogger.info(TAG, 'Seek blocked.');
        return null;
      }

      return seekRequestData;
    });

保存 receiver.js 文件并启动 Cast 会话。您应该无法再在直播中进行搜索。

8. 恭喜

现在，您已经知道如何使用最新的 Cast 接收器 SDK 创建自定义接收器应用。

如需了解详情，请参阅直播开发者指南。