設定 DAI 專用的 IMA SDK

選取您感興趣的 DAI 解決方案

全方位服務 DAI

本指南說明如何使用 IMA CAF DAI SDK 播放 DAI 串流。如要查看或跟著完成範例整合，請下載範例。

使用本指南前，請務必先熟悉 Chromecast 應用程式架構的網頁接收器通訊協定。本指南假設您已基本瞭解 CAF 接收器概念，例如訊息攔截器和 mediaInformation 物件，並熟悉如何使用 Cast Command and Control 工具模擬 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 處理廣告 ID，如 Google Ad Manager 設定中所指定。
StreamManager：這個物件會處理影片串流和 IMA DAI SDK 之間的通訊，例如觸發追蹤 Ping 和將串流事件轉送給發布商。

必要條件

已註冊測試裝置的 Cast 開發人員控制台帳戶。
已向 Cast 開發人員控制台註冊的代管網頁接收器應用程式，且可修改為代管本指南提供的程式碼。
設定為使用網頁接收器應用程式的傳送端應用程式。本範例使用 Cast 指令和控制工具做為傳送端。

設定傳送端的 MediaInfo 物件

首先，請設定傳送端應用程式的 MediaInfo 物件，加入下列欄位：

`contentId`		這個媒體項目的專屬 ID
`contentUrl`		如果 DAI StreamRequest 因任何原因失敗，系統會載入備用串流網址
`streamType`		如果是直播串流，這個值應設為 `LIVE`。如果是隨選視訊串流，這個值應設為 `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 Basic Receiver Guide 建立基本網頁接收器。

接收器的程式碼應如下所示：

<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 適用的 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>

初始化 IMA Stream Manager

初始化 CAF DAI SDK 的 StreamManager。

<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 功能，請參閱其他指南或下載範例接收器應用程式。