Canlı Yayın

Rehber: Yayına Gerçek Zamanlı Maç Verisi Ekleyin — OBS, WebSocket ve Basit Python ile 6 Adımda Etkileşimli Overlay Oluşturma

Rekabet · 17 Şubat 2026 · 5 dk okuma · 15 görüntülenme

Canlı yayınlarınızı bir sonraki seviyeye taşımak mı istiyorsunuz? Bu rehberde OBS Studio, WebSocket protokolü ve basit bir Python arka ucu kullanarak yayına gerçek zamanlı maç verisi nasıl entegre edilir, 6 adımda anlatacağım. Sonuç: izleyicilerle etkileşim kuran, otomatik güncellenen ve performans odaklı bir overlay.

Neden gerçek zamanlı maç verisi ve interaktif overlay?

Sadece kamera görüntüsü ve mikrofon yeterli değildir. Tayfasal skorlar, oyuncu istatistikleri, maç zamanlayıcıları ve anlık olaylar izleme deneyimini ciddi şekilde iyileştirir. İzleyicinin dikkatini tutar, sohbet ve bağış etkileşimlerini artırır ve profesyonel bir yayın hissi sunar.

Ön Hazırlık: Gerekenler ve mimari özeti

Bu projede kullanacağımız bileşenler:

OBS Studio (ve OBS WebSocket eklentisi)
Python 3.8+ (basit bir WebSocket sunucusu için)
Basit bir HTML/CSS overlay dosyası (Browser Source olarak OBS içinde kullanacağız)
Maç verisini sağlayan bir kaynak: API, manuel giriş aracı ya da basit bir suit

Mimari kısaca şöyle işler: Maç verisi Python tarafında toplanır veya manuel güncellenir. Python bir WebSocket sunucusu aracılığıyla overlay e veri gönderir. OBS içinde Browser Source, bu veriyi alıp DOM u günceller ve görüntüyü yayınlar.

Adım 1: OBS ve OBS WebSocket kurulumu

OBS Studio zaten yüklüyse kontrol edin, yoksa yükleyin. Ardından OBS WebSocket eklentisini kurun. Bu eklenti OBS ile harici istemciler arasında WebSocket üzerinden iletişime izin verir. Kurulumdan sonra port, parola ve izinleri not edin.

İyi uygulamalar:

WebSocket portunu varsayılandan farklı belirleyin
Güçlü bir parola ve gerekirse IP kısıtlama uygulayın
Test amaçlı yerel bağlantılar için loopback kullanın

Adım 2: Basit Python WebSocket sunucusunu yazın

Amaç düşük gecikmeli, stabil bir veri akışı sağlamak. Aşağıda konsept için minimal bir WebSocket sunucusu örneği var. Bu sunucu, gelen HTTP istekleriyle değil güvenilir WebSocket bağlantılarıyla çalışır. Prototip aşamasında kullanabilirsiniz; prodüksiyon için ek hata yakalama, yeniden bağlanma ve doğrulama ekleyin.

import asyncio import json import websockets clients = set() async def handler(websocket, path): clients.add(websocket) try: async for message in websocket: # Gelen mesajları loglayabilir veya broadcast edebilirsiniz pass finally: clients.remove(websocket) async def broadcast_update(data): if not clients: return message = json.dumps(data) await asyncio.wait([c.send(message) for c in clients]) # Örnek kullanım: maç verisi güncellendiğinde broadcast_update cagirin # asyncio.get_event_loop().run_until_complete(websockets.serve(handler, '0.0.0.0', 6789)) # asyncio.get_event_loop().run_forever()

Notlar:

Güvenlik için ws yerine wss ve TLS kullanmayı düşünün
Yeniden bağlanma ve tamponlama (debounce) mekanizmaları ekleyin

Adım 3: Overlay HTML/CSS/JS iskeleti oluşturun

OBS Browser Source HTML dosyası, yayın sırasında görünür ögedir. Basit, hafif ve responsive olmalı. Aşağıdaki yapı, skor, takımlar ve zamanlayıcı için bir başlangıç sunar.

