IMA DAI SDK スタートガイド

ご希望の DAI ソリューションを選択する

連続広告配信 DAI

IMA SDK を使用すると、ウェブサイトやアプリにマルチメディア広告を簡単に統合できます。

IMA SDK は、VAST 準拠の広告サーバーに広告をリクエストし、アプリでの広告再生を管理できます。

IMA DAI SDK を使用すると、アプリは VOD またはライブ コンテンツの広告とコンテンツ動画のストリーム リクエストを行います。これにより、SDK は結合された動画ストリームを返すため、アプリ内で広告とコンテンツ動画の切り替えを管理する必要はありません。

このガイドでは、IMA DAI SDK for CAF を使用して、ライブ DAI Pod Serving ストリームを再生する方法について説明します。

このガイドを使用する前に、Chromecast Application Framework の Web Receiver プロトコルについて理解しておいてください。このガイドは、メッセージ インターセプタや mediaInformation オブジェクトなどの CAF レシーバのコンセプトに関する基本的な知識と、Cast Command and Control ツールの使用方法に精通していることを前提としています。

IMA DAI 連続配信広告を使用するには、連続配信パートナーと提携し、アド マネージャー 360 Advanced のアカウントを取得する必要があります。アド マネージャー アカウントをお持ちの場合は、アカウント マネージャーに詳細をお問い合わせください。アド マネージャーへのお申し込みについて詳しくは、アド マネージャー ヘルプセンターをご覧ください。

他のプラットフォームとの統合や、IMA クライアントサイドの SDK の使用方法については、インタラクティブ メディア広告 SDK をご覧ください。

IMA DAI 連続配信広告の概要

IMA CAF DAI SDK を使って連続配信広告を実装するには、このガイドで説明しているように、次の 2 つの主要コンポーネントを使用します。

  • StreamRequest: Google の広告サーバーへのストリーム リクエストを定義するオブジェクト。リクエストでは、ネットワーク コード、カスタム アセットキー、オプションの API キー、その他のオプション パラメータを指定します。
  • StreamManager: トラッキング ping の配信やパブリッシャーへのストリーム イベントの転送など、動画ストリームと IMA DAI SDK 間の通信を処理するオブジェクト。

前提条件

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

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

項目 目次
contentId このメディア アイテムの一意の識別子です。

CONTENT_ID
contentUrl 省略可。DAI ストリームの読み込みに失敗した場合に再生するバックアップ ストリームの URL。

BACKUP_STREAM_URL

contentType 省略可。コンテンツ バックアップ ストリームの MIME タイプ。DASH ストリームでのみ必要です。

CONTENT_STREAM_MIMETYPE
streamType この値に使用される文字列リテラルまたは定数は、送信者のプラットフォームによって異なります。
customData customData フィールドには、追加の必須フィールドの Key-Value ストアが含まれています。
項目 目次
manifestUrl マニフェスト マニピュレータまたはパートナー事業者から提供される動画ストリーム URL。リクエストを行う前に、IMA DAI SDK によって提供されるストリーム ID を挿入する必要があります。このサンプルでは、マニフェスト URL にプレースホルダ [[STREAMID]] が含まれています。このプレースホルダは、リクエストを行う前にストリーム ID に置き換えられます。

MANIFEST_URL
networkCode Google アド マネージャー 360 アカウントのネットワーク コード。

NETWORK_CODE
customAssetKey Google アド マネージャー 360 で連続配信広告の配信イベントを識別するカスタム アセットキー。マニフェスト マニピュレータまたはサードパーティの連続配信広告パートナーから、これを取得する場合があります。

CUSTOM_ASSET_KEY
apiKey IMA DAI SDK からストリーム ID を取得するための API キー（省略可）。

API_KEY

作業の開始に役立つコードサンプルを次に示します。

ウェブ

Cast ウェブ センダーでこれらの値を構成するには、まず必要なデータを含む MediaInfo オブジェクトを作成してから、ウェブ レシーバに読み込みリクエストを行います。

// Create mediaInfo object
const mediaInfo = new chrome.cast.media.MediaInfo("CONTENT_ID");
mediaInfo.contentUrl = "BACKUP_STREAM_URL";
mediaInfo.contentType = "CONTENT_STREAM_MIMETYPE";
mediaInfo.streamType = chrome.cast.media.StreamType.LIVE;
mediaInfo.customData = {
manifestUrl: "MANIFEST_URL",
networkCode: "NETWORK-CODE",
customAssetKey: "CUSTOM_ASSET_KEY",
apiKey: "API_KEY"
};

