OBS でイイ感じにテロップを出して LT を配信した話

先日,某 LT 会があり,その様子を身内用の限定公開で配信したのでその構成に触れつつ記事を書きます.

構成

配信ソフトウェアはオープンソースの配信用ソフトウェアとして有名な OBS (Open Broadcaster Software) で,これを使って考えていた当初の理想構成は以下のような感じです. f:id:k5342:20180527144139p:plain

名前 役割
iVCam iPhone をワイヤレスカメラとして Windows で使用可能にします.
jikkyo Twitter のリアルタイム検索結果をオーバーレイ表示します.
Capture board 発表者 PC の出力をキャプチャしてパススルー出力に流します.Intensity Shuttle を使っています.

k5342.hatenablog.com

テロップを出したい

前回の LT も同様な構成で配信をしていて,このときのライブ配信アーカイブを見た人から「いま誰が何を喋ってるか分かりにくい」という声があったので,今回は今誰が何を喋っているかをテロップとして出したい気持ちになりました.OBS にはテキストソースというのがあり,これを使います.テキストソースにはファイルの現在の内容をリアルタイムで表示してくれる機能 (!!!) があるので,これを使って Web ブラウザからテロップ表示内容を遠隔で変更する簡易的なアプリケーションを作ってみました.遠隔で操作できるようにした理由は,単にそっちのがカッコいいのと,真面目な理由として配信用マシンでカチャカチャ操作すると音が配信に乗っちゃうためです.

作った

日曜大工おじさんの出番.

github.com

obs-textsource-webserver は,テキストソースの表示内容を Web ブラウザから遠隔で切り替えられる Ruby 製ツールです.OBS が動いている端末と同じ端末で使います.このツールは TSV (Tab Separated Value; タブ区切りテキスト) で書かれたファイルを起動時に読み込み,Web インタフェースを通じて表示する行を切り替え,選択された行についてカラムの値をカラム名と同じファイル名として書き込みます.ファイルの読み書きで表示内容を切り替えるので多少ラグがあります. https://gyazo.com/6e353cedef570dd367e7a776d500a53e

今後の展望

今回は OBS のテキストソースをいい感じに切り替える Web サーバを作りました.実は OBS には他にブラウザソースがあり (!!!),これを使うことでブラウザの表示内容を配信画面に載せることができます.ブラウザソースは内部で Chromiumレンダリングしていて,Chromium で動くようなものなら基本的になんでも表示できるので,CSSJavaScript によってアニメーションやより凝ったデザインが可能になります.次はこのブラウザソースで表示できるビューを出力する機能が欲しいですね.それで外部のサーバに載せてワチャワチャできて良さそう.