Dasar-dasar streaming media

Derek Herman

Jaroslav Polakovič

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

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

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

Kasus penggunaan streaming

Membuat potongan media dan manifes yang diperlukan untuk menjelaskan streaming tidak dengan sangat mudah, tetapi streaming membuka beberapa kasus penggunaan menarik yang tidak mungkin dicapai hanya dengan mengarahkan elemen <video> ke satu set file sumber statis. Anda akan mempelajari lebih lanjut tentang cara menambahkan media ke halaman web di bagian berikutnya. Pertama, Anda harus mengetahui kasus penggunaan untuk streaming multimedia jika Anda ingin melangkah lebih dari sekedar memuat beberapa file ke dalam elemen <video>.

• Streaming adaptif adalah tempat potongan media dienkode dalam beberapa kecepatan bit, dan potongan media dengan kualitas tertinggi yang sesuai dengan {i>bandwidth <i}yang saat ini tersedia dikembalikan ke pemutar media.
• Live streaming adalah tempat potongan media dienkode dan tersedia dalam secara real-time.
• Menginjeksikan media adalah tempat media lain, seperti iklan, dimasukkan ke dalam streaming tanpa membuat pemutar mengubah sumber media.

Protokol streaming

Dua protokol streaming yang paling umum digunakan di web adalah Dynamic Streaming Adaptif melalui HTTP (DASH) dan HTTP Live Streaming (HLS). Pemain yang mendukung protokol ini akan mengambil file manifes yang dihasilkan, mencari tahu potongan media mana yang akan diminta, dan kemudian menggabungkannya ke dalam pengalaman media sosial.

Menggunakan <video> untuk memutar streaming

Banyak browser tidak akan memutar streaming Anda secara native. Meskipun ada beberapa dukungan untuk pemutaran HLS native, browser umumnya tidak mendukung DASH native pemutaran streaming. 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. Feed adalah canggih dan aplikasi yang menggunakan {i>stream<i} memiliki kebutuhan berbeda.

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

Beberapa aplikasi mungkin ingin menyimpan video dalam jumlah yang lebih besar dalam {i>buffer<i}, orang lain mungkin ingin mengambil beberapa detik pertama video dari khusus, dan sebagian ingin menerapkan logika mereka sendiri untuk streaming adaptif. Di sinilah Anda perlu memiliki semacam fitur browser bawaan untuk menghasilkan {i>stream <i}media dan diputar, dan itu pun terjadi.

Ekstensi Sumber Media

Untungnya, W3C menentukan sesuatu yang disebut Media Source Extensions (MSE) yang akan memungkinkan JavaScript membuat streaming media. Secara singkat, MSE memungkinkan developer untuk melampirkan objek MediaSource ke elemen <video> dan memiliki ia memutar data media apa pun yang dipompa ke {i>buffer<i} yang terpasang pada 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 {i>buffer<i}, mis. menggunakan fetch.

Meskipun konsep dasar ini sederhana, dan tentu saja 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 bernama Kino yang menunjukkan bagaimana Anda akan mengembangkan {i>website<i} media {i>streaming <i} dasar yang memberikan pemutaran media offline hanya dengan menggunakan elemen <video> sederhana. Ada paket dalam roadmap kami untuk mendukung kerangka kerja dan pengelolaan hak digital, baru. 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 yang harus dienkode dalam berbagai format font. Namun, pada tahun 2016, dukungan untuk file MP4 (fMP4) standar ditambahkan ke HLS, format yang juga didukung DASH.

Potongan video yang menggunakan container fMP4 dan codec H.264 didukung oleh protokol dan dapat dimainkan oleh sebagian besar pemain. Hal ini memungkinkan produser konten hanya perlu mengenkode video sekali saja, sehingga menghemat waktu dan kapasitas disk.

Untuk mencapai kualitas yang lebih baik dan ukuran file yang lebih rendah, Anda dapat memilih untuk mengenkode beberapa set potongan media menggunakan format yang lebih efisien seperti VP9, meskipun sebelum kita melangkah lebih jauh, Anda harus mempelajari terlebih dahulu cara Siapkan file media untuk web, dan langkah berikutnya.