// Make load request to cast web receiver
const castSession = cast.framework.CastContext.getInstance().getCurrentSession();
const request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
  () => { console.log('Load succeed'); },
  (errorCode) => { console.log('Error code: ' + errorCode); });

Android

Cast ウェブ センダーでこれらの値を設定するには、まず必要なデータを含む MediaInfo オブジェクトを作成してから、ウェブ レシーバーに読み込みリクエストを行います。

JSONObject customData = new JSONObject()?
  .put("manifestUrl", "MANIFEST_URL")
  .put("networkCode", "NETWORK-CODE")
  .put("customAssetKey", "CUSTOM_ASSET_KEY")
  .put("apiKey", "API_KEY");
MediaInfo mediaInfo = MediaInfo.Builder("CONTENT_ID")
  .setContentUrl("BACKUP_STREAM_URL")
  .setContentType("CONTENT_STREAM_MIMETYPE")
  .setStreamType(MediaInfo.STREAM_TYPE_LIVE)
  .setCustomData(customData)
  .build();

RemoteMediaClient remoteMediaClient = mCastSession.getRemoteMediaClient();
remoteMediaClient.load(new MediaLoadRequestData.Builder().setMediaInfo(mediaInfo).build());

iOS（Obj-C）

Cast ウェブ センダーでこれらの値を構成するには、まず必要なデータを含む GCKMediaInformation オブジェクトを作成してから、ウェブ レシーバに読み込みリクエストを行います。

NSURL url = [NSURL URLWithString:@"BACKUP_STREAM_URL"];
NSDictionary *customData = @{
  @"manifestUrl": @"MANIFEST_URL",
  @"networkCode": @"NETWORK-CODE",
  @"customAssetKey": @"CUSTOM_ASSET_KEY",
  @"apiKey": @"API_KEY"};
mediaInfoBuilder.customData = customData;

GCKMediaInformationBuilder *mediaInfoBuilder =
  [[GCKMediaInformationBuilder alloc] initWithContentID: @"CONTENT_ID"];
mediaInfoBuilder.contentURL = url;
mediaInfoBuilder.contentType = @"CONTENT_STREAM_MIMETYPE";
mediaInfoBuilder.streamType = GCKMediaStreamTypeLive;
mediaInfoBuilder.customData = customData;
self.mediaInformation = [mediaInfoBuilder build];

GCKRequest *request = [self.sessionManager.currentSession.remoteMediaClient loadMedia:self.mediaInformation];
if (request != nil) {
  request.delegate = self;
}

iOS（Swift）

Cast ウェブ センダーでこれらの値を構成するには、まず必要なデータを含む GCKMediaInformation オブジェクトを作成してから、ウェブ レシーバに読み込みリクエストを行います。

let url = URL.init(string: "BACKUP_STREAM_URL")
guard let mediaURL = url else {
  print("invalid mediaURL")
  return
}

let customData = [
  "liveConfigID": "MANIFEST_URL",
  "networkCode": "NETWORK-CODE",
  "customAssetKey": "CUSTOM_ASSET_KEY",
  "region": "API_KEY"
]

let mediaInfoBuilder = GCKMediaInformationBuilder.init(contentId: "CONTENT_ID")
mediaInfoBuilder.contentURL = mediaUrl
mediaInfoBuilder.contentType = @"CONTENT_STREAM_MIMETYPE"
mediaInfoBuilder.streamType = GCKMediaStreamType.Live
mediaInfoBuilder.customData = customData
mediaInformation = mediaInfoBuilder.build()

guard let mediaInfo = mediaInformation else {
  print("invalid mediaInformation")
  return
}

if let request = sessionManager.currentSession?.remoteMediaClient?.loadMedia
(mediaInfo) {
  request.delegate = self
}

CAC ツール

Cast Command and Control ツールでこれらの値を構成するには、[Load Media] タブをクリックし、カスタムの読み込みリクエスト タイプを [LOAD] に設定します。次に、テキスト領域の JSON データを次の JSON に置き換えます。

{
  "media": {
    "contentId": "CONTENT_ID",
    "contentUrl": "BACKUP_STREAM_URL",
    "contentType": ""CONTENT_STREAM_MIMETYPE"",
    "streamType": "LIVE",
    "customData": {
      "liveConfigID": "MANIFEST_URL",
      "networkCode": "NETWORK-CODE",
      "customAssetKey": "CUSTOM_ASSET_KEY",
      "oAuthToken": "API_KEY"
    }
  }
}

