HTML5 オーバーレイ：ブラウザのグラフィックスが配信に届くまで
現代のライブグラフィックスシステムのほとんどが、いまやブラウザエンジンで描画しています。このページでは HTML5オーバーレイ とは何か、透過がどうやってエンコーダーまで生き残るのか、グラフィックスがどうやってコントロールパネルと同期し続けるのか、そしてこの手法の限界がどこにあるのかを説明します。
HTML5オーバーレイとは
背景を一度も塗らない、ごく普通のウェブページです。テロップ、バグ、ティッカーといった各グラフィックスは、1920×1080のキャンバス上に配置されたDOM要素です。背後に何も描かないので、それ以外のピクセルはすべて透明になります。
エンコーダーはそのページを組み込みブラウザで開き（OBSは Chromium Embedded Framework の CEF を使います）、アルファチャンネルを尊重して結果をシーンに合成します。エンコーダーから見れば、動くPNGのような透過付きソースが1つ増えただけです。
送出中にグラフィックスが変わる仕組み
ページは一度開いたら開いたままです。オペレーターが TAKE を押すと、WebSocket でコマンドがページへ届き、ページはクラスを追加するか値を更新し、CSSが要素を画面へアニメーションさせます。再読み込みもファイル書き出しもありません。
これがライブデータを可能にします。ページはレンダリング済みのファイルではなく実行中のアプリケーションなので、グラフィックスが送出されたままスコアが進み、時計が動き、名前が変わります。
効くパフォーマンス原則
- transform と opacity だけをアニメーションさせる。 GPUで合成されます。width・height・top・left のアニメーションは毎フレームのレイアウト計算を強制します。
- box-shadow と filter のアニメーションは避ける。 広い面を再描画するため、オーバーレイがカクつく最大の原因です。
- DOMを小さく保つ。 数十要素なら普通です。数千要素はフレーム落ちする配信です。
- ポーリングしない。 100msごとに再描画するタイマーは、変化の有無に関わらず同じコストを払います。更新はソケットで押し込みましょう。
- キャンバスに合わせる。 エンコーダーの解像度で作り、ブラウザソースが決して再スケールされないようにします。再スケールは文字の輪郭をすべて甘くします。
HTML5では足りない場面
ブラウザソースはエンコーダーが合成するため、グラフィックスはそのエンコーダーの中にしか存在しません。スイッチャー、ハードウェアキーヤー、別の拠点へ送る必要があるなら、映像信号が必要です。SDIのキーとフィル、またはアルファ付きNDIです。NDIグラフィックス →
もう1つの限界はフレーム精度です。ブラウザは描けるときに描きます。配信では見えませんが、フレームを数えるチェーンには本物の送出サーバーが必要です。
この作りを選ぶ理由
LowerThird Software の出力ページは、意図的に退屈なHTML5です。透過背景、CSSアニメーション、SignalR経由の状態。つまりエンコーダーは既に使っているハードで合成し、CSSが分かるデザイナーは再ビルドなしに見た目を変えられます。OBSでの動作を見る →
完成したHTML5グラフィックス テンプレート、パネル、透過出力を1回のインストールで。テンプレートをゼロから作る必要はありません。
早期アクセスを申し込む