DAI 用 IMA SDK を設定する

関心のある DAI ソリューションを選択する

フルサービス DAI

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

このガイドを使用する前に、Chromecast アプリケーション フレームワークの Web レシーバ プロトコルをよく理解しておいてください。このガイドは、読者が メッセージ インターセプタや mediaInformation オブジェクトなどの CAF レシーバのコンセプトをある程度理解しており、Cast Command and Control ツールを使用して CAF 送信者をエミュレートする方法を熟知していることを前提としています。

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

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

CAF DAI の概要

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

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

    • LiveStreamRequest: アセットキーとその他のオプション パラメータを指定します。
    • VODStreamRequest: コンテンツ ソース ID、動画 ID、その他の省略可能なパラメータを指定します。
    • どちらのリクエスト タイプにも、指定されたストリームへのアクセスに必要な API キーと、Google アド マネージャーの設定で指定された広告識別子を IMA SDK が処理するための Google アド マネージャーのネットワーク コードを任意で含めることができます。

  • StreamManager: 動画ストリームと IMA DAI SDK 間の通信を処理するオブジェクト（トラッキング ピングの発行、ストリーム イベントのパブリッシャーへの転送など）。

前提条件

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

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

まず、送信側アプリの MediaInfo オブジェクトを構成して、次のフィールドを含めます。

contentId このメディア アイテムの一意の識別子
contentUrl なんらかの理由で DAI StreamRequest が失敗した場合に読み込む代替ストリーム URL
streamType ライブ ストリームの場合、この値は `LIVE` に設定する必要があります。VOD ストリームの場合、この値は `BUFFERED` に設定する必要があります。
customData assetKey ライブ配信のみ。読み込むライブ配信を識別します
contentSourceId VOD ストリームのみ。リクエストされたストリームを含むメディア フィードを識別します。
videoId VOD ストリームのみ。指定されたメディア フィード内のリクエストされたストリームを識別します。
networkCode （省略可）Google アド マネージャー ネットワークのコード。
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": "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 用の IMA DAI SDKr をウェブレシーバーにインポートします。これは、スクリプトが 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 の Stream Manager を初期化します。

<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 ストリームに置き換えます。メッセージ インターセプタは streamManager.requestStream() を呼び出します。このメソッドは、広告ブレークの設定、ストリームのリクエスト、既存の contentURL の置き換えを処理します。

ロード メッセージ インターセプタは 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.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 の高度な機能については、他のガイドを参照するか、サンプル レシーバー アプリケーションをダウンロードしてください。