PRESENTASI TEKNIS & DEMO WEB STREAMING

Setup Server Streaming 24 Jam
TV HLS + Radio Online + Custom Web Player

Sistem streaming yang menghubungkan server VPS, TV HLS 24/7, radio online, dan web player dalam satu alur yang terintegrasi. Video dapat berjalan otomatis dari playlist atau menerima siaran langsung dari OBS, sementara radio dapat berjalan menggunakan AutoDJ maupun Live DJ.

Infrastruktur streaming berbasis VPS Ubuntu untuk menjalankan TV HLS 24/7, radio online, live broadcast, dan web player custom. Sistem dirancang agar setiap bagian dapat dipantau, dijalankan kembali secara otomatis, dan mudah dikelola setelah deployment.

TECHNOLOGY STACK:
MediaMTXFFmpegAzuraCastIcecastNginx SSLNext.js 14hls.js

Status Persiapan Deployment

Preview Mode
TV Streaming HLSREADY FOR DEPLOYMENT
Radio Streaming MP3READY FOR DEPLOYMENT
Custom Web Player✓ DEMO READY
VPS Server Integration○ PENDING VPS
RTM Production Endpoint:https://live.rtm.tl/tv/index.m3u8Status: Waiting for VPS Deployment
PUBLIC TEST STREAM DEMO

Demo Web Player

PUBLIC TEST STREAM

Sebelum deployment ke VPS production, player dapat diuji menggunakan beberapa HLS stream publik (termasuk Unified Streaming Tears of Steel HLS sebagai stream default). Tujuannya untuk memastikan fungsi player, buffering, error handling, dan pergantian stream berjalan dengan baik.

PILIH MODE PEMUTAR DEMO
DEMO WEB PLAYERHLS M3U8

Menghubungkan ke Stream HLS M3U8...

https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.m3u8

Demo Web Player — Stream Selector
Sebelum deployment ke VPS production, player dapat diuji menggunakan HLS stream publik untuk memastikan buffering & error handling.
FITUR & KOMPONEN UTAMA

Apa yang Akan Dibangun

Project ini mencakup sisi server streaming dan web player. Server menangani proses video dan audio selama 24 jam, sedangkan website menjadi tempat pengguna menonton TV dan mendengarkan radio.

TV Streaming 24/7

Playlist video MP4 akan dijalankan otomatis menggunakan FFmpeg dan dikirim ke MediaMTX untuk menghasilkan stream HLS yang dapat diputar melalui browser maupun VLC.

Live TV melalui OBS

Penyiar dapat melakukan siaran langsung dari OBS menggunakan RTMP URL dan Stream Key yang disediakan pada server.

Radio AutoDJ

Playlist MP3 dapat dijalankan otomatis sepanjang hari menggunakan AutoDJ, termasuk pengaturan playlist dan jadwal program.

Live DJ Takeover

Penyiar dapat mengambil alih siaran radio dari PC menggunakan software seperti Mixxx atau BUTT via Icecast mount point.

Custom Web Player

Website menyediakan player khusus untuk TV dan radio, termasuk indikator LIVE, metadata lagu, artwork, dan kontrol pemutaran.

HTTPS & Security

Seluruh endpoint publik akan menggunakan HTTPS dan reverse proxy agar streaming dapat digunakan dengan aman dari website.

DIAGRAM ARSITEKTUR STREAMING INTERAKTIF

Bagaimana Sistem TV HLS & Radio Bekerja?

Klik pada setiap modul komponen di bawah untuk memeriksa spesifikasi teknis, alur data, dan snippet konfigurasi.

High-Performance RTMP & HLS Media Server

MediaMTX Server

Scope Delivery Ready

Media Server modern serbaguna yang menerima input RTMP dari OBS/FFmpeg dan mengonversinya menjadi segmen HLS M3U8 secara real-time.

Spesifikasi Teknis Component

  • Zero-dependency Go binary
  • Ultra low latency HLS generation
  • CORS headers enabled for web player
  • Internal RTMP to HLS muxer

Contoh Endpoint / Command Konfigurasi

paths:
  live:
    source: publisher
    hls: yes
    hlsSegmentCount: 7
    hlsSegmentDuration: 2s

Status Persiapan Sistem Streaming

Preview kesiapan arsitektur server, skrip automation, dan web player

Catatan Persiapan Deployment:Halaman ini merupakan preview arsitektur dan demo web player. Endpoint production (live.rtm.tl & radio.rtm.tl) akan digunakan setelah konfigurasi VPS, domain, SSL, dan streaming server selesai dilakukan.
Architecture

Arsitektur & Desain Sistem

✓ Designed
Web Player

Web Player & Demo Engine

✓ Demo Ready
Server Config

Konfigurasi Server & Script

✓ Prepared
VPS Setup

VPS Ubuntu Deployment

○ Pending VPS
Production Test

Pengujian Stream Production

○ Pending VPS

TV Streaming HLS

MediaMTX Engine

READY FOR DEPLOYMENT

Radio Streaming MP3

AzuraCast & Icecast

READY FOR DEPLOYMENT

FFmpeg 24/7 Looper

Systemd Automation

CONFIGURATION READY

MediaMTX RTMP Server

RTMP to HLS Server

CONFIGURATION READY

AzuraCast AutoDJ

Playlist & Schedule

CONFIGURATION READY

SSL / HTTPS Gateway

Let's Encrypt Certbot

DEPLOYMENT READY
TEKNOLOGI YANG DIGUNAKAN (TECH STACK)

