DAI 向け IMA SDK を使ってみる

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

IMA SDK を使用すると、マルチメディア広告をウェブサイトやアプリに簡単に統合できます。IMA SDK は、 VAST 準拠の広告サーバーから広告をリクエストし、アプリでの広告再生を管理できます。IMA DAI SDK を使用すると、アプリは広告とコンテンツ動画（VOD またはライブ コンテンツ）のストリーム リクエストを送信します。SDK は、結合された動画ストリームを返すため、アプリ内で広告動画とコンテンツ動画の切り替えを管理する必要はありません。

ご希望の DAI ソリューションを選択してください。

• フルサービス DAI で設定する: Google アド マネージャーが広告を選択し、コンテンツ ストリームに直接挿入します。
• 連続広告配信 DAI を設定する: Google アド マネージャーは、動画プレーヤーにスティッチまたは読み込み可能な連続配信広告を提供します。

Cloud Stitching API Live Cloud Stitching API VOD

Google Cloud Video Stitcher API で登録された VOD ストリームの再生

このガイドでは、IMA DAI SDK for HTML5 を使用して広告をリクエストし、 Google Cloud VOD ストリーム セッション。 再生する方法を説明します。

このガイドでは、IMA DAI のスタートガイドの基本的な例を拡張します。

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

統合のサンプルを確認するには、HLS または DASH の Cloud Video Stitcher の例をダウンロードしてください。

注: HTML5 用の IMA DAI SDK は HLS ストリームと DASH ストリームの両方に対応していますが、それぞれを再生するには、HLS.js や DASH.js などの異なるメディア プレーヤーまたは拡張機能が必要で、実装方法も異なります。

このガイドでは、HLS.js と IMA DAI SDK を構成して HLS ストリームを再生する方法について説明します。DASH の実装の違いに関する重要な注意事項も記載されています。

IMA で DASH DAI ストリームを実装する出発点として、IMA DASH.js サンプルアプリをご覧ください。

Google Cloud プロジェクトの設定

Google Cloud プロジェクトを設定し、プロジェクトにアクセスするようにサービス アカウントを構成する。

IMA SDK で使用する次の変数を入力します。

ロケーション

VOD 構成が作成された Google Cloud リージョン: LOCATION

プロジェクト番号

Video Stitcher API を使用する Google Cloud プロジェクト番号: PROJECT_NUMBER

OAuth トークン

Video Stitcher ユーザーロールを持つサービス アカウントの有効期間が短い OAuth トークン:

OAUTH_TOKEN

有効期間が短い OAuth トークンの作成の詳細を確認します。OAuth トークンは、期限が切れていない限り、複数のリクエストで再利用できます。

ネットワーク コード

広告をリクエストするためのアド マネージャー ネットワーク コード: NETWORK_CODE

VOD 構成 ID

VOD ストリームの VOD 構成 ID: VOD_CONFIG_ID

VOD 構成 ID の作成の詳細については、Cloud Stitching の VOD 構成ガイドをご覧ください。

開発環境を構成する

重要なポイント: IMA DAI の VideoStitcherVodStreamRequest クラスは、HLS ストリームとマルチピリオド DASH ストリームの両方をサポートしています。ミッドロール挿入点は DASH 期間の間にのみ挿入されます。

IMA サンプルアプリでは、HLS ストリーム リクエストのみがデモされます。VideoStitcherVodStreamRequest クラスを構築するときに、引き続き DASH ストリームを使用できます。DASH 対応プレーヤーをセットアップする際は、動画のメタデータを StreamManager.processMetadata() に提供できる、動画プレーヤーの進行状況イベントのリスナーをセットアップする必要があります。この関数は次の 3 つのパラメータを取ります。

1. type: HLS ストリームの場合は 'ID3'、DASH ストリームの場合は 'urn:google:dai:2018' に設定する必要がある文字列。

2. data: DASH イベント メッセージの場合、これはメッセージ データ文字列です。

3. timestamp: DASH ストリームのイベント メッセージの開始時間を示す数値。

プレーヤー イベントが提供できる限り、できるだけ早く、できるだけ頻繁にメタデータを送信します。メタデータが欠落しているか、正しくない場合、IMA DAI SDK が広告イベントをトリガーせず、広告イベントが正しくレポートされない可能性があります。

HTML5 用の IMA DAI の例をダウンロードし、hls_js/simple サンプル zip ファイルを新しいフォルダに解凍します。この例は、テスト目的でローカルにホストできるウェブアプリです。

サンプルをローカルでホストするには、新しいフォルダに移動し、次の Python コマンドを実行してウェブサーバーを起動します。

python3 -m http.server 8000

http.server は Python 3.x でのみ使用できます。Apache HTTP Server や Node JS などの他のウェブサーバーも使用できます。

ウェブブラウザを開き、localhost:8000 に移動して動画プレーヤーを表示します。ブラウザが HLS.js ライブラリをサポートしている必要があります。

すべてが正常に動作している場合は、動画プレーヤーの [再生] ボタンをクリックすると、30 秒ごとにミッドロール挿入点があるショート フィルム「Tears of Steel」が再生されます。

VOD ストリームのリクエスト

サンプル ストリームを広告合成された VOD ストリームに置き換えるには、VideoStitcherVodStreamRequest クラスを使用して、Google アド マネージャーで広告セッションを自動的に作成します。Google アド マネージャーの UI を使用して、モニタリングとデバッグのために、生成された DAI セッションを特定できます。

既存のサンプルには、VOD ストリームまたはライブ配信をリクエストする関数があります。Google Cloud Video Stitcher API と連携させるには、VideoStitcherVodStreamRequest オブジェクトを返す新しい関数を追加する必要があります。

次に例を示します。

// StreamManager which will be used to request DAI streams.
let streamManager;
...

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(
    videoElement,
    adUiElement
  );
  streamManager.addEventListener(
    [
      google.ima.dai.api.StreamEvent.Type.LOADED,
      google.ima.dai.api.StreamEvent.Type.ERROR,
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
    ],
    onStreamEvent, false);

  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  videoElement.addEventListener('pause', () => {
    playButton.style.display = "block";
  });

  playButton.addEventListener('click', initiatePlayback);
}

function initiatePlayback() {
  requestVodVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
  streamRequest.vodConfigId = 'VOD_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';

  streamManager.requestStream(streamRequest);
}

ページを再読み込みします。その後、カスタム VOD ストリームをリクエストして再生できます。

（省略可）ストリーミング セッション オプションを追加する

VideoStitcherVodStreamRequest.videoStitcherSessionOptions を使用して、デフォルトの Cloud Video Stitcher API 構成をオーバーライドするセッション オプションを追加することで、ストリーム リクエストをカスタマイズします。認識されないオプションを指定すると、Cloud Video Stitcher API により HTTP 400 エラーの応答が返されます。詳しくは、トラブルシューティング ガイドをご覧ください。

たとえば、次のコード スニペットを使用してマニフェスト オプションをオーバーライドできます。このコードは、ビットレートを低い順に並べた 2 つのストリーム マニフェストをリクエストします。

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

クリーンアップ

Google Cloud Video Stitcher API を使用して VOD ストリームをホストし、IMA DAI SDK for HTML5 を使用してリクエストしたので、配信リソースをクリーンアップすることが重要です。

VOD のクリーンアップ ガイドに沿って、不要なリソースとアセットを削除します。

最後に、Python 3 ウェブサーバーを起動したターミナル ウィンドウで、ctrl+C コマンドを使用してローカル サーバーを終了します。