このページは Cloud Translation API によって翻訳されました。

始める

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

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

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

CAF DAI の概要

IMA CAF DAI SDK を使用した DAI の実装には、次の 2 つの主要コンポーネントが必要です。このガイドでは、これらのコンポーネントについて解説します。

StreamRequest: Google の広告サーバーへのストリームリクエストを定義するオブジェクト。StreamRequest には主に 2 つの種類があります。
- LiveStreamRequest: アセットキー、API キー（省略可）、その他のパラメータを指定します。
- VODStreamRequest: コンテンツソース ID、動画 ID、API キー（省略可）と、その他の省略可能なパラメータを指定します。
StreamManager: トラッキング ping の呼び出しやパブリッシャーへのストリームイベントの転送など、動画ストリームと IMA DAI SDK 間の通信を処理するオブジェクト。

前提条件

始める前に、次のものが必要になります。

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

1. センダーの MediaInfo オブジェクトを構成する

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

contentId		このメディアアイテムの一意の識別子です。
contentUrl		DAI StreamRequest がなんらかの理由で失敗した場合に読み込む代替ストリーム URL です。
streamType		ライブ配信の場合、この値は「LIVE」に設定する必要があります。VOD ストリームの場合、この値は「BUFFERED」に設定する必要があります。
customData	assetKey	ライブ配信のみ。読み込むライブストリームを指定します。
	contentSourceId	VOD ストリーミング限定。リクエストされたストリームを含むメディアフィードを特定します。
	videoId	VOD ストリーミング限定。指定したメディアフィード内で、リクエストされたストリームを示します。
	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": "sN_IYUG8STe1ZzhIIE_ksA",
      "ApiKey": "",
      "senderCanSkip": true
    }
  },
  "credentials": "testCredentials"
}

ビデオオンデマンド

{
  "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 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>

3. 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>

4. 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>

5. 読み込みメッセージのインターセプタを作成する

CAF DAI SDK は CAF 読み込みメッセージインターセプターを使用してストリームリクエストを行い、コンテンツ URL を最終的な 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 の高度な機能について詳しくは、他のガイドをご覧になるか、サンプルレシーバーアプリケーションをダウンロードしてください。