Team A 0

Team B 0

00:00

İyi uygulamalar:

CSS ile gölgeler, okunabilirlik ve kontrast sağlayın
Mobil ve farklı çözünürlükler için responsive düşünün
Yavaş bağlantı durumunda fallback metinleri ekleyin

Adım 4: Veri kaynağı ve güncelleme mekanizması

Maç verisini beslemenin üç yaygın yolu vardır:

Resmi API kullanmak (canlı skor servisi veya oyun API si)
Manuel web arayüzünden sunucuya veri göndermek
Otomatik olay tespit sistemi (örneğin oyun içi logları parse etmek)

Örnek: Manuel kontrol paneli üzerinden bir admin düğmeye bastığında Python tarafı JSON oluşturup broadcast_update fonksiyonunu çağırır. Bu, anlık olayları (skor değişimi, işaretlenmiş oyuncu) anında yayınlar.

Adım 5: OBS içinde Browser Source yapılandırması

OBS e dönün ve Scene içinde yeni Browser Source ekleyin. Overlay HTML dosyanızın URL sini veya yerel dosya yolunu gösterin. Kritik ayarlar:

Width ve height: yayın çözünürlüğüne uygun değerler
FPS: 30 veya 60, animasyon ve timer gereksinimine göre
Refresh cache of current page when source becomes active: geliştirirken kapatın/açın

Test ederken tarayıcı geliştirici konsolunu açmak faydalıdır. OBS deki Browser Source tarayıcısı da hata logları üretebilir.

Adım 6: Test, performans optimizasyonu ve güvenlik

Yayın öncesi yapmanız gerekenler:

Local test: Sunucu ve OBS aynı makinede çalışıyorsa loopback ile test edin
Gecikme ölçümü: Verinin gönderilip DOM un güncellenmesi arasındaki süreyi ölçün
Stres testi: Birkaç eşzamanlı bağlanan istemci ve hızlı güncelleme senaryoları deneyin

Performans ipuçları:

Overlay içinde gereksiz DOM güncellemelerinden kaçının; sadece değişen elementleri güncelleyin
WebSocket mesajlarını minimal JSON ile gönderin
Görüntü işleme veya ağır JS işlemlerini Web Worker a taşıyın

Güvenlik adımları:

Trafiği TLS ile şifreleyin (wss://)
Yetkilendirme ve token tabanlı doğrulama uygulayın
Sunucu tarafında rate limiting ve input sanitization yapın

Sık Karşılaşılan Sorunlar ve Çözümleri

Bağlantı kurulmazsa:

Port ve firewall ayarlarını kontrol edin
OBS WebSocket eklentisinin versiyon uyumunu doğrulayın

Overlay güncellenmiyorsa:

Browser Source un cache ayarını kontrol edin
JS konsol hatalarını inceleyin

Yavaş veya takılan güncellemeler:

Mesaj frekansını düşürün, debounce uygulayın
Gereksiz animasyonları kaldırın

Gelişmiş İpuçları ve Özelleştirmeler

Projeyi bir üst seviyeye taşımak için:

Chat komutları ile skor güncelleme entegrasyonu
Oyuncu kartı açılır pencereleri, anlık klip tetikleme
Analitik: izleyici etkileşimi ile maç olaylarını korele eden raporlar
Temalar: farklı oyun türleri için responsive şablonlara sahip olmak

Sonuç

OBS, WebSocket ve basit bir Python arka ucu ile canlı yayınlarınıza gerçek zamanlı maç verisi eklemek erişilebilir ve etkili bir çözümdür. Yukarıdaki 6 adımı takip ederek minimal bir prototip kurabilir, ardından güvenlik, performans ve kullanıcı deneyimi odaklı iyileştirmeler yapabilirsiniz. Unutmayın: doğru veri mimarisi ve hafif overlay tasarımı izleyici deneyimini belirler. Başlarken küçük, test odaklı ve iteratif ilerleyin.

Kaynakça ve ileri okuma