Dasar-dasar streaming media

Derek Herman
Derek Herman
X GitHub
Jaroslav Polakovič
Jaroslav Polakovič
X GitHub

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

Streaming media adalah cara menayangkan dan memutar konten media sepotong demi sepotong. Alih-alih memuat satu file, yang dapat menjadi lambat jika tidak dioptimalkan untuk jaringan, pemutar membaca file manifes yang menjelaskan cara media target dibagi menjadi potongan data individual. Potongan media kemudian digabungkan kembali secara dinamis saat runtime—mungkin pada kecepatan bit yang berbeda, yang akan Anda pelajari nanti.

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

Kasus penggunaan streaming

Menghasilkan potongan media dan manifes yang diperlukan yang menjelaskan streaming tersebut tidak benar-benar mudah, tetapi streaming dapat membuka beberapa kasus penggunaan menarik yang tidak mungkin dicapai hanya dengan mengarahkan elemen <video> ke sekumpulan file sumber statis. Anda akan mempelajari lebih lanjut cara menambahkan media ke halaman web di bagian selanjutnya. Pertama, Anda harus mengetahui beberapa kasus penggunaan untuk streaming multimedia jika Anda ingin melangkah lebih dari sekadar memuat beberapa file ke dalam elemen <video>.

  • Streaming adaptif adalah tempat potongan media dienkode dalam beberapa bitrate, dan potongan media dengan kualitas tertinggi yang sesuai dengan bandwidth klien yang saat ini tersedia akan ditampilkan ke pemutar media.
  • Live streaming adalah tempat potongan media dienkode dan tersedia secara real time.
  • Menginjeksikan media adalah tempat media lain, seperti iklan, dimasukkan ke streaming tanpa perlu 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, mencari tahu potongan media mana 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 dengan mengarahkan <source> dalam elemen <video> ke file manifes.

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

Apa yang tampak sebagai defisit sebenarnya adalah kekuatan yang tersembunyi. Stream sangat bermanfaat dan aplikasi yang menggunakan stream memiliki kebutuhan yang berbeda.

File manifes biasanya menjelaskan banyak varian dari satu media. Pikirkan kecepatan bit yang berbeda, beberapa trek audio, dan bahkan media yang sama yang dienkode dalam format berbeda.

Beberapa aplikasi mungkin ingin menyimpan video dalam jumlah yang lebih besar dalam buffer, yang lain mungkin ingin mengambil data beberapa detik pertama video dari episode mendatang, dan sebagian lainnya ingin menerapkan logika mereka sendiri untuk streaming adaptif. Di sinilah Anda perlu memiliki semacam fitur browser bawaan guna menghasilkan streaming media untuk diputar, dan itu kebetulan ada satu streaming media.

Ekstensi Sumber Media

Untungnya, W3C menentukan sesuatu yang disebut Media Source Extensions (MSE) yang akan memungkinkan JavaScript membuat streaming media kita. Singkatnya, MSE memungkinkan developer melampirkan objek MediaSource ke elemen <video> dan memintanya memutar data media apa pun yang dipompa ke buffer yang terpasang 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 menggambarkan beberapa hal:

  • Sejauh yang diperhatikan <video>, elemen tersebut 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 dalam buffer, misalnya menggunakan fetch.

Meskipun konsep dasar ini sederhana, dan memungkinkan untuk menulis pemutar video yang kompatibel dengan DASH dan HLS dari awal, kebanyakan orang biasanya memilih salah satu solusi open source matang yang sudah ada, seperti Shaka Player, JW Player, atau Video.js.

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

Format potongan media

Untuk waktu yang lama, DASH dan HLS memerlukan 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 protokol dan dapat diputar oleh sebagian besar pemain. Cara ini memungkinkan produser konten mengenkode videonya sekali saja, sehingga menghemat waktu dan kapasitas disk.

Untuk mencapai kualitas yang lebih baik dan ukuran file yang lebih rendah, Anda dapat mengenkode beberapa kumpulan potongan media menggunakan format yang lebih efisien seperti VP9. Namun, sebelum lanjut, Anda harus mempelajari cara Menyiapkan file media untuk web terlebih dahulu.