选择您感兴趣的 DAI 解决方案
全方位 DAI
本指南演示了如何使用 IMA CAF DAI SDK 播放 DAI 串流。如果您想查看或跟随已完成的示例集成,请下载示例。
在使用本指南之前,请务必熟悉 Chromecast 应用框架的 Web 接收器协议。本指南假定您基本熟悉 CAF 接收器概念(例如消息拦截器和 mediaInformation
对象),并且熟悉如何使用 Cast 命令和控制工具来模拟 CAF 发送器。
如需使用 IMA DAI,您必须拥有 Ad Manager 360 账号。如果您有 Ad Manager 账号,请与您的客户经理联系以了解详情。如需了解如何注册 Ad Manager,请访问 Ad Manager 帮助中心。
如需了解如何与其他平台集成或如何使用 IMA 客户端 SDK,请参阅Interactive Media Ads SDK。
CAF DAI 概览
如本指南所示,使用 IMA CAF DAI SDK 实现 DAI 涉及两个主要组件:
StreamRequest
:用于定义对 Google 广告服务器的流式传输请求的对象。数据流请求主要分为两种:LiveStreamRequest
:指定素材资源键、可选的 API 密钥以及其他可选参数。VODStreamRequest
:指定内容来源 ID、视频 ID、可选的 API 密钥以及其他可选参数。
StreamManager
:用于处理视频流与 IMA DAI SDK 之间的通信的对象,例如触发跟踪 ping 和将流事件转发给发布商。
前提条件
- 一个包含已注册测试设备的 Cast 开发者控制台账号。
- 已在 Cast 开发者控制台中注册的托管网站接收器应用,可修改为托管本指南提供的代码。
- 配置为使用 Web 接收器应用的发送应用。此示例使用 Cast 命令和控制工具作为发送端。
配置发件人的 MediaInfo 对象
首先,配置发件人应用的 MediaInfo 对象,使其包含以下字段:
contentId
|
此媒体内容的唯一标识符 | |
contentUrl
|
如果 DAI StreamRequest 因任何原因而失败,要加载的后备数据流网址 | |
streamType
|
对于直播,此值应设置为“LIVE”。对于 VOD 串流,此值应设置为“BUFFERED” | |
customData
|
assetKey
|
仅限直播。标识要加载的直播 |
contentSourceId
|
仅限 VOD 视频流。标识包含请求的直播的媒体 Feed。 | |
videoId
|
仅限 VOD 视频流。标识指定媒体 Feed 中请求的直播。 | |
ApiKey
|
可选 API 密钥,可能需要此密钥才能从 IMA DAI SDK 检索直播网址 | |
senderCanSkip
|
一个布尔值,用于让接收器知道发送设备是否能够显示跳过按钮,以便支持可跳过的广告 |
如需在投放命令和控制工具中配置这些值,请点击 Load Media(加载媒体)标签页,然后将自定义加载请求类型设置为 LOAD
。然后,将文本区域中的 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": "2548831",
"videoId": "tears-of-steel",
"ApiKey": "",
"senderCanSkip": true
}
},
"credentials": "testCredentials"
}
此自定义加载请求对象可发送给接收器,以测试以下步骤。
创建基本 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>
导入 IMA DAI SDK 并获取 Player Manager
在脚本加载 CAF 后,添加一个脚本标记,以将适用于 CAF 的 IMA DAI SDK 导入到您的 Web 接收器。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>
初始化 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>
创建加载消息拦截器
CAF DAI SDK 使用 CAF 负载消息拦截器发出流请求,并将内容网址替换为最终的 DAI 流。消息拦截器会调用 streamManager.requestStream(),该方法会处理设置广告插播时间点、请求数据流以及替换现有 contentURL
。
只能有一个加载消息拦截器,因此,如果您的应用需要使用拦截器,您需要将所有自定义函数纳入同一回调中。
<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>
构建数据流请求
如需完成 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 功能,请参阅其他指南或下载我们的接收器示例应用。