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

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

DAI 用 IMA SDK を設定する

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

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

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

このガイドでは、HTML5 向け IMA DAI SDK を使用して Google Cloud Video Stitcher API に登録されたイベントのライブストリームをリクエストして再生する方法と、再生中にミッドロール挿入点を挿入する方法について説明します。

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

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

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

Google Cloud プロジェクトの設定

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

独自のコンテンツライブストリームまたはテストライブストリームを使用して、ライブ配信イベントの構成を作成します。このガイドでは、HLS ストリームを想定しています。

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

ロケーション

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

プロジェクト番号

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

OAuth トークン

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

OAUTH_TOKEN

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

ネットワークコード

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

ライブ構成 ID: ライブ配信イベントの作成時に指定したライブ構成 ID: LIVE_CONFIG_ID
カスタムアセットキー: Video Stitcher API を使用してライブ配信イベントの設定を作成するのプロセス中に生成されるアドマネージャーのカスタムアセットキー: CUSTOM_ASSET_KEY

開発環境を構成する

IMA サンプルアプリでは、HLS ストリームリクエストのみがデモされます。VideoStitcherLiveStreamRequest クラスを構築する際に、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 サンプルを新しいフォルダに抽出します。この例は、テスト用にローカルでホストできるウェブアプリです。

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

python3 -m http.server 8000

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

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

すべてが正常に機能している場合、動画プレーヤーの [再生] ボタンをクリックすると、短い広告の後にショートフィルム「Tears of Steel」が始まります。このコンテンツは、ビデオオンデマンド（VOD）ストリームを使用して配信されます。

ライブ配信をリクエストする

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

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

次に例を示します。

// StreamManager which will be used to request ad-enabled 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() {
  requestVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...

function requestVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
  streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';
  streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';

  streamManager.requestStream(streamRequest);
}

ローカルテストで、ライブ配信ファイルが Cloud Storage バケットにある場合は、配信元 http://localhost:8000 の CORS を有効にする必要があります。

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

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

VideoStitcherLiveStreamRequest.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 は、ミッドロール挿入点ごとに広告タグから取得された広告を挿入します。ミッドロール挿入点は、マニフェストで広告マーカーを使用して示されます。広告マーカーはライブストリームエンコーダによって挿入されます。

独自のライブストリームを使用している場合は、広告マーカーを挿入する必要があります。サポートされている HLS と DASH の広告マーカーについて詳しくは、広告マーカーのドキュメントをご覧ください。
Google Cloud Livestream API を使用してライブストリームを作成した場合は、ミッドロール挿入点のチャンネルイベントを挿入します。

広告は、ミッドロール挿入点が挿入された直後に再生されます。

クリーンアップ

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

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

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