Livestream Play yang terdaftar dengan Google Cloud Video Stitcher API
Panduan ini menunjukkan cara menggunakan IMA DAI SDK untuk Penerima Web CAF guna meminta dan memutar livestream untuk peristiwa yang terdaftar dengan Google Cloud Video Stitcher API, dan menyisipkan jeda iklan selama pemutaran.
Panduan ini memperluas contoh dasar dari DAI layanan lengkap, yang menambahkan dukungan untuk streaming yang terdaftar dengan Google Cloud Video Stitcher API.
Pastikan format streaming Anda didukung oleh penerima web CAF sebelum melanjutkan.
Untuk informasi tentang cara berintegrasi dengan platform lain atau cara menggunakan SDK sisi klien IMA, lihat Interactive Media Ads SDK.
Latar belakang
Sebelum menggunakan panduan ini, biasakan diri Anda dengan protokol Penerima Web Framework Aplikasi Chromecast.
Panduan ini mengasumsikan tingkat dasar pemahaman tentang konsep penerima CAF,
seperti intersepsi
pesan,
objek MediaInformation
, dan penggunaan alat Command and Control
Cast untuk mengemulasi pengirim CAF.
Komponen dan arsitektur aplikasi
Penerapan pemutaran livestream dengan Google Cloud Video Stitcher API dengan IMA CAF DAI SDK melibatkan dua komponen utama seperti yang ditunjukkan dalam panduan ini:
VideoStitcherLiveStreamRequest
:: Objek yang menentukan permintaan streaming ke server Google. Permintaan tersebut menentukan instance Cloud Video Stitcher API, ID konfigurasi live, dan 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
Anda memerlukan variabel berikut untuk IMA SDK:
Live Config ID: Ini adalah ID konfigurasi live yang Anda tentukan saat membuat konfigurasi live Video Stitcher API.
LIVE_CONFIG_ID
Lokasi: Region Google Cloud tempat Live Config Anda dibuat.
LOCATION
Nomor Project: Nomor project Google Cloud yang menggunakan Video Stitcher API.
PROJECT_NUMBER
OAuth Token: Token OAuth yang berumur pendek dari akun layanan dengan peran pengguna Video Stitcher. Baca selengkapnya mengenai cara membuat kredensial berumur pendek untuk akun layanan.
OAUTH_TOKEN
Kode Jaringan: Kode jaringan Google Ad Manager untuk meminta iklan.
NETWORK_CODE
Kunci Aset Kustom: Kunci aset kustom Google Ad Manager yang dihasilkan selama proses pembuatan konfigurasi untuk peristiwa livestream dengan Video Stitcher API.
CUSTOM_ASSET_KEY
Anda memerlukan hal berikut untuk penerima Cast kustom:
Akun Konsol Developer Cast dengan perangkat pengujian dalam daftar yang diizinkan.
Aplikasi penerima web yang dihosting dan terdaftar dengan Konsol Developer Cast, dan yang dapat dimodifikasi untuk menghosting kode yang diberikan oleh panduan ini.
Aplikasi pengirim yang dikonfigurasi untuk menggunakan aplikasi penerima web Anda. Untuk tujuan contoh ini, panduan ini menggunakan alat Command and Control Cast sebagai pengirim.
Menyiapkan pengirim untuk meneruskan data aliran data ke penerima
Pertama, konfigurasi aplikasi pengirim untuk membuat permintaan pemuatan ke penerima web,
yang berisi kolom berikut di objek
MediaInformation
platform Anda.
Kolom | Daftar Isi | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
contentId
|
ID unik untuk item media ini, seperti yang ditentukan dalam dokumentasi
referensi Cast. ID ini tidak boleh digunakan kembali untuk beberapa item dalam
antrean media yang sama.
|
||||||||||||||
contentUrl
|
URL streaming Cadangan opsional yang akan diputar jika streaming DAI gagal dimuat.
|
||||||||||||||
contentType
|
Mimetype opsional URL streaming cadangan yang akan diputar jika streaming DAI gagal dimuat.
|
||||||||||||||
streamType
|
Literal atau konstanta string yang digunakan untuk nilai ini bervariasi menurut platform
pengirim.
|
||||||||||||||
customData
|
Kolom
|
Berikut adalah beberapa contoh kode untuk membantu Anda memulai:
Web
Untuk mengonfigurasi nilai ini di pengirim web Cast, buat objek
MediaInfo
terlebih dahulu dengan data yang diperlukan, 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 = "BACKUP_STREAM_MIMETYPE";
mediaInfo.streamType = chrome.cast.media.StreamType.LIVE;
mediaInfo.customData = {
liveConfigID: "LIVE_CONFIG_ID",
region: "LOCATION",
projectNumber: "PROJECT_NUMBER",
oAuthToken: "OAUTH_TOKEN",
networkCode: "NETWORK_CODE",
customAssetKey: "CUSTOM_ASSET_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
terlebih dahulu
dengan data yang diperlukan, lalu buat permintaan
pemuatan ke penerima web.
JSONObject customData = new JSONObject()
.put("liveConfigID", "LIVE_CONFIG_ID")
.put("region", "LOCATION")
.put("projectNumber", "PROJECT_NUMBER")
.put("oAuthToken", "OAUTH_TOKEN")
.put("networkCode", "NETWORK_CODE")
.put("customAssetKey", "CUSTOM_ASSET_KEY");
MediaInfo mediaInfo = MediaInfo.Builder("CONTENT_ID")
.setContentUrl("BACKUP_STREAM_URL")
.setContentType("BACKUP_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
terlebih dahulu dengan data yang diperlukan, lalu buat permintaan
pemuatan ke penerima web.
NSURL url = [NSURL URLWithString:@"BACKUP_STREAM_URL"];
NSDictionary *customData = @{
@"liveConfigID": @"LIVE_CONFIG_ID",
@"region": @"LOCATION",
@"projectNumber": @"PROJECT_NUMBER",
@"oAuthToken": @"OAUTH_TOKEN",
@"networkCode": @"NETWORK_CODE",
@"customAssetKey": @"CUSTOM_ASSET_KEY"
};
GCKMediaInformationBuilder *mediaInfoBuilder =
[[GCKMediaInformationBuilder alloc] initWithContentID: @"CONTENT_ID"];
mediaInfoBuilder.contentURL = url;
mediaInfoBuilder.contentType = @"BACKUP_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
terlebih dahulu dengan data yang diperlukan, 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": "LIVE_CONFIG_ID",
"region": "LOCATION",
"projectNumber": "PROJECT_NUMBER",
"oAuthToken": "OAUTH_TOKEN",
"networkCode": "NETWORK_CODE",
"customAssetKey": "CUSTOM_ASSET_KEY"
]
let mediaInfoBuilder = GCKMediaInformationBuilder.init(contentId: "CONTENT_ID")
mediaInfoBuilder.contentURL = mediaUrl
mediaInfoBuilder.contentType = "BACKUP_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 Command and Control Cast, klik tab Muat Media, lalu setel 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": "BACKUP_STREAM_MIMETYPE",
"streamType": "LIVE",
"customData": {
"liveConfigID": "LIVE_CONFIG_ID",
"region": "LOCATION",
"projectNumber": "PROJECT_NUMBER",
"oAuthToken": "OAUTH_TOKEN",
"networkCode": "NETWORK_CODE",
"customAssetKey": "CUSTOM_ASSET_KEY"
}
}
}
Permintaan pemuatan kustom ini dapat dikirim ke penerima untuk menguji langkah lainnya.
Membuat penerima web CAF kustom
Buat penerima web kustom, seperti yang terlihat di Panduan Penerima Web Kustom CAF SDK.
Kode penerima Anda akan terlihat seperti berikut:
<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>
const castContext = cast.framework.CastReceiverContext.getInstance()
castContext.start();
</script>
</body>
</html>
Impor IMA DAI SDK dan dapatkan Pengelola Pemutar
Tambahkan tag skrip untuk mengimpor IMA DAI SDK untuk CAF ke penerima web Anda, tepat setelah skrip yang memuat CAF. Kemudian, dalam tag skrip yang mengikutinya, 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 Pengelola Streaming IMA
Lakukan inisialisasi Pengelola Streaming IMA.
<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 Stream Manager Load Interceptor
Sebelum item media Anda 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 the Video Stitcher API.
* @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((castRequestWithStreamData) => {
console.log('Successfully made DAI stream request.');
return castRequestWithStreamData;
})
.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 permintaan livestream
Video Stitcher API, berdasarkan permintaan pemuatan CAF.
/**
* Creates a livestream request object for the Video Stitcher API.
* @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.VideoStitcherLiveStreamRequest();
const customData = castRequest.media.customData;
streamRequest.liveStreamEventId = customData.liveConfigID;
streamRequest.region = customData.region;
streamRequest.projectNumber = customData.projectNumber;
streamRequest.oAuthToken = customData.oAuthToken;
streamRequest.networkCode = customData.networkCode;
streamRequest.customAssetKey = customData.customAssetKey;
return streamRequest;
};