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

IMA DAI SDK スタートガイド

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

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

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

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

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

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

統合サンプルを表示または確認するには、HLS または DASH の Cloud 動画ステッチャーの例をダウンロードします。

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 スティッチングで VOD 構成を作成するガイドをご覧ください。

開発環境を構成する

IMA サンプルアプリでは、HLS ストリームリクエストのみが示されています。VideoStitcherVodStreamRequest クラスの作成時に DASH ストリームを使用できます。DASH 対応プレーヤーを設定するときに、動画プレーヤーの進行状況イベントのリスナーを設定し、動画のメタデータを StreamManager.processMetadata() に提供できるようにする必要があります。この関数は次の 3 つのパラメータを取ります。

type: HLS ストリームの場合は 'ID3'、DASH ストリームの場合は 'urn:google:dai:2018' に設定する必要がある文字列。
data: DASH イベントメッセージの場合、これはメッセージデータ文字列です。
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": {
    "includeRenditions": [
      {"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
      {"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
    ],
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

クリーンアップ

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

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

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