このカスタム読み込みリクエストをレシーバーに送信して、残りの手順をテストできます。

基本的な CAF レシーバーを作成する

CAF SDK カスタム ウェブ レシーバー ガイドの説明に沿って、カスタム ウェブ レシーバーを作成します。

レシーバーのコードは次のようになります。

<html>
<head>
  <script
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    // ...
  </script>
</body>
</html>

IMA DAI SDK をインポートしてプレーヤー マネージャーを入手する

スクリプトが CAF を読み込んだ直後に、IMA DAI SDK for CAF をウェブ レシーバーにインポートするためのスクリプトタグを追加します。レシーバーを開始する前に、スクリプトタグでレシーバー コンテキストとプレーヤー マネージャーを定数として格納します。

<html>
<head>
  <script
      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 を初期化する

IMA 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 に渡される前に、LOAD メッセージ インターセプタでストリーム リクエストを作成します。

    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    /**
     * Creates a livestream request object for a pod serving stream.
     * @param {!LoadRequestData} castRequest The request object from the cast sender
     * @return {StreamRequest} an IMA stream request
     */
    const createStreamRequest = (castRequest) => { /* ... */};

    /**
     * Initates a DAI stream request for the final stream manifest.
     * @param {!LoadRequestData} castRequest The request object from the cast sender
     * @return {Promise<LoadRequestData>} a promise that resolves to an updated castRequest, containing the DAI stream manifest
     */
    const createDAICastRequest = (castRequest) => {
        return streamManager.requestStream(castRequest, createStreamRequest(castRequest))
          .then((castRequestWithPodStreamData) => {
            console.log('Successfully made DAI stream request.');
            // ...
            return castRequestWithPodStreamData;
          })
          .catch((error) => {
            console.log('Failed to make DAI stream request.');
            // CAF will automatically fallback to the content URL
            // that it can read from the castRequest object.
            return castRequest;
          });
    };

    playerManager.setMessageInterceptor(
        cast.framework.messages.MessageType.LOAD, createDAICastRequest);

    castContext.start();

ストリーム リクエストを作成する

CAF 読み込みリクエストに基づいて Pod サービング ストリームを作成する createStreamRequest 関数を完成させます。

    /**
     * Creates a livestream request object for a pod serving stream.
     * @param {!LoadRequestData} castRequest The request object from the cast sender
     * @return {StreamRequest} an IMA stream request
     */
    const createStreamRequest = (castRequest) => {

      const streamRequest = new google.ima.cast.dai.api.PodStreamRequest();
      const customData = castRequest.media.customData;

      streamRequest.customAssetKey = customData.customAssetKey;
      streamRequest.networkCode = customData.networkCode;
      streamRequest.apiKey = customData.apiKey;

      return streamRequest;
    };

コンテンツ URL をマニフェスト URL とストリーム ID に置き換える

ストリーム リクエストが成功した場合は、streamManager.getStreamId() を使用してストリームの ID を取得し、manifestUrl に挿入します。[[STREAMID]] は置き換えます。次に、既存の contentUrl を新しい manifestUrl に置き換えて、合成された連続配信広告を CAF が再生できるようにします。

    /**
     * Initates a DAI stream request for the final stream manifest.
     * @param {!LoadRequestData} castRequest The request object from the cast sender
     * @return {Promise<LoadRequestData>} a promise that resolves to an updated castRequest, containing the DAI stream manifest
     */
    const createDAICastRequest = (castRequest) => {
        return streamManager.requestStream(castRequest, createStreamRequest(castRequest))
          .then((castRequestWithPodStreamData) => {
            console.log('Successfully made DAI stream request.');
            const media = castRequestWithPodStreamData.media;
                const manifestUrl = media.customData.manifestUrl || "";
                if (manifestUrl) {
                    console.log('Replacing the contentURL with the manifest URL and stream ID');
                    const streamId = streamManager.getStreamId();
                    castRequestWithPodStreamData.media.contentUrl = manifestUrl.replace('[[STREAMID]]', streamId);

            return castRequestWithPodStreamData;
          })
          .catch((error) => {
            console.log('Failed to make DAI stream request.');
            // CAF will automatically fallback to the content URL
            // that it can read from the castRequest object.
            return castRequest;
          });
    };

キャスト アプリケーション フレームワークと IMA DAI SDK for CAF を使って、連続配信広告ストリームをリクエストして再生できるようになりました。