Halaman ini diterjemahkan oleh Cloud Translation API.

Mulai menggunakan IMA DAI SDK

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 Chromecast Protokol Penerima Web Framework Aplikasi. Ini mengasumsikan tingkat dasar pemahaman tentang konsep penerima CAF, seperti pesan pencegat dan mediaInformation objek, serta pengetahuan tentang penggunaan Perintah dan Kontrol Cast untuk mengemulasi pengirim CAF.

Untuk menggunakan IMA DAI, Anda harus memiliki Ad Manager Google Analytics 360. Jika Anda memiliki Iklan Akun pengelola, hubungi pengelola akun Anda untuk mengetahui detail selengkapnya. Untuk informasi tentang mendaftar ke Ad Manager, kunjungi Bantuan Ad Manager Google.

Untuk informasi tentang integrasi dengan platform lain, atau tentang penggunaan IMA SDK sisi klien, lihat Interactive Media Ads SDK.

Ringkasan CAF DAI

Penerapan DAI 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 streaming terbagi menjadi dua variasi utama:
- LiveStreamRequest: menentukan Kunci Aset, dan kunci API opsional, serta parameter opsional.
- VODStreamRequest: Menentukan ID Sumber Konten, ID Video, dan API opsional kunci, 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 yang terdaftar.
Penerima web yang dihosting aplikasi yang yang terdaftar pada Konsol Developer Cast dan yang dapat diubah untuk dihosting kode yang diberikan oleh panduan ini.
Aplikasi pengirim yang dikonfigurasi untuk menggunakan aplikasi penerima web Anda. Contoh ini menggunakan alat Command and Control Cast sebagai pengirim.

Mengonfigurasi objek MediaInfo pengirim

Pertama, konfigurasikan MediaInfo aplikasi pengirim Anda objek yang akan disertakan kolom berikut:

`contentId`		ID unik untuk item media ini
`contentUrl`		URL streaming penggantian yang akan dimuat jika StreamRequest DAI gagal untuk alasan
`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`	Streaming VOD saja. Mengidentifikasi feed media yang berisi streaming yang diminta.
	`videoId`	Streaming VOD saja. Mengidentifikasi streaming yang diminta dalam feed media tertentu.
	`ApiKey`	Kunci API opsional yang mungkin diperlukan untuk mengambil URL streaming dari IMA DAI SDK
	`senderCanSkip`	Nilai boolean yang memberi tahu penerima apakah perangkat pengirim telah kemampuan untuk menampilkan tombol lewati, mengaktifkan dukungan untuk iklan yang dapat dilewati

Untuk mengonfigurasi nilai ini di alat kontrol dan perintah transmisi, klik tombol Muat Media, dan 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>

Impor IMA DAI SDK dan dapatkan Pengelola Pemutar

Tambahkan tag skrip untuk mengimpor IMA DAI SDK untuk CAF ke penerima web Anda, cukup setelah skrip yang memuat CAF. CAF DAI SDK selalu aktual, jadi tidak diperlukan untuk menyetel versi tertentu. Kemudian pada tag skrip yang mengikutinya, 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 Pengelola Streaming IMA

Melakukan inisialisasi Stream CAF DAI SDK Pengelola.

<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 pencegat pesan pemuatan

CAF DAI SDK menggunakan pesan pemuatan CAF interseptor untuk membuat permintaan streaming dan mengganti URL konten dengan streaming DAI akhir. Pencegat pesan memanggil streamManager.requestStream() yang menangani menyetel jeda iklan, meminta streaming, dan mengganti iklan contentURL.

Hanya boleh ada satu pencegat pesan pemuatan, jadi jika aplikasi Anda mengharuskan dari pencegat, Anda perlu memasukkan fungsi khusus ke dalam .

<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 streaming meminta 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>

Kini Anda dapat meminta dan memutar streaming DAI dengan CAF DAI SDK dari Google. Untuk mempelajari fitur SDK lanjutan lainnya, lihat panduan lain atau download contoh penerima kami aplikasi.