Untuk mengaktifkan Video Stitcher API untuk project Anda, hubungi Account Representative atau hubungi Sales untuk mempelajari lebih lanjut.

Halaman ini diterjemahkan oleh Cloud Translation API.

Menggunakan IMA DAI SDK di Chromecast

Memutar streaming VOD yang terdaftar dengan Google Cloud Video Stitcher API

Panduan ini menunjukkan cara menggunakan IMA DAI SDK untuk Penerima Web CAF guna meminta dan memutar sesi streaming VOD Google Cloud.

Panduan ini memperluas contoh dasar dari DAI layanan lengkap, dengan 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 menggunakan SDK sisi klien IMA, lihat Interactive Media Ads SDK.

Latar belakang

Sebelum menggunakan panduan ini, pahami protokol Penerima Web Framework Aplikasi Chromecast.

Panduan ini mengasumsikan tingkat pemahaman dasar tentang konsep penerima CAF, seperti interceptor pesan, objek MediaInformation, dan menggunakan alat Cast Command and Control untuk mengemulasi pengirim CAF.

Komponen dan arsitektur aplikasi

Mengimplementasikan pemutaran streaming VOD dengan Google Cloud Video Stitcher API dengan IMA CAF DAI SDK melibatkan dua komponen utama seperti yang ditunjukkan dalam panduan ini:

VideoStitcherVodStreamRequest: Objek yang menentukan permintaan streaming ke server Google.
StreamManager: Objek yang menangani komunikasi antara streaming video dan IMA DAI SDK, seperti memicu ping pelacakan dan meneruskan peristiwa streaming ke penayang.

Menyiapkan project Google Cloud

Masukkan variabel berikut untuk digunakan di IMA SDK:

Lokasi - Region Google Cloud tempat konfigurasi VOD Anda dibuat.

LOCATION
Project Number: Nomor project Google Cloud yang menggunakan Video Stitcher API.

PROJECT_NUMBER
Token OAuth: Token OAuth berumur pendek dari akun layanan dengan peran pengguna Video Stitcher. Baca selengkapnya tentang membuat kredensial dengan masa berlaku singkat untuk akun layanan.

OAUTH_TOKEN
Network Code: Kode jaringan Google Ad Manager untuk meminta iklan.

NETWORK_CODE
VOD Config ID - ID konfigurasi VOD untuk streaming VOD.

VOD_CONFIG_ID

Baca selengkapnya tentang cara membuat ID konfigurasi VOD di Panduan pembuatan konfigurasi VOD dengan penyambungan cloud.

VOD_URI

Menyiapkan penerima transmisi kustom

Untuk mengembangkan penerima transmisi kustom, Anda memerlukan hal berikut:

Akun Konsol Play Cast dengan perangkat pengujian dalam daftar yang diizinkan.
Aplikasi penerima web yang dihosting dan terdaftar di Konsol Developer Cast Anda, dan dapat diubah untuk menghosting kode yang disediakan oleh panduan ini.
Aplikasi pengirim yang dikonfigurasi untuk menggunakan aplikasi penerima web Anda. Untuk tujuan contoh ini, panduan ini menggunakan alat Kontrol dan Perintah Cast sebagai pengirim.

Menyiapkan pengirim untuk meneruskan data streaming ke penerima

Pertama, konfigurasikan aplikasi pengirim untuk membuat permintaan pemuatan ke penerima web, yang berisi kolom berikut dalam 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.

CONTENT_ID

contentUrl

URL streaming Cadangan opsional untuk diputar jika streaming DAI gagal dimuat.

BACKUP_STREAM_URL

contentType

Mimetype opsional dari URL streaming cadangan yang akan diputar jika streaming DAI gagal dimuat.

BACKUP_STREAM_MIMETYPE

streamType

Literal string atau konstanta yang digunakan untuk nilai ini bervariasi menurut platform pengirim.

VOD

customData

Kolom customData berisi penyimpanan nilai kunci dari kolom wajib tambahan. Dalam hal ini, customData berisi data streaming DAI yang Anda kumpulkan.

Kolom	Daftar Isi
`region`	`LOCATION`
`projectNumber`	`PROJECT_NUMBER`
`oAuthToken`	`OAUTH_TOKEN`
`networkCode`	`NETWORK_CODE`
`vodConfigId`	`VOD_CONFIG_ID`

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 muat 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.VOD;
mediaInfo.customData = {
  region: "LOCATION",
  projectNumber: "PROJECT_NUMBER",
  oAuthToken: "OAUTH_TOKEN",
  networkCode: "NETWORK_CODE",
  vodConfigId: "VOD_CONFIG_ID"
};

