プロダクトに関するご意見やフィードバックをお寄せいただくには、Google 広告および測定のコミュニティサーバーの公式アドマネージャー Discord チャンネルにご参加ください。

Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

フルサービス DAI を設定する

プラットフォームを選択: HTML5 Android iOS tvOS Cast Roku

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

このガイドを使用する前に、Chromecast Application Framework のウェブレシーバープロトコルを理解しておいてください。このガイドは、メッセージインターセプタや mediaInformation オブジェクトなどの CAF レシーバーのコンセプトに関する基本的な知識と、Cast コマンド＆コントロールツールを使用して 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 Developer Console に登録され、このガイドで提供されるコードをホストするように変更できる、ホスト型のウェブレシーバーアプリ。
ウェブレシーバーアプリを使用するように構成された送信側アプリ。この例では、送信側として 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`	送信側デバイスにスキップボタンを表示する機能があるかどうかを受信側に知らせるブール値。スキップ可能な広告のサポートを有効にします。

Cast コマンド＆コントロールツールでこれらの値を構成するには、[Load Media] タブをクリックし、カスタム読み込みリクエストタイプを 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 をインポートして Player Manager を取得する

スクリプトタグを追加して、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 のストリームマネージャーを初期化します。

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