関心のある DAI ソリューションを選択する
フルサービス DAI
このガイドでは、IMA CAF DAI SDK を使用して DAI ストリームを再生する方法について説明します。完成したサンプル統合を確認または確認する場合は、サンプルをダウンロードしてください。
このガイドを使用する前に、Chromecast アプリケーション フレームワークのウェブ レシーバー プロトコルを理解しておいてください。このガイドは、メッセージ インターセプタや mediaInformation
オブジェクトなど、CAF レシーバーのコンセプトを基本レベルで理解していること、および Cast コマンド アンド コントロール ツールを使用して CAF 送信者をエミュレートできることを前提としています。
IMA DAI を使用するには、アド マネージャー 360 アカウントが必要です。アド マネージャー アカウントをお持ちの場合は、アカウント マネージャーに詳細をお問い合わせください。アド マネージャーへの登録については、アド マネージャーのヘルプセンターをご覧ください。
他のプラットフォームとの統合や IMA クライアントサイド SDK の使用については、Interactive Media Ads SDK をご覧ください。
CAF DAI の概要
IMA CAF DAI SDK を使用して DAI を実装するには、このガイドで説明するように、次の 2 つの主要コンポーネントが必要です。
StreamRequest
: Google の広告サーバーのストリーム リクエストを定義するオブジェクト。ストリーム リクエストには主に 2 種類があります。LiveStreamRequest
: アセットキー、省略可能な API キー、その他の省略可能なパラメータを指定します。VODStreamRequest
: コンテンツ ソース ID、動画 ID、省略可能な API キー、その他の省略可能なパラメータを指定します。
StreamManager
: 動画ストリームと IMA DAI SDK 間の通信を処理するオブジェクト(トラッキング ピングの発行、ストリーム イベントのパブリッシャーへの転送など)。
前提条件
- テストデバイスが登録されている Cast Developer Console アカウント。
- Cast デベロッパー コンソールに登録されているホスト型のウェブ レシーバー アプリ。このガイドで提供されているコードをホストするように変更できます。
- ウェブレシーバー アプリを使用するように構成された送信アプリ。この例では、Cast コマンド アンド コントロール ツールを送信元として使用しています。
送信者の MediaInfo オブジェクトを構成する
まず、送信側アプリの MediaInfo オブジェクトを構成して、次のフィールドを含めます。
contentId
|
このメディア アイテムの一意の識別子 | |
contentUrl
|
DAI StreamRequest がなんらかの理由で失敗した場合に読み込む代替ストリーム URL | |
streamType
|
ライブ配信の場合はこの値を「LIVE」に設定します。VOD ストリームの場合は、この値を「BUFFERED」に設定します。 | |
customData
|
assetKey
|
ライブ配信のみ。読み込むライブ配信を識別します |
contentSourceId
|
VOD ストリームのみ。リクエストされたストリームを含むメディアフィードを識別します。 | |
videoId
|
VOD ストリームのみ。指定されたメディアフィード内のリクエストされたストリームを識別します。 | |
ApiKey
|
IMA DAI SDK からストリーム URL を取得するために必要となるオプションの API キー | |
senderCanSkip
|
送信側のデバイスがスキップボタンを表示できるかどうかを受信側に知らせるためのブール値。これにより、スキップ可能な広告のサポートが可能になります。 |
Cast コマンド コントロール ツールでこれらの値を構成するには、[メディアを読み込む] タブをクリックし、カスタム読み込みリクエストのタイプを 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 SDKr をウェブレシーバーにインポートします。これは、スクリプトが 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 ストリーム マネージャーの初期化
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 の高度な機能については、他のガイドをご覧ください。または、サンプル レシーバ アプリケーションをダウンロードしてください。