WebRTC ile Gerçek Zamanlı İletişim Platformları: CommuneNow'dan Live P2P'ye
Dil öğrenme platformu CommuneNow ve P2P video arama uygulaması Live P2P projelerinde WebRTC ve Socket.IO ile gerçek zamanlı iletişim mimarisini nasıl kurguladım.
- WebRTC
- Socket.IO
- React
- Node.js
- P2P
Gerçek zamanlı sesli, görüntülü ve yazılı iletişim, modern web uygulamalarının en zorlu problem alanlarından biridir. WebRTC bu probleme tarayıcı tabanlı bir çözüm sunar; ancak production'a taşımak, basit bir demo yapmaktan çok daha karmaşıktır.
CommuneNow (dil öğrenme platformu) ve Live P2P (peer-to-peer video arama) projelerinde bu teknolojilerle çalıştım. Bu yazıda, gerçek dünya deneyimlerimi paylaşıyorum.
WebRTC Nedir ve Neden Kullanılır?
WebRTC (Web Real-Time Communication), tarayıcılar arası doğrudan ses, video ve veri iletişimini mümkün kılar. Merkezi bir medya sunucusu olmadan P2P bağlantı kurulabilir — bu da gecikmeyi düşürür ve maliyeti azaltır.
Temel bileşenler:
- getUserMedia: Kamera ve mikrofon erişimi
- RTCPeerConnection: P2P bağlantı yönetimi
- RTCDataChannel: Düşük gecikmeli veri transferi
- ICE/STUN/TURN: NAT traversal ve bağlantı kurulumu
CommuneNow: Dil Öğrenme Platformu
CommuneNow, kullanıcıların gerçek zamanlı sesli ve yazılı iletişimle dil pratiği yapmasını sağlayan bir platformdu. Web ve mobil için React ve Node.js kullanılarak geliştirildi.
Mimari Kararlar
- Frontend: React ile video chat UI, Socket.IO ile signaling
- Backend: Node.js + Express, WebRTC signaling server
- Veritabanı: MySQL (kullanıcı ve oturum verileri)
- Signaling: Socket.IO üzerinden offer/answer/ICE candidate exchange
Signaling server, WebRTC'nin kendisi değil; iki peer'ın birbirini bulmasını sağlayan koordinasyon katmanıdır. Bağlantı kurulduktan sonra medya trafiği doğrudan peer'lar arasında akar.
Karşılaşılan Zorluklar
- NAT ve firewall: Tüm kullanıcılar P2P bağlantı kuramaz. TURN server gerekebilir.
- Mobil tarayıcı kısıtlamaları: iOS Safari'de autoplay ve background behavior farklıdır.
- Bağlantı kalitesi: Düşük bant genişliğinde video kalitesini düşürmek gerekir.
- Eşleştirme algoritması: Dil seviyesi ve müsaitlik durumuna göre kullanıcı eşleştirmesi
Live P2P: Veritabanısız Video Arama
Live P2P, tamamen peer-to-peer çalışan, veritabanı içermeyen bir video arama prototipiydi. Amaç: minimum altyapı ile maksimum gizlilik ve düşük gecikme.
Teknik Yaklaşım
- React frontend
- Socket.IO signaling (oda oluşturma ve katılma)
- WebRTC ile doğrudan video/ses aktarımı
- TailwindCSS ile minimal UI
Veritabanı olmaması, kullanıcı verisi saklanmaması anlamına gelir — gizlilik odaklı bir tasarım. Ancak oda yönetimi ve bağlantı koordinasyonu için signaling server şarttır.
Öğrenilen Dersler
- P2P her senaryo için uygun değil; 3+ katılımcılı görüşmelerde SFU (Selective Forwarding Unit) gerekir
- Signaling server'ın güvenilirliği, tüm sistemin güvenilirliğini belirler
- Reconnection logic, kullanıcı deneyimini doğrudan etkiler
Qulak'ta WebRTC Deneyimi
Online sınav platformu Qulak'ta da WebRTC kullandık — bu sefer gözetmen-aday video akışı için. Sınav güvenliği bağlamında:
- Kamera zorunluluğu ve sürekli açık tutma kontrolü
- Ekran paylaşımı izleme
- Bağlantı kopması durumunda sınav duraklatma
Bu kullanım senaryosu, CommuneNow'daki serbest iletişimden çok farklı gereksinimlere sahipti. Aynı teknoloji, farklı domain logic ile birleştiğinde tamamen farklı bir ürün ortaya çıkar.
WebRTC vs WebSocket: Ne Zaman Hangisi?
| Özellik | WebRTC | WebSocket |
|---|---|---|
| Kullanım | Ses, video, P2P data | Text, notifications, state sync |
| Gecikme | Çok düşük | Düşük |
| Bant genişliği | Yüksek | Düşük |
| Karmaşıklık | Yüksek | Orta |
Çoğu gerçek zamanlı uygulama ikisini birlikte kullanır: WebSocket signaling ve state için, WebRTC medya için.
Sonuç
WebRTC, gerçek zamanlı iletişim uygulamaları için güçlü ama öğrenmesi zaman alan bir teknoloji. CommuneNow, Live P2P ve Qulak projelerinde edindiğim deneyim, farklı kullanım senaryolarında aynı teknolojinin nasıl farklı kurgulanması gerektiğini gösterdi.
Gerçek zamanlı sistemler geliştirmek isteyenlere tavsiyem: önce WebSocket ile basit bir chat yapın, sonra WebRTC ekleyin, en son production edge case'lerini (reconnection, TURN, mobile) ele alın.