開始使用

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

本指南說明如何使用 IMA CAF DAI SDK 播放 DAI 串流。如想查看已完成的範例整合作業，或是要追蹤已完成的範例整合作業，請下載範例。

使用本指南之前，請務必熟悉 Chromecast 應用程式架構的網路接收器通訊協定。本指南假定您對 CAF 接收器概念有基本瞭解，例如訊息攔截器和 mediaInformation 物件，以及熟悉使用 Cast 指令與控制工具模擬 CAF 傳送端。

如要使用 IMA DAI，您必須擁有 Ad Manager 360 帳戶。如果您有 Ad Manager 帳戶，詳情請洽您的客戶經理。如需申請 Ad Manager 的相關資訊，請造訪 Ad Manager 說明中心。

CAF DAI 總覽

使用 IMA CAF DAI SDK 導入 DAI 時，必須完成以下兩個主要元件：

  • StreamRequest：這個物件會定義向 Google 廣告伺服器發送串流請求。StreamRequests 主要分為兩種：
    • LiveStreamRequest：指定一個資產金鑰、選用的 API 金鑰以及其他選用參數。
    • VODStreamRequest：指定「內容來源 ID」、「影片 ID」、選用的「API 金鑰」以及其他選用參數。
  • StreamManager：這個物件可處理影片串流與 IMA DAI SDK 之間的通訊，例如觸發追蹤連線偵測 (ping) 和將串流事件轉送至發布商。

必要條件

在開始之前，您需要：

1. 設定寄件者的 MediaInfo 物件

首先，請將寄件者應用程式的 MediaInfo 物件設定為包含下列欄位：

contentId 此媒體項目的專屬識別碼。
contentUrl 如果 DAI StreamRequest 因任何原因失敗，要載入的備用串流網址
streamType 如果是直播，請將此值設為「LIVE」。如果是 VOD 串流，這個值應設為「BUFFERED」
customData assetKey 僅限直播影片。指定要載入的直播活動
contentSourceId 僅限 VOD 串流。用於識別內含所請求串流的媒體資訊提供。
videoId 僅限 VOD 串流。用於識別指定媒體資訊提供中的要求串流。
ApiKey 從 IMA DAI SDK 擷取串流網址的必要 API 金鑰。
senderCanSkip 布林值，讓接收端瞭解傳送裝置是否可顯示略過按鈕，以便支援可略過廣告

如要在投放指令和控制工具中設定這些值，請按一下 [載入媒體] 分頁標籤，然後將自訂載入要求類型設為「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"
}

VOD

{
  "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 之後，將 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>

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() 來處理設定廣告插播、請求串流並取代現有的 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>

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