Pilih solusi DAI yang Anda minati
DAI layanan penuh
Panduan ini menunjukkan cara memutar streaming DAI, menggunakan IMA CAF DAI SDK. Jika Anda ingin melihat atau mengikuti contoh integrasi yang telah selesai, download contohnya.
Sebelum menggunakan panduan ini, pastikan Anda memahami protokol Penerima Web
Framework Aplikasi Chromecast. Panduan
ini mengasumsikan tingkat dasar pengetahuan tentang konsep penerima CAF, seperti
intersepsi
pesan
dan
objek mediaInformation
, serta pengetahuan dalam menggunakan alat Perintah dan Kontrol
Cast untuk mengemulasi pengirim CAF.
Untuk menggunakan IMA DAI, Anda harus memiliki akun Ad Manager 360. Jika Anda memiliki akun Ad Manager, hubungi Account Manager Anda untuk mengetahui detail selengkapnya. Untuk mengetahui informasi tentang pendaftaran 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 CAF DAI
Mengimplementasikan DAI menggunakan IMA CAF DAI SDK melibatkan dua komponen utama seperti yang ditunjukkan dalam panduan ini:
StreamRequest
: Objek yang menentukan permintaan streaming ke server iklan Google. Permintaan streaming terdiri dari dua variasi utama:LiveStreamRequest
: menentukan Kunci Aset, dan kunci API opsional, serta parameter opsional lainnya.VODStreamRequest
: Menentukan ID Sumber Konten, ID Video, 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 Cast Developer Console 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. Contoh ini menggunakan alat Perintah dan Kontrol Cast sebagai pengirim.
Mengonfigurasi objek MediaInfo pengirim
Pertama, konfigurasikan objek MediaInfo aplikasi pengirim untuk menyertakan kolom berikut:
contentId
|
ID unik untuk item media ini | |
contentUrl
|
URL streaming penggantian yang akan dimuat jika StreamRequest DAI gagal karena alasan apa pun | |
streamType
|
Untuk live stream, nilai ini harus ditetapkan ke `LIVE`. Untuk streaming VOD, nilai ini harus ditetapkan ke `BUFFERED` | |
customData
|
assetKey
|
Khusus live stream. Mengidentifikasi livestream yang akan dimuat |
contentSourceId
|
Khusus streaming VOD. Mengidentifikasi feed media yang berisi aliran data yang diminta. | |
videoId
|
Khusus streaming VOD. Mengidentifikasi aliran data yang diminta dalam feed media yang ditentukan. | |
ApiKey
|
Kunci API opsional yang dapat diperlukan untuk mengambil URL streaming dari IMA DAI SDK | |
senderCanSkip
|
Nilai boolean untuk memberi tahu penerima apakah perangkat pengirim memiliki kemampuan untuk menampilkan tombol lewati, yang memungkinkan dukungan untuk iklan yang dapat dilewati |
Untuk mengonfigurasi nilai ini pada alat perintah dan kontrol transmisi, klik tab Load
Media, lalu tetapkan jenis permintaan pemuatan kustom ke LOAD
. Kemudian, ganti data JSON di area teks dengan salah satu objek JSON berikut:
LIVE
{
"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"
}
Objek permintaan pemuatan kustom ini dapat dikirim ke penerima untuk menguji langkah-langkah berikut.
Membuat penerima CAF dasar
Dengan mengikuti Panduan Penerima Dasar CAF SDK, buat penerima web dasar.
Kode penerima akan terlihat seperti ini:
<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>
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. CAF DAI SDK bersifat evergreen, sehingga Anda tidak perlu menetapkan versi tertentu. Kemudian di tag skrip yang mengikuti, simpan konteks penerima dan pengelola pemutar sebagai konstanta sebelum memulai penerima.
<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>
Melakukan inisialisasi IMA Stream Manager
Lakukan inisialisasi 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>
Membuat intersepsi pemuatan pesan
CAF DAI SDK menggunakan interseptor
pesan
pemuatan CAF untuk membuat permintaan streaming dan mengganti URL konten dengan streaming DAI akhir.
Intersepsi pesan memanggil streamManager.requestStream() yang menangani
setelan jeda iklan, meminta streaming, dan mengganti
contentURL
yang ada.
Hanya boleh ada satu intersepsi pesan pemuatan. Jadi, jika aplikasi Anda memerlukan penggunaan interseptor, Anda harus memasukkan fungsi kustom apa pun ke dalam callback yang sama.
<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>
Membuat permintaan streaming
Untuk menyelesaikan integrasi DAI CAF, Anda harus membuat permintaan
streaming
menggunakan data yang disertakan dalam objek mediaInfo
dari pengirim.
<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>
Anda kini dapat meminta dan memutar streaming DAI dengan CAF DAI SDK Google. Untuk mempelajari fitur SDK lanjutan lainnya, lihat panduan lainnya atau download aplikasi penerima contoh kami.