Membuat Livestream website seperti Twitch menggunakan NextJS

Pernahkan kalian bertanya-tanya bagaimana sebenarnya website live streaming platform seperti Twitch, YouTube Live, dan sejenisnya itu didevelop? Setidaknya penulis penasaran bagaimana para developer hebat di luar sana mengembangkan website yang ringan dan efisien bahkan dapat meng-handle banyak user sekaligus untuk menonton streamer favorite mereka.

Twitch contohnya jika kalian tidak tahu merupakan anak perusahaan dari Amazon. Ya, Amazon yang menyediakan berbagai services untuk cloud. Jadi tidak heran ya kalau memang perusahaan tersebut dapat menghandle banyak user sekaligus. Tetapi, sebenarnya apa sih dibalik itu? kita akan melihatnya dalam sudut pandang yang lebih simple. Di sini penulis telah membuat website seperti Twitch menggunakan NextJS. Dengan catatan, website ini dibuat hanya untuk edukasi dan menjadikannya pembelajaran dan pengalaman.

Apa itu Streaming?

Dalam konteks pemrograman, streaming ini merupakan sebuah data yang secara kontinyu terhubung. Jika dianalogikan streaming atau stream ini seperti sebuah sungai dimana air merupakan datanya. Air secara terus menerus berganti dan diteruskan namun tidak tersimpan di satu tempat. Contohnya ketika kamu nonton streaming, maka kamu tidak perlu mendownload videonya, kamu hanya perlu mengaksesnya dan menikmatinya tanpa khawatir penyimpanan kamu harus penuh.

Apa itu Live Stream?

Penting: Streaming dan Live Streaming itu berbeda. Streaming dapat dilakukan tanpa harus real time, sedangkan live streaming harus real time. Livestream merupakan sebuah aktivitas menyiarkan sebuah video langsung secara real time tanpa perlu melakukan record terlebih dahulu. Live stream memberikan kita keuntungan seperti dapat menonton langsung video secara langsung dan real-time tanpa perlu mengunduhnya terlebih dahulu. Biasanya para live streamer menggunakan software seperti OBS Studio untuk kemudian diintegrasikan ke platform yang dituju untuk disiarkan. Nah server yang dituju ini merupakan Ingest Server.

Apa itu Ingest Server?

Sederhananya, Ingest Server layaknya server pada umumnya, namun server dapat menerima sebuah media streaming (video, audio, dll.). Ia akan memproses media streaming kamu, mengubah media stream kamu ke beberapa kualitas menggunakan transcoding, menyiarkan media streaming kamu ke backend yang dituju, bahkan dapat dikonfigurasi untuk menyimpan media streaming kamu jika server kamu memang memiliki kapasitas yang besar. Biasanya server ini menggunakan protokol RTMP (RealTime Messaging Protocol) untuk menangani media streaming.

RTMP dan HLS

RTMP atau RealTime Messaging Protocol merupakan sebuah protokol berbasis TCP yang digunakan untuk berbagai media streaming seperti audio, video, dan data lainnya. Ini akan kita gunakan sebagai streamer yang menyiarkan streaming mereka.
HLS atau HTTP Live Streaming merupakan protokol media streaming yang berbasis HTTP. Ini akan kita gunakan sebagai viewer/penonton yang memerlukan video live stream.