開始使用 IMA DAI SDK

選取所需的 DAI 解決方案

完整服務 DAI

本指南示範如何使用 IMA CAF DAI SDK 播放 DAI 串流。如要查看或按照已完成的整合範例操作,請下載範例

使用本指南之前,請務必熟悉 Chromecast 應用程式架構的網路接收端通訊協定。本指南假設您對 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:指定素材資源金鑰、選用的 API 金鑰,以及其他選用參數。
    • VODStreamRequest:指定 Content Source ID影片 ID,以及選用的 API 金鑰,以及其他選用參數。
  • StreamManager:這個物件會處理影片串流與 IMA DAI SDK 之間的通訊,例如觸發追蹤連線偵測 (ping),以及將串流事件轉送至發布商。

先備知識

設定傳送者的 MediaInfo 物件

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

contentId 此媒體項目的專屬 ID
contentUrl 當 DAI StreamRequest 因任何原因失敗時,要載入的備用串流網址
streamType 如果是直播,這個值應設為「LIVE」。如果是 VOD 串流,這個值應設為「BUFFERED」
customData assetKey 僅適用於直播。找出要載入的直播
contentSourceId 僅限隨選影片串流。識別包含所要求串流的媒體動態饋給。
videoId 僅限隨選影片串流。在指定的媒體動態饋給中識別要求的串流。
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 並取得播放器管理工具

新增指令碼代碼,在指令碼載入 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.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 功能,請參閱其他指南或下載接收器應用程式範例