为 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 后，您将构建一个利用新的直播功能进行投放的 Cast 接收器。

学习内容

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

所需条件

体验

  • 您需要具备网络开发知识。
  • 拥有构建 Cast 发送器和接收器应用的经验。

您打算如何使用本教程？

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

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

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

2. 获取示例代码

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

然后解压下载的 zip 文件。

3. 在本地部署接收器

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

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

运行服务器

设置完您所选的服务后，请转到 app-start 并启动您的服务器。

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

4. 在 Cast 开发者控制台中注册应用

您必须注册您的应用，才能在 Chromecast 设备上运行自定义接收器（如此 Codelab 中所构建）。注册您的应用后，您会收到一个应用 ID，发送者的应用必须使用该 ID 来执行 API 调用，例如启动接收器应用。

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

点击“添加新应用”

“New Receiver Application”（新建接收器应用）屏幕的图片，其中突出显示了“Custom Receiver”（自定义接收器）选项

选择“Custom Receiver”（自定义接收器），这就是我们正在构建的应用。

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

输入新接收器的详细信息，请务必使用您最终选择的网址

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

此外，您必须注册 Google Cast 设备，才能让该设备访问您的接收器应用，然后再发布该应用。您发布接收器应用后，便可在所有 Google Cast 设备上使用。在此 Codelab 中，建议使用未发布的接收器应用。

Google Cast SDK Console 的图片，其中突出显示了“Add New Device”按钮

点击“添加新设备”

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

输入印在设备背面的序列号，并为其指定一个描述性名称。访问 Google Cast SDK 管理中心时，您也可在 Chrome 中投射屏幕，从而找到您的序列号

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

5. 投放简单的直播

一部 Android 手机正在播放视频，图片为“正在投放到客厅”消息展示同一尺寸的完整尺寸屏幕的图片

在开始此 Codelab 之前，您不妨参阅 实时开发者指南，其中概述了新的实时功能。

对于我们的发送器，我们将使用 CAF 接收器调试功能来启动投放会话。接收器会自动开始播放直播。

接收器由两个文件组成。一个名为 receiver.html 的基本 HTML 文件，用于初始化 Cast 上下文以及 Cast 媒体播放器的占位符。您无需修改此文件。此外，还有一个名为 receiver.js 的文件，其中包含接收器的所有逻辑。

首先，在 Chrome 中打开网页发件人。输入您在 Cast SDK Console 中提供的接收器应用 ID，然后点击“设置”。

在接收器中，我们需要添加一些逻辑来告知 Cast 应用框架 (CAF) 数据流已生效。值得高兴的是，这只需要一行代码。将以下代码行添加到 receiver.js 中的加载拦截器：

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

将流类型设置为 LIVE 会启用 CAF 的直播界面。在这种情况下，这意味着，在加入视频流后，CAF 会自动跳转到视频流的直播边缘。我们尚未设置任何收视指南数据，因此拖动条代表视频流的可查找范围的完整长度。

保存对 receiver.js 的更改，并在网页发送者上发起投放会话，方法是右键点击网页上的任意位置，然后选择“投放”。直播应该会立即开始播放。

6. 添加收视指南数据

CAF 对实时内容的新支持现在支持在接收器和发送者应用屏幕上显示节目指南数据。强烈建议 content provider 在其接收器应用中添加节目元数据，以便提升最终用户体验，尤其是对于电视频道等长时间运行的直播内容。

您现在可以在单个流中向 CAF 提供多个节目的元数据。通过设置 MediaMetadata 对象的开始时间戳和时长，接收器会根据播放器在数据流中的当前位置自动更新在发送者和接收者上显示的元数据。

// 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 中，我们将使用示例元数据服务提供直播的元数据。如要创建节目元数据列表，我们首先需要创建一个容器。容器存储单个媒体流的 MediaMetadata 对象列表。每个 MediaMetadata 对象代表容器中的一个版块。当进度条指针位于给定部分的边界内时，其元数据会自动复制到媒体状态。将以下代码添加到 receiver.js 文件，以从我们的服务下载示例元数据并向 CAF 提供容器：

/**
 * Gets the current program guide data from our Google Cloud Function
 * @return {cast.framework.messages.MediaMetadata[]} Latest program guide data
 */
function loadGuideData() {
  return fetch(LIVE_MEDIA_METADATA_SERVICE_URI)
      .then((response) => response.json())
      .then(function(data) {
        const containerMetadata =
          new cast.framework.messages.ContainerMetadata();
        containerMetadata.sections = data;

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

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

loadGuideData();

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

当进度条指针过渡到容器中的一个新部分时，接收端会向新的发送者发送新的媒体状态消息。因此，更新媒体状态拦截器中的容器元数据十分有用，这样您就能随时获得最新的节目信息。在我们的示例服务中，我们返回当前节目元数据，以及接下来两个程序的元数据。如需更新数据流的元数据，只需创建一个新容器，然后调用 setContainerMetadata（如上例所示）即可。

7. 停用跳转功能

大多数视频流都由保存一系列视频帧的片段组成。除非另有说明，否则 CAF 将允许用户在这些片段内跳转。如需停用跳转功能，我们需要在接收器中添加两个代码段。

在负载拦截器中，移除 SEEK 支持的媒体命令。这样做会禁止在所有移动发送者和触摸界面上进行跳转。

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

接下来，我们需要禁止观看者在直播中跳过语音指令，例如“Ok Google，快退 60 秒”。为了停用语音跳转功能，我们将添加一个跳转拦截器。每次发出跳转请求时，系统都会调用此拦截器。如果停用 SEEK 支持的媒体命令，拦截器将拒绝跳转请求。将以下代码段添加到 receiver.js 文件中：

/**
 * Seek 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.
 * @param {cast.framework.messages.MessageType.SEEK} The message to intercept.
 */
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.SEEK,
    (seekData) => {
      // 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 seekData;
    }
);

保存 receiver.js 文件并启动投放会话。您应该无法再在直播中查找。

8. 恭喜

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

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