Dasar-dasar streaming media

Derek Herman

Jaroslav Polakovič

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

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

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

Kasus penggunaan streaming

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

• Streaming adaptif merupakan tempat potongan media dienkode dalam beberapa kecepatan bit, 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.
• Memasukkan media adalah tempat media lain, seperti iklan, dimasukkan ke dalam streaming tanpa mengharuskan pemutar untuk 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 yang akan diminta, kemudian menggabungkannya ke dalam pengalaman media akhir.

Menggunakan <video> untuk memutar streaming

Banyak browser yang tidak akan memutar streaming Anda secara native. Meskipun ada beberapa dukungan untuk pemutaran HLS native, browser umumnya tidak mendukung pemutaran streaming DASH native. Ini berarti 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. Streaming sangat bermanfaat dan aplikasi yang menggunakan streaming memiliki kebutuhan berbeda.

File manifes biasanya menjelaskan banyak varian media tunggal. Pertimbangkan 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 lebih besar dalam buffer, aplikasi yang lain mungkin ingin mengambil data beberapa detik pertama video dari episode yang akan datang, dan beberapa aplikasi ingin menerapkan logikanya sendiri untuk streaming adaptif. Di sinilah Anda perlu memiliki semacam fitur browser bawaan guna menghasilkan streaming media untuk diputar.

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 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 berkaitan dengan <video>, objek ini menerima data media dari URL.
• URL yang dihasilkan hanya merupakan pointer ke instance MediaSource.
• Instance MediaSource membuat satu atau beberapa instance SourceBuffer.
• Kemudian, kita hanya perlu menambahkan data media biner ke buffer, misalnya menggunakan fetch.

Meskipun konsep dasar ini sederhana, dan memang mungkin 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 demo PWA Media yang disebut Kino yang menunjukkan cara mengembangkan situs media streaming dasar milik Anda sendiri yang menyediakan pemutaran media offline hanya dengan menggunakan elemen <video> sederhana. Terdapat beberapa rencana dalam roadmap kami untuk mendukung framework dan pengelolaan hak digital, serta beberapa fitur lainnya. Jadi, periksa kembali pembaruan 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 memerlukan potongan media yang akan dienkode dalam format yang berbeda. Namun, pada tahun 2016, dukungan untuk file MP4 terfragmentasi (fMP4) standar ditambahkan ke HLS, format yang juga didukung oleh DASH.

Potongan video yang menggunakan penampung fMP4 dan codec H.264 didukung oleh protokol dan dapat diputar oleh sebagian besar pemutar. Hal ini memungkinkan produser konten mengenkode video sekali saja, sehingga menghemat waktu dan kapasitas disk.

Untuk mendapatkan kualitas file yang lebih baik dan ukuran file yang lebih kecil, Anda dapat memilih untuk mengenkode beberapa kumpulan potongan media menggunakan format yang lebih efisien seperti VP9. Sebelum sampai ke tahap ini, Anda harus mempelajari cara Menyiapkan file media untuk web terlebih dahulu.