Mulai menggunakan IMA DAI SDK

IMA SDK memudahkan integrasi iklan multimedia ke dalam situs dan aplikasi Anda. IMA SDK dapat meminta iklan dari server iklan 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 VOD maupun konten live. SDK kemudian menampilkan streaming video gabungan, sehingga Anda tidak perlu mengelola peralihan antara iklan dan video konten dalam aplikasi.

Memilih solusi DAI yang Anda minati

Layanan lengkap Penayangan pod Cloud stitching API Live Cloud stitching API VOD

Memutar live stream yang terdaftar dengan Google Cloud Video Stitcher API

Panduan ini menunjukkan cara menggunakan IMA DAI SDK untuk HTML5 guna meminta dan memutar live stream untuk peristiwa yang terdaftar dengan Google Cloud Video Stitcher API, dan cara menyisipkan jeda iklan selama pemutaran.

Panduan ini memperluas contoh dasar dari Panduan memulai untuk DAI IMA.

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

Untuk melihat atau mengikuti contoh integrasi yang telah selesai, download contoh stitcher video Cloud untuk HLS atau DASH.

Catatan: IMA DAI SDK untuk HTML5 mendukung streaming HLS dan DASH, tetapi pemutaran masing-masing memerlukan pemutar media atau ekstensi yang berbeda seperti HLS.js atau DASH.js, dengan penerapan yang bervariasi.

Panduan ini menjelaskan cara mengonfigurasi HLS.js dan IMA DAI SDK untuk memutar streaming HLS, dengan catatan penting tentang perbedaan penerapan untuk DASH.

Lihat aplikasi sampel DASH.js IMA untuk titik awal guna menerapkan streaming DASH DAI dengan IMA.

Menyiapkan project Google Cloud

Siapkan project Google Cloud dan konfigurasikan akun layanan untuk mengakses project.

Buat konfigurasi untuk acara live stream menggunakan live stream konten Anda sendiri atau live stream uji coba. Panduan ini mengharapkan streaming HLS.

Masukkan variabel berikut untuk digunakan di IMA SDK:

Lokasi

Region Google Cloud tempat konfigurasi live Anda dibuat: LOCATION

Nomor project

Nomor project Google Cloud yang menggunakan Video Stitcher API: PROJECT_NUMBER

Token OAuth

Token OAuth berumur pendek akun layanan dengan peran pengguna Video Stitcher:

OAUTH_TOKEN

Baca selengkapnya tentang membuat kredensial dengan masa berlaku singkat untuk akun layanan. Token OAuth dapat digunakan kembali di beberapa permintaan selama belum berakhir masa berlakunya.

Kode jaringan

Kode jaringan Ad Manager untuk meminta iklan: NETWORK_CODE

ID konfigurasi live

ID konfigurasi live yang Anda tentukan saat membuat acara live stream: LIVE_CONFIG_ID

Kunci aset kustom

Kunci aset kustom Ad Manager yang dibuat selama proses membuat konfigurasi untuk peristiwa live stream dengan Video Stitcher API: CUSTOM_ASSET_KEY

Mengonfigurasi lingkungan pengembangan

Poin Penting: Class VideoStitcherLiveStreamRequest IMA DAI mendukung streaming HLS dan streaming DASH multi-periode. Jeda iklan hanya disisipkan di antara periode DASH.

Aplikasi contoh IMA hanya mendemonstrasikan permintaan streaming HLS. Anda tetap dapat menggunakan streaming DASH saat membuat class VideoStitcherLiveStreamRequest. Saat menyiapkan pemutar yang kompatibel dengan DASH, Anda perlu menyiapkan pemroses untuk peristiwa progres pemutar video yang dapat memberikan metadata video ke StreamManager.processMetadata(). Fungsi ini menggunakan tiga parameter:

1. type: String yang harus disetel ke 'ID3' untuk streaming HLS dan 'urn:google:dai:2018' untuk streaming DASH.

2. data: Untuk pesan peristiwa DASH, ini adalah string data pesan.

3. timestamp: Angka yang merupakan waktu mulai pesan peristiwa untuk streaming DASH.

