プロジェクトで Video Stitcher API を有効にするには、アカウント担当者または営業担当者に詳細をお問い合わせください。

HTML5 クライアントで IMA DAI SDK を使用する

Google Cloud Video Stitcher API で登録されたライブ配信を再生する

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

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

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

Google Cloud プロジェクトの設定

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 のシンプルなサンプルを新しいフォルダに抽出します。この例は、テスト目的でローカルでホストできるウェブアプリです。

サンプルをローカルでホストするには、新しいフォルダに移動し、次の 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": {
    "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 は、ミッドロール挿入点ごとに広告タグから取得された広告を挿入します。ミッドロール挿入点は、マニフェストで広告マーカーを使用して示されます。広告マーカーはライブ配信エンコーダによって挿入されます。

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

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

クリーンアップ

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

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

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

Chromecast

iOS