多窓のミラー配信について私的OBS設定@備忘録

こんにちは。
先日マリオ64ガチリレーの大会のミラーをしました。(くっそ前)

最初私はブラウザを多重起動して無理やりウインドウキャプチャーをしてミラーしていたのですが、それよりももっと快適な方法を発見したので今回はそのやり方を解説します。




最初こんな感じでやっていました。
ブラウザを多重起動すると負荷がえげつないです。
常時ファンが唸っていました。

まず完成したレイアウトを御覧いただきましょう。
こんな感じになります。



まあそんな感じです。

***********************************************
解説

配信画面のキャプチャについて
走者の画面のキャプチャにはOBSの｢ブラウザ｣という機能を使います。



このブラウザという機能の便利なところはOBSのソフト上でブラウザを操作できる点にあります。
ここの｢対話｣というところを選択するとこのようにOBS上にブラウザのウインドウが開きます。

⬇

私はこれを初めて見た時感動しました。泣きました。

ということで設定をしていきます。
ブラウザを選択するとこのような画面が出てきます。



まずURLにミラーしたい配信のURLを入れます。
このURLは事前にメモ帳などで管理しておけばスムーズに切り替えができると思います。
もしくは｢対話｣を使って、登録している配信を直接選択しても良いと思います。

次に　幅を　　768
　　　高さを　432　とします。

これでフルスクリーンを選択したときでも16:9の比率に合うようになります。

⬇

解像度を指定せず後からウインドウを引き伸ばしたりして調整するのも良いのですが、
目分量のやり方だと自分ではきれいに見えていてもやはりガタガタ感が否めないので
ここで解像度をすべて統一しておきます。
今回は右側にテキストを置いているので768x432と小さめですが、
それぞれ大会に合わせてこの解像度を変更して下さい。


次に｢OBSを介して音声を制御する｣にチェックを入れて下さい。
これをするとOBSの音量ミキサー上にブラウザの音声が現れ、ここで音量を調整できるようになります。



これで音量調節をする際にいちいちブラウザを操作する必要がなくなります。


次に｢カスタムCSS｣を変更します。
ここは標準だと

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

と書かれているのですが、これだと｢対話｣をした際にスクロールができません。
ということでこの部分を

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; }

と書き換えて下さい。
これでスクロールができるようになります。

これでブラウザのプロパティの設定は完了です。
これをそれぞれ多窓したい分作って下さい。
(ブラウザはコピーして複製ができないため)

次に位置を合わせていきます。



ブラウザソースを右クリックして｢変換｣→｢変換の編集｣を選択します。



するとこのような画面が出てきます。
｢位置｣で左上を起点としたX座標、Y座標の値を指定できます。

参考までに私の設定をココに記しておきます。

A:0.0000 , 110.0000
B:764.0000 , 110.0000
C:0.0000 , 648.0000
D:764.0000 , 648.0000

とりあえず意識することは
｢左右のY座標の数値は一緒にすること｣
｢上下のX座標の数値は一緒にすること｣　の2点です。


とりあえずこれで綺麗に画面が配置できたと思います。
ブラウザ機能は割と便利なのでどんどん使ったほうがいいと思う。




あとは名前とかネームプレートとかの配置なんですが、
これも先程の｢変換の編集｣を活用すれば同じように位置合わせができると思います。


おわり