Twitchのコメントを外部連携なしでOBSの画面に乗せる方法

概要としてはコメントを見るページを表示用に整えてOBS上に置いておく形での実装。

1. 自分の配信画面を開いて”チャットの設定”を開き、チャット欄をポップアウト表示

2. ポップアウトした画面のURLをコピー

3. OBSのソースに”ブラウザ”を追加
名前は適当に付けて設定をします。

3-1. URLに先ほどコピーした、ポップアウトされたチャット画面のURLを貼り付け
3-2. 幅、高さを適当に指定
3-3. カスタムCSSに↓をコピペ

.stream-chat-header{display:none!important}
.chat-input{display:none!important}
.chat-line__status{display:none!important}
body{background:rgb(255 255 255 / 70%)!important}
.chat-room{background:#fff0!important}

OKで保存して終わり。これで一先ずOBS上にチャットが配置できているはず。(2023/2/7時点)

背景色はbody要素のカスタムの記述が効くので、そこのrgb値と透過率を書き換えれば完全に透明にしたり、白の透過率を上げて文字を見やすくすることも可。

外部連携するほどじゃないけど画面上にコメント乗せておきたい人には良い方法なんじゃないかと思います。