HTML5 overlay: tarayıcı grafikleri yayına nasıl ulaşır
Bugün neredeyse bütün modern canlı grafik sistemleri bir tarayıcı motorunda çiziyor. Bu sayfa HTML5 overlay'in ne olduğunu, şeffaflığın kodlayıcıya nasıl sağ ulaştığını, grafiklerin kontrol paneliyle nasıl senkron kaldığını ve tekniğin nerede yetmediğini anlatıyor.
HTML5 overlay nedir
Arka planı hiç boyanmayan sıradan bir web sayfasıdır. Her grafik — kuşak, bant, şerit — 1920×1080'lik bir tuvale yerleştirilmiş bir DOM öğesidir. Sayfa arkalarına hiçbir şey boyamadığı için diğer bütün pikseller şeffaftır.
Kodlayıcınız bu sayfayı gömülü bir tarayıcıda açar (OBS, Chromium Embedded Framework kullanır) ve sonucu alfa kanalına saygı göstererek sahnenize bindirir. Kodlayıcı açısından bu, hareket eden bir PNG gibi şeffaflığı olan başka bir kaynaktır.
Grafikler yayındayken nasıl değişiyor
Sayfa bir kez açılır ve açık kalır. Operatör VER dediğinde bir komut WebSocket üzerinden sayfaya gider; sayfa bir sınıf ekler ya da bir değeri günceller ve CSS öğeyi ekrana getirir. Hiçbir şey yeniden yüklenmez, hiçbir dosya yazılmaz.
Canlı veriyi mümkün kılan şey budur: skor sayabilir, saat işleyebilir ve isim, grafik hâlâ yayındayken değişebilir; çünkü sayfa render edilmiş bir dosya değil, çalışan bir uygulamadır.
Önemli olan performans kuralları
- Yalnızca transform ve opacity animasyonu yapın. Bunlar GPU'da birleştirilir. Genişlik, yükseklik, top ya da left animasyonu her karede yerleşim hesabı zorlar.
- Animasyonlu box-shadow ve filter'dan kaçının. Geniş alanları yeniden boyarlar; takılan overlay'in en sık sebebidir.
- DOM'u küçük tutun. Birkaç düzine öğe normaldir. Birkaç bin öğe kare düşüren bir yayındır.
- Yoklama yapmayın. Her 100 ms'de yeniden çizen bir zamanlayıcı, hiçbir şey değişmese de aynı maliyeti öder; bunun yerine güncellemeleri soketten itin.
- Tuvale eşitleyin. Kodlayıcının çözünürlüğünde kurun ki browser source hiç ölçeklenmesin; ölçekleme her yazı kenarını yumuşatır.
HTML5'in yetmediği yer
Browser source kodlayıcınız tarafından bindirilir; yani grafikler yalnızca o kodlayıcının içinde vardır. Bir vizyon mikserini, donanım keyer'ı ya da ikinci bir tesisi beslemeniz gerekiyorsa video sinyali gerekir: SDI key ve fill ya da alfa kanallı NDI. NDI grafik →
Kare hassasiyeti diğer sınırdır. Tarayıcı çizebildiğinde çizer; yayıncılıkta bu görünmez, ama kare sayan bir yayın zinciri gerçek bir playout sunucusu ister.
Neden böyle kuruyoruz
LowerThird Software'deki çıkış sayfası bilinçli olarak sıkıcı HTML5'tir: şeffaf arka plan, CSS animasyonları, SignalR üzerinden durum. Bu, kodlayıcınızın birleştirmeyi zaten kullandığı donanımda yapması ve CSS bilen bir tasarımcının görünümü yeniden derleme olmadan değiştirebilmesi demektir. OBS'te çalışırken görün →
Hazır HTML5 grafikler Şablonlar, panel ve şeffaf çıkış tek kurulumda — sıfırdan başlayacak bir şablon projesi yok.
Erken erişim iste