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 プロジェクトの設定
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": {
"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
コマンドを使用してローカル サーバーを終了します。