Web seminerleri, koçluk oturumları veya şirket toplantıları için ürününüze canlı yayın özelliği eklemek istiyorsanız, doğru yerdesiniz. Bu makalede, bir SaaS dashboard'una 'Canlı Yayına Geç' butonu eklemenin pratik bir yolunu anlatacağız. Zorlu kısımlar olan medya sunucuları, kod dönüştürme ve CDN dağıtımını yönetilen bir hizmetle (örneğin FastPix, Mux, Cloudflare Stream veya api.video) çözeceğiz. Geriye sadece backend endpoint'i, OBS yapılandırması, LL-HLS oynatıcı ve webhook işleyici kalıyor. Hadi başlayalım!
İlk adım, sunucu tarafında bir canlı yayın oluşturmak. FastPix API'sine POST isteği göndererek bir stream oluşturuyoruz. Gelen yanıtta stream ID, stream key (yayıncıya özel) ve playback ID (izleyicilere özel) bulunuyor. Stream key'i sadece yayıncıya gösterin ve şifreli saklayın. Playback ID ise herkese açık olabilir. Bu bilgileri veritabanınızda webinar kaydıyla ilişkilendirin. OBS ayarları için yayıncılara sunucu adresi (rtmps://...) ve stream key'i vermeniz yeterli. OBS'den 'Yayını Başlat' butonuna basınca, platform otomatik olarak uyarlanabilir bitrate'li akış oluşturmaya başlar.
İzleyici tarafında ise LL-HLS (Düşük Gecikmeli HLS) kullanıyoruz. Safari HLS'yi yerel destekler, diğer tarayıcılar için ise hls.js kütüphanesiyle MSE (Media Source Extensions) üzerinden oynatma sağlıyoruz. hls.js ile lowLatencyMode: true seçeneği sayesinde gecikme saniyelerle sınırlı kalır. Eğer alt saniye gecikme gerekiyorsa (örneğin canlı müzayede veya tele-sağlık), WebRTC mimarisi düşünülmelidir. Ayrıca, ücretli içerikler için playback URL'lerini herkese açık yapmayın; JWT tabanlı kısa süreli token'lar kullanın.
Uzmanların Görüşleri
Webhook'lar, canlı yayın durumunu UI'a yansıtmak için en etkili yöntemdir. Yayıncı bağlandığında 'aktif', koptuğunda 'yeniden bağlanıyor', yayın sona erdiğinde 'bitti' ve kayıt hazır olduğunda 'tekrar izle' durumlarına geçilir. Webhook işleyicinizde bu olayları yakalayıp veritabanını güncellemeniz yeterli. Unutmayın, webhook'lar birden fazla kez ve sırasız gelebilir; bu yüzden idempotent (tekrarlanabilir) işlemler yazın. Ayrıca, her zaman 200 OK dönerek webhook'u hemen onaylayın, ağır işleri asenkron yapın. Bu basit adımlarla, bir öğleden sonra çalışan bir 'Canlı Yayına Geç' butonu ekleyebilirsiniz.
