OBS画面上でチャットを表示させる方法を教えてください

withnyのチャットを別ウィンドウで開き、OBS Studioのブラウザソースとして配信映像へ表示できます。

この機能はOBS配信で利用します。ブラウザ配信や音声のみ配信では、チャットを配信映像へ合成できません。

設定方法

1. チャットをポップアウトする

キャスト向け配信画面で 「OBS表示用のポップアウト」 を押します。
「チャットをポップアウトする」 を押します。
開いたウィンドウのURLをコピーします。

2. OBSにコメントを表示する

OBS Studioを開き、ソース欄の 「+」 を押します。
「ブラウザ」 を追加します。
URL欄に、コピーしたポップアウト画面のURLを入力します。
ブラウザの幅と高さを設定します。
見た目を変更する場合は、「カスタムCSS」 にこのページのCSSを貼り付けます。
「OK」 を押します。

利用イメージ

OBSの配信映像にwithnyのチャットを表示した例

カスタムCSS

① 白背景・黒文字（または背景透明）

body,
.p-comment-feed {
 background-color: rgb(255 255 255 / 100%) !important; /* 白背景 */
 /* background-color: rgb(255 255 255 / 0%) !important; */ /* 背景を透明にする場合はコメントを外す */
}

/* チャット: アイコン */
.c-comment__avatar,
.c-comment__avatar > div {
 /* width: 16px !important; */ /* アイコンの大きさを変更する場合はコメントを外す */
 /* height: 16px !important; */ /* アイコンの大きさを変更する場合はコメントを外す */
}

/* チャット: 送信者名 */
.c-comment__name {
 /* font-size: 12px !important; */ /* 文字の大きさを変更する場合はコメントを外す */
 /* font-weight: 500 !important; */ /* 文字の太さを変更する場合はコメントを外す */
 color: #000 !important; /* 文字の色 */
}

/* チャット: 本文 */
.c-comment__text {
 /* font-size: 12px !important; */ /* 文字の大きさを変更する場合はコメントを外す */
 /* font-weight: 500 !important; */ /* 文字の太さを変更する場合はコメントを外す */
 color: #000 !important; /* 文字の色 */
}

/* アイテム */
.c-item-comment {
 /* background-color: rgba(0 0 0 / 0%) !important; */ /* アイテムの背景色を消す場合はコメントを外す */
}

/* アイテム: テキスト */
.c-item-comment__container__name,
.c-item-comment__container__comment {
 /* color: #E15F85 !important; */ /* アイテムのテキストカラーを変更する場合はコメントを外す */
}

② 黒背景・白文字（または背景透明）

/* 背景 */
body,
.p-comment-feed {
 background-color: rgb(41 50 61 / 100%) !important; /* 黒背景 #29323d */
 /* background-color: rgb(255 255 255 / 0%) !important; */ /* 背景を透明にする場合はコメントを外す */
}

/* チャット: アイコン */
.c-comment__avatar,
.c-comment__avatar > div {
 /* width: 16px !important; */ /* アイコンの大きさを変更する場合はコメントを外す */
 /* height: 16px !important; */ /* アイコンの大きさを変更する場合はコメントを外す */
}

/* チャット: 送信者名 */
.c-comment__name {
 /* font-size: 12px !important; */ /* 文字の大きさを変更する場合はコメントを外す */
 /* font-weight: 500 !important; */ /* 文字の太さを変更する場合はコメントを外す */
 color: #fff !important; /* 文字の色 */
}

/* チャット: 本文 */
.c-comment__text {
 /* font-size: 12px !important; */ /* 文字の大きさを変更する場合はコメントを外す */
 /* font-weight: 500 !important; */ /* 文字の太さを変更する場合はコメントを外す */
 color: #fff !important; /* 文字の色 */
}

/* アイテム */
.c-item-comment {
 /* background-color: rgba(0 0 0 / 0%) !important; */ /* アイテムの背景色を消す場合はコメントを外す */
}

/* アイテム: テキスト */
.c-item-comment__container__name,
.c-item-comment__container__comment {
 /* color: #E15F85 !important; */ /* アイテムのテキストカラーを変更する場合はコメントを外す */
}