// 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 muat ke penerima web.

JSONObject customData = new JSONObject()
  .put("region", "LOCATION")
  .put("projectNumber", "PROJECT_NUMBER")
  .put("oAuthToken", "OAUTH_TOKEN")
  .put("networkCode", "NETWORK_CODE")
  .put("vodConfigId", "VOD_CONFIG_ID");

MediaInfo mediaInfo = MediaInfo.Builder("CONTENT_ID")
  .setContentUrl("BACKUP_STREAM_URL")
  .setContentType("BACKUP_STREAM_MIMETYPE")
  .setStreamType(MediaInfo.STREAM_TYPE_VOD)
  .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 muat ke penerima web.

NSURL url = [NSURL URLWithString:@"BACKUP_STREAM_URL"];
NSDictionary *customData = @{
  @"region": @"LOCATION",
  @"projectNumber": @"PROJECT_NUMBER",
  @"oAuthToken": @"OAUTH_TOKEN",
  @"networkCode": @"NETWORK_CODE",
  @"vodConfigId": @"VOD_CONFIG_ID"
};

GCKMediaInformationBuilder *mediaInfoBuilder =
  [[GCKMediaInformationBuilder alloc] initWithContentID: @"CONTENT_ID"];
mediaInfoBuilder.contentURL = url;
mediaInfoBuilder.contentType = @"BACKUP_STREAM_MIMETYPE";
mediaInfoBuilder.streamType = GCKMediaStreamTypeNone;
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 muat ke penerima web.

let url = URL.init(string: "BACKUP_STREAM_URL")
guard let mediaURL = url else {
  print("invalid mediaURL")
  return
}

let customData = [
  "region": "LOCATION",
  "projectNumber": "PROJECT_NUMBER",
  "oAuthToken": "OAUTH_TOKEN",
  "networkCode": "NETWORK_CODE",
  "vodConfigId": "VOD_CONFIG_ID"
]

let mediaInfoBuilder = GCKMediaInformationBuilder.init(contentId: "CONTENT_ID")
mediaInfoBuilder.contentURL = mediaUrl
mediaInfoBuilder.contentType = "BACKUP_STREAM_MIMETYPE"
mediaInfoBuilder.streamType = GCKMediaStreamType.none
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": "BACKUP_STREAM_MIMETYPE",
    "streamType": "VOD",
    "customData": {
      "region": "LOCATION",
      "projectNumber": "PROJECT_NUMBER",
      "oAuthToken": "OAUTH_TOKEN",
      "networkCode": "NETWORK_CODE",
      "vodConfigId": "VOD_CONFIG_ID"
    }
  }
}

Permintaan pemuatan kustom ini dapat dikirim ke penerima untuk menguji langkah-langkah lainnya.

Membuat penerima web CAF kustom

Buat penerima web kustom, seperti yang terlihat dalam 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>

Mengimpor IMA DAI SDK dan mendapatkan Pengelola Pemutar

Tambahkan tag skrip untuk mengimpor IMA DAI SDK untuk CAF ke penerima web Anda, tepat setelah skrip memuat CAF. Kemudian, di tag skrip yang mengikuti, 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 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 Stream Manager Load Interceptor

Sebelum item media diteruskan ke CAF, buat permintaan streaming di interceptor pesan LOAD.

    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    /**
     * Creates a VOD stream 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 streaming VOD Video Stitcher API, berdasarkan permintaan pemuatan CAF.

    /**
     * Creates a VOD stream 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.VideoStitcherVodStreamRequest();
      const customData = castRequest.media.customData;

      streamRequest.region = customData.region;
      streamRequest.projectNumber = customData.projectNumber;
      streamRequest.oAuthToken = customData.oAuthToken;
      streamRequest.networkCode = customData.networkCode;
      streamRequest.vodConfigId = customData.vodConfigId;
      streamRequest.videoStitcherSessionOptions = {};

      return streamRequest;
    };

(Opsional) Menambahkan opsi sesi streaming

Sesuaikan permintaan streaming Anda dengan menambahkan opsi sesi untuk mengganti konfigurasi Cloud Video Stitcher API default menggunakan VideoStitcherVodStreamRequest.videoStitcherSessionOptions. Jika Anda memberikan opsi yang tidak dikenal, Cloud Video Stitcher API akan merespons dengan error HTTP 400. Lihat panduan pemecahan masalah untuk mendapatkan bantuan.

Misalnya, Anda dapat mengganti opsi manifes dengan cuplikan kode berikut, yang meminta dua manifes streaming dengan tampilan yang diurutkan dari kecepatan bit terendah ke tertinggi.

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);