Kirim metadata sesegera dan sesering mungkin sesuai dengan peristiwa pemain Anda. Jika metadata tidak ada atau salah, IMA DAI SDK mungkin tidak memicu peristiwa iklan, sehingga menyebabkan peristiwa iklan dilaporkan dengan tidak benar.

Download contoh IMA DAI untuk HTML5 dan ekstrak contoh HLS.js Simple ke folder baru. Contoh ini adalah aplikasi web yang dapat Anda hosting secara lokal untuk tujuan pengujian.

Untuk menghosting contoh secara lokal, buka folder baru, dan jalankan perintah python berikut untuk memulai server web:

python3 -m http.server 8000

http.server hanya tersedia di Python 3.x. Anda dapat menggunakan server web lainnya, seperti Apache HTTP Server atau Node JS.

Buka browser web, lalu buka localhost:8000 untuk melihat pemutar video. Browser Anda harus mendukung library HLS.js.

Jika semuanya berfungsi dengan baik, mengklik tombol putar di pemutar video akan memulai film pendek "Tears of Steel" setelah iklan singkat. Konten ini dikirim menggunakan streaming video on demand (VOD).

Meminta live stream

Untuk mengganti streaming VOD contoh dengan live stream Anda, gunakan class VideoStitcherLiveStreamRequest yang secara otomatis membuat sesi iklan dengan Google Ad Manager. Anda dapat menggunakan UI Google Ad Manager untuk menemukan sesi DAI yang dihasilkan guna pemantauan dan proses debug.

Dalam contoh yang ada, ada fungsi untuk meminta streaming VOD atau livestream. Agar berfungsi dengan Google Cloud Video Stitcher API, Anda perlu menambahkan fungsi baru untuk menampilkan objek VideoStitcherLiveStreamRequest.

Berikut contohnya:

// StreamManager which will be used to request ad-enabled streams.
let streamManager;
...
function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(
    videoElement,
    adUiElement
  );
  streamManager.addEventListener(
      [
        google.ima.dai.api.StreamEvent.Type.LOADED,
        google.ima.dai.api.StreamEvent.Type.ERROR,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
      ],
      onStreamEvent, false);

  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  videoElement.addEventListener('pause', () => {
    playButton.style.display = 'block';
  });

  playButton.addEventListener('click', initiatePlayback);
}

function initiatePlayback() {
  requestVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...

function requestVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
  streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';
  streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';

  streamManager.requestStream(streamRequest);
}

Untuk pengujian lokal, jika file live stream berada di bucket Cloud Storage, Anda harus mengaktifkan CORS untuk origin http://localhost:8000.

Muat ulang halaman. Kemudian, Anda dapat meminta dan memutar live stream kustom.

(Opsional) Menambahkan opsi sesi streaming

Sesuaikan permintaan streaming Anda dengan menambahkan opsi sesi untuk mengganti konfigurasi Cloud Video Stitcher API default menggunakan VideoStitcherLiveStreamRequest.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": {
    "includeRenditions": [
      {"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
      {"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
    ],
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Menyisipkan jeda iklan

Google Cloud Video Stitcher API menyisipkan iklan yang diambil dari tag iklan untuk setiap jeda iklan. Jeda iklan ditunjukkan dalam manifes menggunakan penanda iklan. Penanda iklan disisipkan oleh encoder live stream.

• Jika menggunakan live stream Anda sendiri, Anda harus menyisipkan penanda iklan. Untuk mengetahui informasi selengkapnya tentang penanda iklan HLS dan DASH yang didukung, lihat dokumentasi penanda iklan.

• Jika Anda membuat live stream menggunakan Google Cloud Livestream API, sisipkan acara saluran jeda iklan.

Iklan akan diputar segera setelah jeda iklan disisipkan.

Pembersihan

Setelah Anda berhasil menghosting live stream menggunakan Google Cloud Video Stitcher API dan memintanya menggunakan IMA DAI SDK untuk HTML5, Anda harus membersihkan resource penayangan apa pun.

Ikuti panduan pembersihan live stream untuk menghapus resource dan aset yang tidak diperlukan.

Terakhir, di jendela terminal tempat Anda memulai server web Python 3, gunakan perintah ctrl+C untuk mengakhiri server lokal.