Dasar-dasar streaming media

Derek Herman
Derek Herman
Jaroslav Polakovič
Jaroslav Polakovič

Dalam artikel ini, Anda akan mempelajari konsep streaming media yang lebih lanjut dan pada akhirnya akan memiliki pemahaman yang baik tentang berbagai kasus penggunaan, protokol, dan ekstensi streaming. Mari kita mulai dengan penjelasan tentang apa itu streaming.

Streaming media adalah cara mengirimkan dan memutar konten media secara berurutan. Daripada memuat satu file, yang dapat lambat jika tidak dioptimalkan untuk jaringan, pemutar membaca file manifes yang menjelaskan cara media target dibagi menjadi beberapa bagian data. Potongan media kemudian digabungkan kembali secara dinamis saat runtime—mungkin dengan bitrate yang berbeda, yang akan Anda pelajari nanti.

Perhatikan bahwa untuk menyediakan streaming di situs Anda, server harus mendukung header permintaan HTTP Range. Pelajari header Accept-Ranges lebih lanjut dalam artikel Tag <video> dan <source>.

Kasus penggunaan streaming

Membuat potongan media dan manifes yang diperlukan untuk mendeskripsikan streaming tidak semudah itu, tetapi streaming membuka beberapa kasus penggunaan menarik yang tidak dapat dicapai hanya dengan mengarahkan elemen <video> ke sekumpulan file sumber statis. Anda akan mempelajari lebih lanjut cara menambahkan media ke halaman web di bagian berikutnya. Pertama, Anda harus mengetahui beberapa kasus penggunaan untuk streaming multimedia jika ingin melakukan lebih dari sekadar memuat beberapa file ke dalam elemen <video>.

  • Streaming adaptif adalah tempat potongan media dienkode dalam beberapa bitrate, dan potongan media berkualitas tertinggi yang cocok dengan bandwidth klien yang saat ini tersedia akan ditampilkan ke pemutar media.
  • Siaran live adalah tempat potongan media dienkode dan tersedia secara real time.
  • Memasukkan media adalah saat media lain seperti iklan dimasukkan ke dalam streaming tanpa mengharuskan pemutar mengubah sumber media.

Protokol streaming

Dua protokol streaming yang paling umum digunakan di web adalah Dynamic Adaptive Streaming over HTTP (DASH) dan HTTP Live Streaming (HLS). Pemutar yang mendukung protokol ini akan mengambil file manifes yang dihasilkan, menemukan bagian media yang akan diminta, lalu menggabungkannya ke dalam pengalaman media akhir.

Menggunakan <video> untuk memutar streaming

Banyak browser tidak akan memutar streaming Anda secara native. Meskipun ada beberapa dukungan native untuk pemutaran HLS, browser umumnya tidak mendukung pemutaran streaming DASH native. Artinya, sering kali tidak cukup hanya mengarahkan <source> dalam elemen <video> ke file manifes.

<video controls>
  <source src="manifest.mpd" type="application/dash+xml">
</video>

Hal yang mungkin tampak sebagai defisit sebenarnya adalah kekuatan yang tersembunyi. Streaming sangat canggih dan aplikasi yang menggunakan streaming memiliki kebutuhan yang berbeda.

File manifes biasanya menjelaskan banyak varian media tunggal. Misalnya, bitrate yang berbeda, beberapa trek audio, dan bahkan media yang sama yang dienkode dalam format yang berbeda.

Beberapa aplikasi mungkin ingin menyimpan video dalam jumlah yang lebih besar di buffering, beberapa aplikasi mungkin ingin melakukan pengambilan data beberapa detik pertama video dari episode mendatang, dan beberapa aplikasi ingin menerapkan logika mereka sendiri untuk streaming adaptif. Di sinilah Anda ingin memiliki semacam fitur browser bawaan untuk membuat streaming media untuk pemutaran, dan kebetulan ada.

Ekstensi Sumber Media

Untungnya, W3C menentukan sesuatu yang disebut Media Source Extensions (MSE) yang akan memungkinkan JavaScript membuat streaming media. Singkatnya, MSE memungkinkan developer melampirkan objek MediaSource ke elemen <video> dan memutar data media apa pun yang dimasukkan ke buffering yang dilampirkan ke instance MediaSource.

Contoh dasar

const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
  'sourceopen',
  () => {
    const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    const buffer = mediaSource.addSourceBuffer(mimeString);

    buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
  }
);

Contoh sederhana di atas mengilustrasikan beberapa hal:

  • Sejauh yang diketahui, <video> menerima data media dari URL.
  • URL yang dihasilkan hanyalah pointer ke instance MediaSource.
  • Instance MediaSource membuat satu atau beberapa instance SourceBuffer.
  • Kemudian, kita hanya menambahkan data media biner ke buffer, misalnya menggunakan fetch.

Meskipun konsep dasar ini sederhana, dan Anda tentu dapat menulis pemutar video yang kompatibel dengan DASH dan HLS dari awal, sebagian besar orang biasanya memilih salah satu solusi open source yang sudah matang, seperti Shaka Player, JW Player, atau Video.js.

Namun, kami telah membuat demo PWA Media bernama Kino yang menunjukkan cara mengembangkan situs media streaming dasar Anda sendiri yang menyediakan pemutaran media offline hanya menggunakan elemen <video> sederhana. Ada rencana dalam roadmap kami untuk mendukung framework dan pengelolaan hak digital, di antara fitur lainnya. Jadi, periksa kembali untuk mengetahui informasi terbaru dari waktu ke waktu, atau minta fitur. Baca selengkapnya di artikel PWA dengan streaming offline.

Format potongan media

Untuk waktu yang lama, DASH dan HLS mewajibkan potongan media untuk dienkode dalam format yang berbeda. Namun, pada tahun 2016, dukungan untuk file MP4 terfragmentasi (fMP4) standar ditambahkan ke HLS, format yang juga didukung DASH.

Potongan video yang menggunakan penampung fMP4 dan codec H.264 didukung oleh kedua protokol dan dapat diputar oleh sebagian besar pemutar. Hal ini memungkinkan produser konten mengenkode video mereka hanya sekali, yang pada akhirnya menghemat waktu dan ruang disk.

Untuk mendapatkan kualitas yang lebih baik dan ukuran file yang lebih kecil, sebaiknya pilih untuk mengenkode beberapa kumpulan potongan media menggunakan format yang lebih efisien seperti VP9, meskipun sebelum kita melangkah lebih jauh, Anda harus terlebih dahulu mempelajari cara Menyiapkan file media untuk web, dan itu yang akan kita bahas selanjutnya.