IMA DAI SDK スタートガイド

目的の DAI ソリューションを選択する

フルサービス DAI

このガイドでは、IMA CAF DAI SDK を使用して DAI ストリームを再生する方法を説明します。完了したサンプル統合を確認または確認するには、サンプルをダウンロードしてください。

このガイドを使用する前に、Chromecast アプリケーション フレームワークのウェブ レシーバー プロトコルを理解しておいてください。このガイドは、メッセージ インターセプタmediaInformation オブジェクトなどの CAF レシーバのコンセプトに関する基本的な知識と、CAF センダーをエミュレートするためのキャスト コマンド&コントロール ツールの使い方を理解していることを前提としています。

IMA DAI を使用するには、アド マネージャー 360 アカウントが必要です。アド マネージャー アカウントをお持ちの場合は、詳細をアカウント マネージャーにお問い合わせください。アド マネージャーへのお申し込みについては、アド マネージャー ヘルプセンターをご覧ください。

他のプラットフォームとの統合や IMA クライアントサイド SDK の使用方法については、Interactive Media Ads SDK をご覧ください。

CAF DAI の概要

IMA CAF DAI SDK を使用した DAI の実装には、このガイドで説明するように次の 2 つの主要コンポーネントが含まれます。

  • StreamRequest: Google の広告サーバーへのストリーム リクエストを定義するオブジェクト。ストリーム リクエストには主に 2 つのタイプがあります。

    • LiveStreamRequest: アセットキー、任意の API キー、その他の省略可能なパラメータを指定します。
    • VODStreamRequest: コンテンツ ソース ID、動画 IDAPI キー(省略可)、その他のパラメータを指定します。
  • StreamManager: トラッキング ping の呼び出しやストリーム イベントのパブリッシャーへの転送など、動画ストリームと IMA DAI SDK 間の通信を処理するオブジェクト。

前提条件

  • 登録済みのテストデバイスがある Cast Developer Console アカウント。
  • Cast Developer Console に登録され、このガイドで提供されるコードをホストするために変更できる、ホストされたウェブ レシーバー アプリ
  • ウェブ レシーバー アプリを使用するように構成された送信アプリ。この例では、センダーとして Cast Command and Control ツールを使用しています。

送信者の MediaInfo オブジェクトを構成する

まず、送信側アプリの MediaInfo オブジェクトに次のフィールドが含まれるように設定します。

contentId このメディア アイテムの一意の識別子です。
contentUrl DAI StreamRequest がなんらかの理由で失敗した場合に読み込まれるフォールバック ストリーム URL。
streamType ライブ配信の場合、この値は「LIVE」に設定する必要があります。VOD ストリームの場合、この値は「BUFFERED」に設定する必要があります
customData assetKey ライブ配信のみ。読み込むライブ配信を特定します。
contentSourceId VOD ストリームのみ。リクエストされたストリームを含むメディア フィードを識別します。
videoId VOD ストリームのみ。指定されたメディア フィード内で、リクエストされたストリームを識別します。
ApiKey IMA DAI SDK からストリーム URL を取得する際に必要となる 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": "2548831",
      "videoId": "tears-of-steel",
      "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 をインポートしてプレーヤー マネージャーを入手する

CAF を読み込むスクリプトの直後に、IMA DAI SDK for 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 ストリーム マネージャーを初期化する

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 読み込みメッセージ インターセプタを使用してストリーム リクエストを行い、コンテンツ URL を最終的な DAI ストリームに置き換えます。メッセージ インターセプタは、ミッドロール挿入点の設定、ストリームのリクエスト、既存の contentURL の置き換えを処理する streamManager.requestStream() を呼び出します。

読み込みメッセージのインターセプタは 1 つしかないため、アプリでインターセプタを使用する必要がある場合は、同じコールバックにカスタム関数を組み込む必要があります。

<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 機能の詳細については、他のガイドをご覧になるか、サンプル レシーバ アプリケーションをダウンロードしてください。