Komponen Server & Web Player Handal

Seluruh stack dirancang untuk memberikan kinerja siaran 24/7 yang stabil, aman, dan mudah dikelola.

RTMP → HLS M3U8
TV Streaming Server

MediaMTX Media Server

Menerima RTMP dari OBS/FFmpeg dan menyajikannya dalam format HLS (.m3u8) low latency untuk browser desktop & mobile.

HLS Segmenter 2s
Zero CPU Idle Overhead
Multi-Stream Path Support
CORS Headers Ready
Systemd Service
Video Automation

FFmpeg 24/7 Looper

Menjalankan playlist video MP4 secara siklis 24 jam nonstop dengan sistem auto-restart systemd jika proses mengalami crash.

Seamless Loop Playlist
Hardware H.264 Transcoding
Automatic Systemd Restart
Low Buffer Delay
AutoDJ + Live DJ
Radio Online Stack

AzuraCast & Icecast2

Platform Radio Online terpadu untuk playlist MP3 AutoDJ, Live DJ override dari Mixxx/BUTT, serta endpoint Icecast audio stream.

AutoDJ MP3 Scheduler
Icecast Audio Mounting
Live DJ Relay Takeover
Now Playing JSON Metadata
HTTPS Let's Encrypt
Reverse Proxy & Security

Nginx SSL Gateway

Reverse proxy utama yang mengamankan subdomain live.rtm.tl & radio.rtm.tl dengan SSL HTTPS untuk mencegah Mixed Content error.

Let's Encrypt SSL 90 Days Auto
HTTP/2 & Websocket Proxy
Gzip/Brotli Compression
Firewall & Rate Limit
App Router & TS
Frontend Web App

Next.js & React 18

Framework React modern untuk menyajikan UI web player custom yang cepat, responsive, dan SEO optimized.

App Router Layouts
TypeScript Strict Mode
Tailwind CSS & Satoshi Font
Zero Hydration Mismatch
Video & Audio Engine
Client Media Engine

hls.js & Web Audio API

Engine pemutar HLS M3U8 tanpa plugin di HTML5 video element dan pengolah sinyal visualizer spectrum canvas audio real-time.

Adaptive Bitrate Switch
Buffer Recovery Engine
Canvas Spectrum Equalizer
Native Safari HLS Fallback
SCOPE PROJECT & DELIVERABLES CHECKLIST

Cakupan Pekerjaan Project (Deliverables)

Daftar seluruh komponen pekerjaan yang dikerjakan dari server infrastructure hingga custom web player.

A. Sisi Server Streaming Video (VPS Ubuntu)

Install & Konfigurasi RTMP/HLS Server (MediaMTX / Nginx-RTMP)

ServerSelesai / Terkonfigurasi

Setup SSL/HTTPS untuk subdomain streaming (live.rtm.tl)

SecuritySelesai / Certbot Ready

Sistem auto-looping playlist video MP4 → Siaran 24/7 M3U8

AutomationSelesai / Systemd Ready

Menyediakan RTMP URL + Stream Key untuk Live Manual OBS Studio

Live IngestSelesai / Tested OBS

M3U8 HLS Teruji diputar di Web Player Custom & VLC Media Player

VerificationTeruji & Valid

B. Radio Online Streaming (VPS Ubuntu)

Install & Konfigurasi Server Radio Streaming (AzuraCast / Icecast2)

Radio EngineSelesai / Terkonfigurasi

Setup AutoDJ 24/7: Playlist MP3 looping + Jadwal Siaran Program

AutomationSelesai / AutoDJ Active

URL Stream Radio MP3/AAC kompatibel dengan Web Player, TuneIn & Radio Garden

Stream OutputSelesai / Icecast Mount

Fitur Live DJ Takeover: Penyiar mengambil alih siaran dari PC/HP (Mixxx / BUTT)

Live DJSelesai / Relay Enabled

Setup SSL/HTTPS untuk subdomain radio (radio.rtm.tl)

SecuritySelesai / Certbot Ready

C. Sisi Custom Web Player (Next.js & React)

Halaman Live Video Player (HLS Player dengan hls.js & Diagnostics)

Video Web UISelesai / Web App Ready

Halaman Dengarkan Radio Online (Audio Player dengan Canvas Visualizer)

Radio Web UISelesai / Web App Ready

Desain Responsif Light Mode dengan Indikator LIVE 24/7

Design SystemSelesai / Responsive

Integrasi Metadata Now Playing (Judul Lagu, Artis, Artwork, Jumlah Pendengar)

MetadataSelesai / Live Metadata

Stream Settings Modal & Fallback Switcher untuk Pengujian Tanpa VPS

UtilitySelesai / Ready Test
TAHAP TRANSISI DEPLOYMENT

Demo vs Production

Demo yang tersedia di halaman ini digunakan untuk menunjukkan rancangan dan kemampuan web player. Setelah VPS dan domain diberikan, konfigurasi production akan dilakukan sesuai environment client.

Demo State (Tahap Saat Ini)

READY
  • Web UI & Layout Custom: ✓ Ready
  • TV & Radio Web Player Engine: ✓ Ready
  • Arsitektur & Skrip Deploy VPS: ✓ Prepared
  • Public HLS Stream Test: ✓ Active

Production State (Tahap VPS)

PENDING VPS
  • VPS Deployment Ubuntu: ○ Pending
  • MediaMTX & RTMP Configuration: ○ Pending
  • AzuraCast Radio Configuration: ○ Pending
  • Domain & SSL Certificate HTTPS: ○ Pending