Pilih solusi DAI yang Anda minati
Pod yang menayangkan DAI
IMA SDK menyederhanakan integrasi iklan multimedia ke dalam situs dan aplikasi Anda.
IMA SDK dapat meminta iklan dari server iklan apa pun yang sesuai dengan yang sesuai dengan VAST dan mengelola pemutaran iklan di aplikasi Anda.
Dengan IMA DAI SDK, aplikasi membuat permintaan streaming untuk iklan dan video konten baik untuk VOD maupun konten live. SDK kemudian menampilkan streaming video gabungan, sehingga Anda tidak perlu mengelola peralihan antara iklan dan video konten dalam aplikasi.
Panduan ini menunjukkan cara memutar streaming Penayangan Pod DAI Live, menggunakan IMA DAI SDK untuk CAF.
Sebelum menggunakan panduan ini, pahami protokol Penerima Web Framework Aplikasi Chromecast. Panduan ini mengasumsikan pemahaman dasar tentang konsep penerima CAF, seperti intersepsi pesan dan objek mediaInformation, serta pengetahuan tentang penggunaan alat Perintah dan Kontrol Cast, untuk mengemulasi pengirim CAF.
Untuk menggunakan penayangan pod IMA DAI, Anda harus bekerja sama dengan partner penayangan pod dan harus memiliki akun Ad Manager 360 Advanced. Jika Anda memiliki akun Ad Manager, hubungi Account Manager untuk mengetahui detail selengkapnya. Untuk mengetahui informasi tentang cara mendaftar ke Ad Manager, buka Pusat Bantuan Ad Manager.
Untuk mendapatkan informasi tentang cara berintegrasi dengan platform lain, atau cara menggunakan SDK sisi klien IMA, lihat Interactive Media Ads SDK.
Ringkasan Penayangan Pod IMA DAI
Mengimplementasikan penayangan pod menggunakan IMA CAF DAI SDK melibatkan dua komponen utama, yang ditunjukkan dalam panduan ini:
StreamRequest: Objek yang menentukan permintaan streaming ke server iklan Google. Permintaan menentukan Kode Jaringan, Kunci Aset Kustom, dan kunci API opsional, serta parameter opsional lainnya.StreamManager: Objek yang menangani komunikasi antara streaming video dan IMA DAI SDK, seperti mengaktifkan ping pelacakan dan meneruskan peristiwa streaming ke penayang.
Prasyarat
- Akun Konsol Developer Cast dengan perangkat pengujian terdaftar.
- Aplikasi penerima web yang dihosting dan terdaftar dengan Konsol Developer Cast Anda dan dapat diubah untuk menghosting kode yang diberikan oleh panduan ini.
- Aplikasi pengirim yang dikonfigurasi untuk menggunakan aplikasi penerima web Anda. Untuk tujuan contoh ini, gunakan alat Perintah dan Kontrol Cast sebagai pengirim.
Mengonfigurasi objek MediaInfo pengirim
Pertama, konfigurasikan objek MediaInfo aplikasi pengirim untuk menyertakan kolom berikut:
| Kolom | Konten | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
contentId
|
ID unik untuk item media ini.
CONTENT_ID |
||||||||||
contentUrl
|
Opsional. URL streaming cadangan untuk diputar jika streaming DAI gagal dimuat.
BACKUP_STREAM_URL |
||||||||||
contentType
|
Opsional. Mimetype streaming cadangan konten. Hanya diperlukan untuk aliran DASH.
CONTENT_STREAM_MIMETYPE |
||||||||||
streamType
|
Literal atau konstanta string yang digunakan untuk nilai ini bervariasi menurut platform pengirim. | ||||||||||
customData
|
Kolom customData berisi penyimpanan nilai kunci dari kolom wajib diisi tambahan.
|
Berikut adalah beberapa contoh kode untuk membantu Anda memulai:
Web
Untuk mengonfigurasi nilai ini di pengirim web Cast, buat
objek MediaInfo
dengan data yang diperlukan terlebih dahulu, lalu buat permintaan
pemuatan ke penerima web.
// Create mediaInfo object
const mediaInfo = new chrome.cast.media.MediaInfo("CONTENT_ID");
mediaInfo.contentUrl = "BACKUP_STREAM_URL";
mediaInfo.contentType = "CONTENT_STREAM_MIMETYPE";
mediaInfo.streamType = chrome.cast.media.StreamType.LIVE;
mediaInfo.customData = {
manifestUrl: "MANIFEST_URL",
networkCode: "NETWORK-CODE",
customAssetKey: "CUSTOM_ASSET_KEY",
apiKey: "API_KEY"
};
// Make load request to cast web receiver
const castSession = cast.framework.CastContext.getInstance().getCurrentSession();
const request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
() => { console.log('Load succeed'); },
(errorCode) => { console.log('Error code: ' + errorCode); });
Android
Untuk mengonfigurasi nilai ini di pengirim web Cast, buat objek MediaInfo dengan data yang diperlukan terlebih dahulu, lalu buat permintaan pemuatan ke penerima web.
JSONObject customData = new JSONObject()?
.put("manifestUrl", "MANIFEST_URL")
.put("networkCode", "NETWORK-CODE")
.put("customAssetKey", "CUSTOM_ASSET_KEY")
.put("apiKey", "API_KEY");
MediaInfo mediaInfo = MediaInfo.Builder("CONTENT_ID")
.setContentUrl("BACKUP_STREAM_URL")
.setContentType("CONTENT_STREAM_MIMETYPE")
.setStreamType(MediaInfo.STREAM_TYPE_LIVE)
.setCustomData(customData)
.build();
RemoteMediaClient remoteMediaClient = mCastSession.getRemoteMediaClient();
remoteMediaClient.load(new MediaLoadRequestData.Builder().setMediaInfo(mediaInfo).build());
iOS (Obj-C)
Untuk mengonfigurasi nilai ini di pengirim web Cast, buat
objek GCKMediaInformation
dengan data yang diperlukan terlebih dahulu, lalu buat permintaan
pemuatan ke penerima web.
NSURL url = [NSURL URLWithString:@"BACKUP_STREAM_URL"];
NSDictionary *customData = @{
@"manifestUrl": @"MANIFEST_URL",
@"networkCode": @"NETWORK-CODE",
@"customAssetKey": @"CUSTOM_ASSET_KEY",
@"apiKey": @"API_KEY"};
mediaInfoBuilder.customData = customData;
GCKMediaInformationBuilder *mediaInfoBuilder =
[[GCKMediaInformationBuilder alloc] initWithContentID: @"CONTENT_ID"];
mediaInfoBuilder.contentURL = url;
mediaInfoBuilder.contentType = @"CONTENT_STREAM_MIMETYPE";
mediaInfoBuilder.streamType = GCKMediaStreamTypeLive;
mediaInfoBuilder.customData = customData;
self.mediaInformation = [mediaInfoBuilder build];
GCKRequest *request = [self.sessionManager.currentSession.remoteMediaClient loadMedia:self.mediaInformation];
if (request != nil) {
request.delegate = self;
}
iOS (Swift)
Untuk mengonfigurasi nilai ini di pengirim web Cast, buat
objek GCKMediaInformation
dengan data yang diperlukan terlebih dahulu, lalu buat permintaan
pemuatan ke penerima web.
let url = URL.init(string: "BACKUP_STREAM_URL")
guard let mediaURL = url else {
print("invalid mediaURL")
return
}
let customData = [
"liveConfigID": "MANIFEST_URL",
"networkCode": "NETWORK-CODE",
"customAssetKey": "CUSTOM_ASSET_KEY",
"region": "API_KEY"
]
let mediaInfoBuilder = GCKMediaInformationBuilder.init(contentId: "CONTENT_ID")
mediaInfoBuilder.contentURL = mediaUrl
mediaInfoBuilder.contentType = @"CONTENT_STREAM_MIMETYPE"
mediaInfoBuilder.streamType = GCKMediaStreamType.Live
mediaInfoBuilder.customData = customData
mediaInformation = mediaInfoBuilder.build()
guard let mediaInfo = mediaInformation else {
print("invalid mediaInformation")
return
}
if let request = sessionManager.currentSession?.remoteMediaClient?.loadMedia
(mediaInfo) {
request.delegate = self
}
Alat CAC
Untuk mengonfigurasi nilai ini di alat Cast Command and Control, klik tab Load Media, lalu tetapkan jenis permintaan pemuatan kustom ke LOAD. Kemudian, ganti data JSON di area teks dengan JSON ini:
{
"media": {
"contentId": "CONTENT_ID",
"contentUrl": "BACKUP_STREAM_URL",
"contentType": ""CONTENT_STREAM_MIMETYPE"",
"streamType": "LIVE",
"customData": {
"liveConfigID": "MANIFEST_URL",
"networkCode": "NETWORK-CODE",
"customAssetKey": "CUSTOM_ASSET_KEY",
"oAuthToken": "API_KEY"
}
}
}
Permintaan pemuatan kustom ini dapat dikirim ke penerima untuk menguji langkah-langkah lainnya.
Membuat penerima CAF dasar
Buat penerima web kustom, seperti yang terlihat dalam Panduan Penerima Web Khusus CAF SDK.
Kode penerima akan terlihat seperti ini:
<html>
<head>
<script
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
</script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
// ...
</script>
</body>
</html>
Mengimpor IMA DAI SDK dan mendapatkan Pengelola Pemutar
Tambahkan tag skrip untuk mengimpor IMA DAI SDK untuk CAF ke penerima web Anda, tepat setelah CAF pemuatan skrip. Dalam tag skrip, simpan konteks penerima dan pengelola pemutar sebagai konstanta sebelum memulai penerima.
<html>
<head>
<script
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>
Melakukan inisialisasi IMA Stream Manager
Lakukan inisialisasi IMA Stream Manager.
<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>
Membuat Load Interceptor Stream Manager
Sebelum item media diteruskan ke CAF, buat permintaan streaming di interseptor pesan LOAD.
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
/**
* Creates a livestream request object for a pod serving stream.
* @param {!LoadRequestData} castRequest The request object from the cast sender
* @return {StreamRequest} an IMA stream request
*/
const createStreamRequest = (castRequest) => { /* ... */};
/**
* Initates a DAI stream request for the final stream manifest.
* @param {!LoadRequestData} castRequest The request object from the cast sender
* @return {Promise<LoadRequestData>} a promise that resolves to an updated castRequest, containing the DAI stream manifest
*/
const createDAICastRequest = (castRequest) => {
return streamManager.requestStream(castRequest, createStreamRequest(castRequest))
.then((castRequestWithPodStreamData) => {
console.log('Successfully made DAI stream request.');
// ...
return castRequestWithPodStreamData;
})
.catch((error) => {
console.log('Failed to make DAI stream request.');
// CAF will automatically fallback to the content URL
// that it can read from the castRequest object.
return castRequest;
});
};
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, createDAICastRequest);
castContext.start();
Membuat permintaan streaming
Selesaikan fungsi createStreamRequest untuk membuat aliran penayangan pod berdasarkan permintaan pemuatan CAF.
/**
* Creates a livestream request object for a pod serving stream.
* @param {!LoadRequestData} castRequest The request object from the cast sender
* @return {StreamRequest} an IMA stream request
*/
const createStreamRequest = (castRequest) => {
const streamRequest = new google.ima.cast.dai.api.PodStreamRequest();
const customData = castRequest.media.customData;
streamRequest.customAssetKey = customData.customAssetKey;
streamRequest.networkCode = customData.networkCode;
streamRequest.apiKey = customData.apiKey;
return streamRequest;
};
Ganti URL konten dengan URL manifes dan ID streaming
Jika permintaan streaming Anda berhasil, gunakan streamManager.getStreamId() untuk
mengambil ID streaming dan memasukkannya ke manifestUrl Anda, dengan mengganti
[[STREAMID]]. Kemudian, ganti contentUrl yang ada dengan manifestUrl
baru sehingga CAF memutar livestream dengan pod iklan yang digabungkan.
/**
* Initates a DAI stream request for the final stream manifest.
* @param {!LoadRequestData} castRequest The request object from the cast sender
* @return {Promise<LoadRequestData>} a promise that resolves to an updated castRequest, containing the DAI stream manifest
*/
const createDAICastRequest = (castRequest) => {
return streamManager.requestStream(castRequest, createStreamRequest(castRequest))
.then((castRequestWithPodStreamData) => {
console.log('Successfully made DAI stream request.');
const media = castRequestWithPodStreamData.media;
const manifestUrl = media.customData.manifestUrl || "";
if (manifestUrl) {
console.log('Replacing the contentURL with the manifest URL and stream ID');
const streamId = streamManager.getStreamId();
castRequestWithPodStreamData.media.contentUrl = manifestUrl.replace('[[STREAMID]]', streamId);
return castRequestWithPodStreamData;
})
.catch((error) => {
console.log('Failed to make DAI stream request.');
// CAF will automatically fallback to the content URL
// that it can read from the castRequest object.
return castRequest;
});
};
Anda kini dapat meminta dan memutar streaming yang menayangkan pod dengan Framework Aplikasi Transmisi dan IMA DAI SDK untuk CAF.