Menggunakan IMA DAI SDK dengan klien HTML5

Memutar livestream yang terdaftar dengan Google Cloud Video Stitcher API

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

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

Untuk informasi tentang cara berintegrasi dengan platform lain atau cara menggunakan SDK sisi klien IMA, lihat Interactive Media Ads SDK.

Menyiapkan project Google Cloud

Masukkan variabel berikut untuk digunakan di IMA SDK:

Location
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 akun layanan yang berumur singkat dengan peran pengguna Penggabung Video:

OAUTH_TOKEN

Baca selengkapnya tentang membuat kredensial berumur pendek untuk akun layanan. Token OAuth dapat digunakan kembali di beberapa permintaan selama masa berlakunya belum habis.

Kode jaringan

Kode jaringan Ad Manager untuk meminta iklan: NETWORK_CODE

ID konfigurasi live
ID konfigurasi live yang Anda tentukan saat membuat acara livestream: LIVE_CONFIG_ID
Kunci aset kustom
Kunci aset kustom Ad Manager yang dihasilkan selama proses pembuatan konfigurasi untuk peristiwa livestream dengan Video Stitcher API: CUSTOM_ASSET_KEY

Mengonfigurasi lingkungan pengembangan

Aplikasi contoh IMA hanya menunjukkan permintaan streaming HLS. Anda masih dapat menggunakan aliran 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 mengambil tiga parameter:

  1. type: String yang harus ditetapkan 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 yang dapat disediakan oleh peristiwa pemain Anda. Jika metadata tidak ada atau salah, IMA DAI SDK mungkin tidak memicu peristiwa iklan, sehingga menyebabkan peristiwa iklan yang dilaporkan dengan tidak benar.

Download contoh IMA DAI untuk HTML5, lalu ekstrak contoh Sederhana HLS.js 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, lalu 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 dan buka localhost:8000 untuk melihat pemutar video. Browser Anda harus mendukung library HLS.js.

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

Meminta livestream

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

Dalam contoh yang ada, terdapat fungsi untuk meminta streaming VOD atau livestream. Agar dapat 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 livestream berada di bucket Cloud Storage, Anda harus mengaktifkan CORS untuk http://localhost:8000 origin.

Muat ulang halaman. Kemudian, Anda dapat meminta dan memutar livestream 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 rendisi yang diurutkan dari kecepatan bit terendah ke tertinggi.

...

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 segera diputar setelah jeda iklan disisipkan.

Pembersihan

Setelah berhasil menghosting live stream menggunakan Google Cloud Video Stitcher API dan memintanya menggunakan IMA DAI SDK untuk HTML5, penting untuk membersihkan semua resource penayangan.

Ikuti panduan pembersihan livestream 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.

Sebelumnya
Chromecast
Berikutnya
iOS