本指南說明如何使用 IMA CAF DAI SDK 播放 DAI 串流。如要查看或按照完整的整合範例操作,請下載範例。
使用本指南前,請務必熟悉 Chromecast 應用程式架構的 Web 接收端通訊協定。本指南假設您已熟悉 CAF 接收端的基本概念,例如訊息攔截器和 mediaInformation 物件,並熟悉如何使用 Cast 指揮與控制工具模擬 CAF 傳送端。
如要使用 IMA DAI,您必須擁有 Ad Manager 360 帳戶。如果您有 Ad Manager 帳戶,請與客戶經理聯絡,瞭解詳情。如要瞭解如何註冊 Ad Manager,請前往 Ad Manager 說明中心。
如要瞭解如何與其他平台整合,或使用 IMA 用戶端 SDK,請參閱「互動式媒體廣告 SDK」。
CAF DAI 總覽
如要使用 IMA CAF DAI SDK 導入 DAI,主要有兩個部分,如本指南所示:
StreamRequest: 這個物件定義了向 Google 廣告伺服器發出的串流請求。 串流要求主要分為兩種:LiveStreamRequest:指定素材資源金鑰和其他選用參數。VODStreamRequest:指定內容來源 ID、影片 ID 和其他選用參數。- 這兩種要求類型都可以選擇加入 API 金鑰 (存取指定串流時需要),以及 Google Ad Manager 聯播網代碼,讓 IMA SDK 根據 Google Ad Manager 設定處理廣告 ID。
StreamManager: 這個物件會處理影片串流和 IMA DAI SDK 之間的通訊,例如觸發追蹤連線偵測 (ping),以及將串流事件轉送給發布商。
必要條件
- Cast 開發人員控制台帳戶,且已註冊測試裝置。
- 託管的網路接收器應用程式,已在 Cast 開發人員控制台註冊,且可修改為託管本指南提供的程式碼。
- 設定為使用網頁接收端應用程式的傳送端應用程式。這個範例使用 Cast 指揮與控制工具做為傳送端。
設定傳送端的 MediaInfo 物件
首先,請設定傳送端應用程式的 MediaInfo 物件,加入下列欄位:
contentId
|
這個媒體項目的專屬 ID | |
contentUrl
|
如果 DAI StreamRequest 因任何原因失敗,系統會載入這個備用串流網址 | |
streamType
|
如果是直播,這個值應設為「LIVE」。如果是 VOD 串流,這個值應設為「BUFFERED」 | |
customData
|
assetKey
|
僅限直播。識別要載入的直播 |
contentSourceId
|
僅限 VOD 串流。識別包含所要求串流的媒體動態饋給。 | |
videoId
|
僅限 VOD 串流。識別指定媒體動態饋給中要求的串流。 | |
networkCode
|
(選用) Google Ad Manager 聯播網代碼。 | |
ApiKey
|
選用 API 金鑰,可能需要提供才能從 IMA DAI SDK 擷取串流網址 | |
senderCanSkip
|
這個布林值可讓接收端知道傳送裝置是否能顯示略過按鈕,進而支援可略過的廣告 | |
如要在 Cast 指揮與控制工具中設定這些值,請按一下「Load Media」分頁標籤,然後將自訂載入要求類型設為 LOAD。然後將文字區域中的 JSON 資料替換為下列其中一個 JSON 物件:
直播
{
"media": {
"contentId": "bbb",
"contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8",
"streamType": "LIVE",
"customData": {
"assetKey": "c-rArva4ShKVIAkNfy6HUQ",
"networkCode": "21775744923",
"ApiKey": "",
"senderCanSkip": true
}
},
"credentials": "testCredentials"
}
VOD
{
"media": {
"contentId": "tos",
"contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/tos.m3u8",
"streamType": "BUFFERED",
"customData": {
"contentSourceId": "2548831",
"videoId": "tears-of-steel",
"networkCode": "21775744923",
"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 並取得播放器管理工具
在載入 CAF 的指令碼後方,新增指令碼標記,將 CAF 專用 IMA DAI SDK 匯入網路接收器。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 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>
建立載入訊息攔截器
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.networkCode) {
streamRequest.networkCode = imaRequestData.networkCode;
}
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 功能,請參閱其他指南或下載範例接收端應用程式。