OBS alt bant: tek browser source, bütün grafikler
OBS Studio canlı HTML5 grafiklerini kendi başına gösterebilir — eklenti yok, capture kartı yok, ikinci makine yok. Bu sayfa, tek şeffaf browser source ile OBS alt bantları, skor kuşakları ve haber bantlarının birebir kurulumunu ve karşılaşılan sorunların çözümünü anlatır.
Neden medya kaynağı değil de browser source?
Medya kaynağı bir dosya oynatır. Browser source ise canlı bir web sayfası çalıştırır; sahnenizin üstüne tam alfa şeffaflığıyla bindirir ve gerçek zamanlı günceller. Canlı grafik için bu fark her şeydir: sayfa yayındayken kendi içeriğini değiştirebilir, yani skor ya da isim OBS'e dokunmadan güncellenir.
Ayrıca tek kaynak bütün grafikleri taşır. Kuşak, skor bandı ve haber bandı aynı şeffaf sayfadaki öğelerdir; birbirlerine göre kaymazlar ve on iki kaynaklık bir yığın kurmazsınız.
Kaynağı ekleme — adım adım
- LowerThird Software'i başlatın. Kontrol panelini ve çıkış sayfasını kendi makinenizden sunar.
- OBS'te kameranızın ya da oyun yakalamanızın bulunduğu sahneyi seçin. Kaynaklar altındaki + düğmesine basıp Tarayıcı (Browser) seçin.
- Adını Grafik koyup Tamam deyin.
- URL alanına
http://localhost:5275/outputyazın. - Genişlik 1920, yükseklik 1080 girin — tuval çözünürlüğünüzle aynı olsun, kaynağı sahnede yeniden boyutlandırmayın.
- Görünmediğinde kaynağı kapat seçeneğini işaretlemeyin; sahne etkinleşince tarayıcıyı yenile seçeneğini yalnızca her sahne değişiminde grafiklerin sıfırlanmasını istiyorsanız işaretleyin.
- Tamam deyin ve kaynağı listenin en üstüne sürükleyin ki kameranın üstünde dursun.
Şeffaflık: ayarlanacak bir şey yok
İnsanlar sık sık bir şeffaflık ayarı arar. Böyle bir ayar yok ve olmasına gerek de yok — OBS browser source sayfanın alfa kanalını zaten dikkate alır. Çıkış sayfası arka planını boyamıyorsa OBS yalnızca çizilen pikselleri sahnenize bindirir.
Siyah ya da beyaz bir dikdörtgen görüyorsanız arka planı OBS değil, sayfa boyuyordur. Kaynak penceresindeki özel CSS ile üçüncü parti bir sayfa düzeltilebilir (body { background: transparent !important; }), ama yayın için yazılmış bir sayfa zaten şeffaf olmalıdır.
Ölçü, ölçekleme ve güvenli alan
Kaynağı her zaman tuvalinizle aynı çözünürlükte oluşturun — normalde 1920×1080 — ve grafikleri OBS'te büyütüp küçültmek yerine sayfanın içinde konumlandırın. Browser source'u ölçeklemek yazıyı yeniden örnekler ve bütün kenarları yumuşatır; yayındaki yazıların bulanık görünmesinin bir numaralı sebebi budur.
1280×720 yayın yapıyorsanız kaynağı 1920×1080 tutun ve OBS bütün tuvali sonda bir kez küçültsün. Tek temiz küçültme, iki ölçekleme adımından iyidir.
Beş sorun ve çözümü
- Kaynak boş. Uygulama çalışmıyordur ya da port farklıdır. Adresi önce normal tarayıcıda açın — orada da boşsa sorun OBS'te değil uygulamadadır.
- Grafikler güncellenmiyor. Sayfa önbellekte kalmış ya da soket düşmüştür. Kaynağa sağ tıklayıp Etkileşim deyin veya yenileyin. WebSocket üzerine kurulu bir sayfa kendi başına yeniden bağlanmalıdır.
- Yazılar yumuşak görünüyor. Kaynak ölçekleniyordur. Dönüşümü sıfırlayın (kaynak seçiliyken Ctrl+R) ve boyutu kaynak özelliklerinden verin.
- Her şey takılıyor. OBS'te donanım hızlandırma kapalıdır ya da pahalı bir animasyon çalışıyordur. Genişlik/yükseklik/gölge yerine GPU'nun hallettiği transform ve opacity animasyonlarını tercih edin.
- Sahne değişince overlay kayboluyor. Görünmediğinde kaynağı kapat işaretlidir. İşareti kaldırın ya da aynı kaynağı her sahneye kopya değil referans olarak ekleyin.
Yayındayken çalışmak
Kontrol panelini ikinci ekranda ya da masadaki bir tablette tutun — sonuçta bir web sayfası, ağınızdaki tarayıcısı olan her şey onu sürebilir. Şu anki konuk ekrandayken bir sonrakinin adını yazın, kadraj değişince VER deyin.
Komutlar WebSocket ile gittiği için yoklama gecikmesi ve yenileme yoktur: tıklarsınız, animasyon aynı karede başlar.
Kendi sahnenizde denemeye hazır mısınız? Erken erişim sürümünü alın, tek browser source ekleyin, beş dakikada isim kuşağını yayına verin.
Erken erişim iste