为 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. 在本地部署接收器

为了能够将网络接收器与 Cast 设备搭配使用,您需要将它托管在 Cast 设备可以访问的某个位置。如果您已有支持 https 的服务器可供使用,请跳过以下说明并记下网址,因为下一部分需要用到该网址。

如果您没有可供使用的服务器,可以使用 Firebase Hostingngrok

运行服务器

设置完您选择的服务后,请前往 app-start 并启动服务器。

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

4. 在 Cast Developer Console 中注册应用

您必须注册应用,才能在 Chromecast 设备上运行自定义接收器(作为此 Codelab 的内置)。注册应用后,您会收到一个应用 ID,发送方应用必须使用该 ID 来执行 API 调用(例如,启动接收方应用)。

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

点击“添加新应用”

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

选择“自定义接收器”,这是我们正在构建的接收器。

“新建自定义接收器”屏幕的图片,其中显示了某人正在“接收器应用网址”字段中输入的网址

输入新接收器的详细信息,请务必使用您最后获得的网址

详细介绍。记下分配给新接收器的应用 ID

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

Google Cast SDK 开发者控制台的图片,其中突出显示了“Add New Device”按钮

点击“添加新设备”

“Add Cast Receiver Device”对话框的图片

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

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

5. 投射简单的直播

一部 Android 手机正在播放视频的图片;底部显示了“投放到客厅”消息,正上方是一组视频播放器控件图片:在以完整尺寸的屏幕上播放同一视频

在开始此 Codelab 之前,建议您先查看 已发布的开发者指南,其中简要介绍了实时 API。

对于发送者,我们将使用 Cactool 启动 Cast 会话。接收器设计为自动开始播放直播。

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

首先,在 Chrome 中打开 Cactool。输入 Cast SDK Developer Console 上向您提供的接收器应用 ID,然后点击设置

需要向网络接收器投射应用框架 (CAF) 说明要播放的内容是直播内容。为此,请使用以下代码行修改应用。将其添加到 receiver.js 中加载拦截器的正文:

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

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

保存您对 receiver.js 所做的更改,然后在 Cactool 上启动 Cast 会话,只需点击投放按钮并选择目标投放设备即可。直播应该会立即开始播放。

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 将允许用户在这些片段内寻找内容。网络接收器可以通过对几个可用的 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 创建自定义接收器应用。

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