开始使用

本指南介绍了如何使用 IMA CAF DAI SDK 播放 DAI 视频流。如果您想要查看或遵循已完成的示例集成,请下载示例

在使用本指南之前,请务必熟悉 Chromecast 应用框架的 Web 接收器协议。本指南假定您对 CAF 接收器概念(例如消息拦截器mediaInformation 对象)有基本的了解,并且熟悉如何使用投射命令和控制工具来模拟 CAF 发送器。

若要使用 IMA DAI,您必须拥有 Ad Manager 360 帐号。如果您有 Ad Manager 帐号,请与您的客户经理联系以了解详情。如需了解如何注册 Ad Manager,请访问 Ad Manager 帮助中心

CAF DAI 概览

使用 IMA CAF DAI SDK 实现 DAI 涉及两个主要组件,本指南对此进行了说明:

  • StreamRequest:此对象用于定义向 Google 广告服务器发送的视频流请求。StreamRequest 分为两大类:
    • LiveStreamRequest:指定素材资源键、可选 API 密钥以及其他可选参数。
    • VODStreamRequest:指定内容来源 ID视频 ID 和可选的 API 密钥,以及其他可选参数。
  • StreamManager:用于处理视频流和 IMA DAI SDK 之间通信的对象,例如触发跟踪 ping 并将视频流事件转发到发布商。

前提条件

在开始之前,您需要做好以下准备:

  • 拥有已注册的测试设备的 Cast Developer Console 帐号。
  • 一款已在您的 Cast 开发者控制台中注册的托管 Web 接收器应用,可以对其进行修改以托管本指南提供的代码。
  • 配置为使用您的 Web 接收器应用的发送应用。在本示例中,我们将使用投射命令和控制工具作为发送方。

1. 配置发送者的 MediaInfo 对象

首先,配置发送者应用的 MediaInfo 对象,以包含以下字段:

contentId 此媒体项的唯一标识符
contentUrl DAI StreamRequest 因故失败时要加载的后备视频流网址
流类型 对于直播,此值应设置为“LIVE”。对于 VOD 视频流,此值应设为“BUFFERED”
customData assetKey 仅限直播。用于标识要加载的直播活动
contentSourceId 仅限 VOD 视频流。用于标识包含所请求的视频流的媒体 Feed。
videoId 仅限 VOD 视频流。标识指定的媒体 Feed 中请求的视频流。
ApiKey 从 IMA DAI SDK 检索视频流网址的必需 API 密钥。
senderCanSkip 一个布尔值,可让接收器知道发送设备是否能够显示“跳过”按钮,从而支持可跳过的广告

若要在投放命令和控制工具中配置这些值,请点击“加载媒体”标签页,然后将自定义加载请求类型设为“加载”。然后将文本区域中的 JSON 数据替换为以下某个 JSON 对象:

直播

{
  "media": {
    "contentId": "bbb",
    "contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8",
    "streamType": "LIVE",
    "customData": {
      "assetKey": "sN_IYUG8STe1ZzhIIE_ksA",
      "ApiKey": "",
      "senderCanSkip": true
    }
  },
  "credentials": "testCredentials"
}

视频点播

{
  "media": {
    "contentId": "tos",
    "contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/tos.m3u8",
    "streamType": "BUFFERED",
    "customData": {
      "contentSourceId": "2528370",
      "videoId": "tears-of-steel",
      "ApiKey": "",
      "senderCanSkip": true
    }
  },
  "credentials": "testCredentials"
}

可以将此自定义加载请求对象发送到接收器以测试下面的每个步骤

2. 创建基本的 CAF 接收器

按照 CAF SDK 基本接收器指南,创建基本的 Web 接收器。

接收器的代码应如下所示:

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    cast.framework.CastReceiverContext.getInstance().start();
  </script>
</body>
</html>

3. 导入 IMA DAI SDK 并获取播放器管理器

添加脚本代码,将 IMA DAI SDK for CAF 导入网络接收器,紧跟在脚本加载 CAF 之后。CAF DAI SDK 始终处于启用状态,因此无需设置特定版本。然后,在下面的脚本代码中,将接收器上下文和播放器管理器存储为常量,然后再启动接收器。

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();

    castContext.start();
  </script>
</body>
</html>

4. 初始化 IMA Stream Manager

初始化 CAF DAI SDK 的流管理器

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    castContext.start();
  </script>
</body>
</html>

5. 创建加载消息拦截器

CAF DAI SDK 使用 CAF 加载消息拦截器发出视频流请求,并将内容网址替换为最终的 DAI 视频流。消息拦截器将调用 streamManager.requestStream(),后者将负责设置广告插播时间点、请求视频流和替换现有 content网址。

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    const getStreamRequest = (request) => null;

    playerManager.setMessageInterceptor(
        cast.framework.messages.MessageType.LOAD, (request) => {
          return streamManager.requestStream(request, getStreamRequest(request))
              .then((request) => {
                this.broadcast('Stream request successful.');
                return Promise.resolve(request);
              })
              .catch((error) => {
                this.broadcast('Stream request failed.');
                return Promise.resolve(request);
              });
        });

    castContext.start();
  </script>
</body>
</html>

6. 构建视频流请求

如需完成 CAF DAI 集成,您需要使用发送者的 mediaInfo 对象中包含的数据构建视频流请求

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    const getStreamRequest = (request) => {
      const imaRequestData = request.media.customData;
      let streamRequest = null;
      if (imaRequestData.assetKey) {
        // Live stream
        streamRequest = new google.ima.cast.dai.api.LiveStreamRequest();
        streamRequest.assetKey = imaRequestData.assetKey;
      } else if (imaRequestData.contentSourceId) {
        // VOD stream
        streamRequest = new google.ima.cast.dai.api.VODStreamRequest();
        streamRequest.contentSourceId = imaRequestData.contentSourceId;
        streamRequest.videoId = imaRequestData.videoId;
      }
      if (streamRequest && imaRequestData.ApiKey) {
        streamRequest.ApiKey = imaRequestData.ApiKey;
      }
      if (streamRequest && imaRequestData.senderCanSkip) {
        streamRequest.senderCanSkip = imaRequestData.senderCanSkip;
      }
      return streamRequest;
    };

    playerManager.setMessageInterceptor(
        cast.framework.messages.MessageType.LOAD, (request) => {
          return streamManager.requestStream(request, getStreamRequest(request))
              .then((request) => {
                return Promise.resolve(request);
              })
              .catch((error) => {
                this.broadcast('Stream request failed.');
                return Promise.resolve(request);
              });
        });

    castContext.start();
  </script>
</body>
</html>

...瞧!现在,您可以使用 Google 的 CAF DAI SDK 请求和播放 DAI 视频流。如需详细了解更高级的 SDK 功能,请参阅其他指南或下载我们的示例应用接收器应用