本指南将演示如何使用 IMA CAF DAI SDK 播放 DAI 视频流。如果您想要查看或理解已完成的示例集成,请下载示例。
在使用本指南之前,请务必先熟悉 Chromecast 应用框架的网络接收器协议。本指南假定您对 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 Developer Console 中注册的托管网络接收器应用,您可修改该应用以托管本指南提供的代码。
- 已配置为使用您的网站接收器应用的发送应用。在本示例中,我们将使用 Cast 命令和控制工具作为发送器。
1. 配置发送者的 MediaInfo 对象
首先,配置发送者应用的 MediaInfo 对象,以包含以下字段:
contentId | 此媒体项的唯一标识符 | |
contentUrl | 在 DAI StreamRequest 因任何原因而失败时加载的后备视频流网址 | |
streamType | 对于直播,此值应设为“LIVE”。对于 VOD 视频流,此值应设为“BUFFERED” | |
customData | assetKey | 仅限直播。标识要加载的直播活动 |
contentSourceId | 仅限 VOD 视频流。标识包含所请求流的媒体 Feed。 | |
videoId | 仅限 VOD 视频流。识别指定媒体 Feed 中请求的视频流。 | |
ApiKey | (可选)从 IMA DAI SDK 中检索视频流网址所需的 API 密钥。 | |
senderCanSkip | 一个布尔值,用于告知接收方设备能否显示“跳过”按钮,从而启用对可跳过式广告的支持 |
若要在 Cast 命令和控制工具中配置这些值,请点击“加载媒体”标签页,然后将自定义加载请求类型设为“加载”。然后将文本区域中的 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 基本接收器指南》,创建一个基本的网页接收器。
接收器的代码应如下所示:
<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 并获取播放器管理器
添加脚本代码,将适用于 CAF 的 IMA DAI SDK 导入网站接收器,在脚本加载 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 视频流管理工具
初始化 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 功能,请参阅其他指南或下载示例接收器应用。