ご希望の DAI ソリューションを選択する
フルサービス DAI
このガイドでは、IMA CAF DAI SDK を使って DAI ストリームを再生する方法を説明します。完成した統合のサンプルを見る場合は、サンプルをダウンロードしてください。
このガイドを使用する前に、Chromecast アプリケーション フレームワークのウェブ レシーバー プロトコルについて理解しておいてください。このガイドは、メッセージ インターセプタや mediaInformation
オブジェクトなどの CAF レシーバのコンセプトと、Cast コマンド&コントロール ツールを使用して CAF 送信者をエミュレートするための基本的な知識があることを前提としています。
IMA DAI を使用するには、アド マネージャー 360 アカウントが必要です。アド マネージャー アカウントをお持ちの場合は、アカウント マネージャーに詳細をお問い合わせください。アド マネージャーへのお申し込みについて詳しくは、アド マネージャー ヘルプセンターをご覧ください。
他のプラットフォームとの統合や、IMA クライアントサイドの SDK の使用方法については、インタラクティブ メディア広告 SDK をご覧ください。
CAF DAI の概要
IMA CAF DAI SDK を使って DAI を実装するには、このガイドで説明するように、次の 2 つの主要コンポーネントを使用します。
StreamRequest
: Google の広告サーバーへのストリーム リクエストを定義するオブジェクト。ストリーム リクエストには主に 2 つの種類があります。LiveStreamRequest
: アセットキー、オプションの API キー、その他の省略可能なパラメータを指定します。VODStreamRequest
: コンテンツ ソース ID、動画 ID、オプションの API キー、その他のオプション パラメータを指定します。
StreamManager
: トラッキング ping の配信やパブリッシャーへのストリーム イベントの転送など、動画ストリームと IMA DAI SDK 間の通信を処理するオブジェクト。
前提条件
- テストデバイスが登録されている Cast Developer Console アカウント
- Cast Developer Console に登録され、このガイドに記載されているコードをホストするように変更できる、ホストされるウェブ レシーバー アプリ。
- ウェブ レシーバー アプリを使用するように構成された送信アプリ。この例では、Cast コマンド&コントロール ツールを送信者として使用しています。
送信者の MediaInfo オブジェクトを構成する
まず、次のフィールドを含めるように送信側のアプリの MediaInfo オブジェクトを設定します。
contentId
|
このメディア アイテムの一意の識別子です。 | |
contentUrl
|
なんらかの理由で DAI StreamRequest が失敗した場合に読み込まれる代替ストリーム URL | |
streamType
|
ライブ ストリームの場合は、この値は「LIVE」に設定する必要があります。VOD ストリームの場合は、この値は「BUFFERED」に設定する必要があります | |
customData
|
assetKey
|
ライブ配信のみ。読み込むライブストリームの ID を指定します。 |
contentSourceId
|
VOD ストリームのみ。リクエストされたストリームを含むメディア フィードを指定します。 | |
videoId
|
VOD ストリームのみ。指定されたメディア フィード内のリクエストされたストリームを識別します。 | |
ApiKey
|
IMA DAI SDK からストリーム URL を取得するために必要な API キー(省略可) | |
senderCanSkip
|
送信デバイスにスキップボタンを表示する機能があるかどうかを受信側に知らせるブール値。これにより、スキップ可能な広告のサポートが有効になります。 |
キャスト コマンド&コントロール ツールでこれらの値を構成するには、[Load Media](メディアの読み込み)タブをクリックし、カスタムの読み込みリクエスト タイプを LOAD
に設定します。次に、テキスト領域の JSON データを次のいずれかの JSON オブジェクトに置き換えます。
ライブ
{
"media": {
"contentId": "bbb",
"contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8",
"streamType": "LIVE",
"customData": {
"assetKey": "sN_IYUG8STe1ZzhIIE_ksA",
"ApiKey": "",
"senderCanSkip": true
}
},
"credentials": "testCredentials"
}
VOD
{
"media": {
"contentId": "tos",
"contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/tos.m3u8",
"streamType": "BUFFERED",
"customData": {
"contentSourceId": "2548831",
"videoId": "tears-of-steel",
"ApiKey": "",
"senderCanSkip": true
}
},
"credentials": "testCredentials"
}
このカスタム読み込みリクエスト オブジェクトを受信機に送信して、次の手順をテストできます。
基本的な CAF レシーバーを作成する
CAF SDK 基本レシーバガイドに沿って、基本的なウェブ レシーバを作成します。
レシーバーのコードは次のようになります。
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
</script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
cast.framework.CastReceiverContext.getInstance().start();
</script>
</body>
</html>
IMA DAI SDK をインポートしてプレーヤー マネージャーを入手する
スクリプトが CAF を読み込んだ直後に、IMA DAI SDK for CAF をウェブ レシーバーにインポートするためのスクリプトタグを追加します。CAF DAI SDK は常時使用可能であるため、特定のバージョンを設定する必要はありません。後続のスクリプトタグで、レシーバーを開始する前に、レシーバー コンテキストとプレーヤー マネージャーを定数として保存します。
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
castContext.start();
</script>
</body>
</html>
IMA Stream Manager を初期化する
CAF DAI SDK のストリーム マネージャーを初期化します。
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
castContext.start();
</script>
</body>
</html>
読み込みメッセージ インターセプタを作成する
CAF DAI SDK は CAF 読み込みメッセージ インターセプタを使用してストリーム リクエストを行い、コンテンツ URL を最終的な DAI ストリームに置き換えます。メッセージ インターセプタは streamManager.requestStream() を呼び出します。これにより、ミッドロール挿入点の設定、ストリームのリクエスト、既存の contentURL
の置換が行われます。
読み込みメッセージ インターセプタは 1 つしか存在しないため、アプリでインターセプタを使用する必要がある場合は、同じコールバックにカスタム関数を組み込む必要があります。
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
const getStreamRequest = (request) => null;
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, (request) => {
return streamManager.requestStream(request, getStreamRequest(request))
.then((request) => {
this.broadcast('Stream request successful.');
return Promise.resolve(request);
})
.catch((error) => {
this.broadcast('Stream request failed.');
return Promise.resolve(request);
});
});
castContext.start();
</script>
</body>
</html>
ストリーム リクエストを作成する
CAF DAI 統合を完了するには、送信者からの mediaInfo
オブジェクトに含まれるデータを使用してストリーム リクエストを作成する必要があります。
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
const getStreamRequest = (request) => {
const imaRequestData = request.media.customData;
let streamRequest = null;
if (imaRequestData.assetKey) {
// Live stream
streamRequest = new google.ima.cast.dai.api.LiveStreamRequest();
streamRequest.assetKey = imaRequestData.assetKey;
} else if (imaRequestData.contentSourceId) {
// VOD stream
streamRequest = new google.ima.cast.dai.api.VODStreamRequest();
streamRequest.contentSourceId = imaRequestData.contentSourceId;
streamRequest.videoId = imaRequestData.videoId;
}
if (streamRequest && imaRequestData.ApiKey) {
streamRequest.ApiKey = imaRequestData.ApiKey;
}
if (streamRequest && imaRequestData.senderCanSkip) {
streamRequest.senderCanSkip = imaRequestData.senderCanSkip;
}
return streamRequest;
};
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, (request) => {
return streamManager.requestStream(request, getStreamRequest(request))
.then((request) => {
return Promise.resolve(request);
})
.catch((error) => {
this.broadcast('Stream request failed.');
return Promise.resolve(request);
});
});
castContext.start();
</script>
</body>
</html>
Google の CAF DAI SDK を使用して DAI ストリームをリクエストして再生できるようになりました。 より高度な SDK 機能の詳細については、他のガイドを参照するか、サンプル レシーバアプリをダウンロードしてください。