Dasar-dasar streaming media

Derek Herman

Jaroslav Polakovič

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 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 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 dalam artikel Tag <video> dan <source>.

Kasus penggunaan streaming

Membuat potongan media dan manifes yang diperlukan yang menjelaskan streaming bukanlah hal yang 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 berikutnya. Pertama, Anda harus mengetahui beberapa kasus penggunaan untuk streaming multimedia jika ingin melakukan lebih dari sekadar memuat beberapa file ke 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.
• 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, 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. 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 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 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 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 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 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 info 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 rendah, 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.