Membangun Streaming Video Real-Time: Dari Nol hingga Tampil di Browser

Masalah yang Jarang Dibahas

Anda mungkin sudah menyadari bahwa feed kamera keamanan, webcam live, dan video streaming dari perangkat IoT tidak pernah "langsung berjalan" di web. Ada alasan di balik frustrasi tersebut.

Inilah inti masalahnya: kebanyakan kamera dan perangkat video profesional menyiarkan menggunakan RTSP (Real Time Streaming Protocol), tetapi browser web sama sekali tidak mendukungnya. Ini menjadi keputusan keamanan sekitar tahun 2010-2015 ketika browser menghentikan dukungan RTSP. Tiba-tiba, menampilkan feed kamera live di halaman web menjadi mimpi buruk rekayasa mini.

Solusinya? Dua alat yang bekerja bersama: FFmpeg (pisau Swiss Army legendaris untuk video) dan MediaMTX (gateway streaming yang ringan). Bersama-sama, mereka menerjemahkan antara bahasa kamera (RTSP) dan yang dipahami browser (WebRTC). Netflix menggunakan pipeline serupa. Sistem keamanan lokal Anda mungkin juga demikian.

Apa yang Dilakukan Setiap Alat

FFmpeg: Mesin Pemroses Video

FFmpeg adalah alat video paling kuat yang mungkin belum pernah Anda konfigurasikan. Ia menangani hal-hal membosankan:

• Mengambil video dari webcam atau file
• Mengenkode ulang ke format yang ramah browser (biasanya H.264)
• Streaming ke server menggunakan RTSP atau RTMP
• Melakukan semuanya secara real-time tanpa tersendat

Alur kerja dasarnya: capture → encode → send.

MediaMTX: Penerjemah Protokol

FFmpeg tidak bisa menangani banyak penonton secara bersamaan. Itulah tugas MediaMTX. Ini pada dasarnya adalah perantara protokol:

• Menerima stream RTSP, RTMP, WebRTC, atau HLS
• Mengemas ulang ke format berbeda untuk klien berbeda
• Yang terpenting: mengonversi RTSP ke WebRTC agar browser bisa melihatnya
• Melakukan semuanya hanya dengan satu binary dan file konfigurasi

Pengaturan Awal (Bagian Praktis)

Instalasi FFmpeg

Linux/Ubuntu:

sudo apt-get update sudo apt-get install ffmpeg

macOS:

brew install ffmpeg

Windows:

• Unduh dari ffmpeg.org (gunakan build dari gyan.dev)
• Ekstrak ke C:\ffmpeg
• Tambahkan C:\ffmpeg\bin ke PATH sistem Anda
• Verifikasi: ffmpeg -version di command prompt

Instalasi MediaMTX

Linux/macOS:

wget https://github.com/bluenviron/mediamtx/releases/download/v1.15.0/mediamtx_v1.15.0_linux_amd64.tar.gz tar -xzf mediamtx_v1.15.0_linux_amd64.tar.gz chmod +x mediamtx sudo mv mediamtx /usr/local/bin/ mediamtx

Windows:

• Unduh .zip dari rilis GitHub
• Ekstrak dan jalankan mediamtx.exe
• (Windows Defender mungkin memberi peringatan—nonaktifkan sementara jika perlu)

Tiga Proyek

Proyek 1: Streaming File Video

Buat mediamtx.yml:

paths: test_video: source: publisher

Jalankan: mediamtx mediamtx.yml

Lalu streaming file video ke sana:

ffmpeg -re -i your_video.mp4 -c:v libx264 -preset fast -c:a aac -f rtsp rtsp://localhost:8554/test_video

Penjelasan:

• -re = baca dengan frame rate asli (penting untuk nuansa live)
• -c:v libx264 = gunakan codec H.264 (sangat kompatibel)
• -preset fast = kompromi kecepatan vs kompresi
• rtsp://localhost:8554/test_video = alamat tujuan

Buka VLC, pilih Media → Open Network Stream, tempel rtsp://localhost:8554/test_video. Anda seharusnya melihat videonya. Itu tanda MediaMTX bekerja.

Proyek 2: Streaming Webcam Anda Secara Live

Perbarui mediamtx.yml untuk menambah path baru:

paths: test_video: source: publisher webcam: source: publisher

Windows (menggunakan DirectShow):

ffmpeg -f dshow -rtbufsize 100M -i video="Integrated Webcam" -c:v libx264 -preset ultrafast -tune zerolatency -f rtsp rtsp://localhost:8554/webcam

macOS:

ffmpeg -f avfoundation -framerate 30 -video_size 1280x720 -i "0" -c:v libx264 -preset ultrafast -tune zerolatency -f rtsp rtsp://localhost:8554/webcam

Linux:

ffmpeg -f v4l2 -i /dev/video0 -c:v libx264 -preset ultrafast -tune zerolatency -c:a aac -f rtsp rtsp://localhost:8554/webcam

Parameter kunci:

• -preset ultrafast = prioritaskan kecepatan (penting untuk live)
• -tune zerolatency = optimalkan untuk real-time (buffering minimal)
• /webcam = path yang kita tetapkan di config

Proyek 3: Momen Ajaib—WebRTC di Browser Anda

Ini bagian menariknya. Perbarui mediamtx.yml:

webrtc: yes webrtcAddress: :8889 webrtcEncryption: no webrtcAllowOrigin: '*' webrtcLocalUDPAddress: :8189 webrtcIPsFromInterfaces: yes

paths: test_video: source: publisher webcam: source: publisher

Restart MediaMTX. Sekarang buka browser ke http://localhost:8889/webrtc/webcam

Feed webcam Anda akan langsung tampil di browser. Tanpa plugin. Tanpa RTSP. Hanya video live Anda yang berjalan real-time.

Apa yang Sebenarnya Terjadi

1. Webcam Anda menghasilkan frame mentah
2. FFmpeg menangkap, meng-encode sebagai H.264, streaming via RTSP ke MediaMTX
3. MediaMTX menerima stream RTSP dan menahannya
4. Browser meminta stream WebRTC dari path /webcam
5. MediaMTX mengonversi RTSP → WebRTC (tanpa encode ulang, hanya mengemas ulang)
6. Browser menerima paket WebRTC dan menampilkannya

Keindahannya: MediaMTX tidak melakukan encode ulang. Ia hanya mengemas ulang stream H.264 ke format container berbeda. Karena itulah latensinya tetap rendah.

Keterbatasan Saat Ini

Apa yang kita buat ini sangat baik untuk pengujian lokal, tapi untuk produksi diperlukan:

• Autentikasi (saat ini siapa saja bisa mengakses)
• Hanya berjalan di localhost (belum siap internet)
• Belum mendukung kamera IP
• Tidak ada monitoring atau penanganan error

Ini adalah fondasi yang solid. Arsitektur yang sama dapat diskalakan dari satu webcam kamar tidur hingga infrastruktur setingkat Netflix dengan ribuan stream serentak.

Langkah Selanjutnya

Bagian 2 akan membahas: mengamankan pipeline, menghubungkan kamera IP sungguhan, menangani autentikasi, dan deployment di luar localhost. Di situlah tantangan rekayasa nyata dimulai—dan di situlah kebanyakan proyek hobi orang gagal.