チャットを配信画面に表示する方法について

 

こちらの画像のように、ご自身の配信にチャットを表示する方法についてご案内いたします。

 

1. OBS(配信ツール)を立ち上げます。

2. ソースから + アイコンをクリックし、ブラウザ(BrowserSource)を選択します。

3. 各種設定を入力していきます。まずはじめにURLの入力欄に動画のurlを貼り付けます。下記のように、ご自身のチャンネルのIDを書いておくと今後の変更が少なく便利です。

※ユーザIDがわからない方はOPENRE上部ののご自身のアイコンをクリックしていただき、@以降の文字列がユーザIDとなります。

https://www.openrec.tv/live/[ユーザID]/chat

例:) https://www.openrec.tv/live/openrec/chat

 

4. 次に画面に表示する大きさを決めます。今回は表示の大きさを300 x 600で設定したいため、Widthに300、Heightに600を入力します。

 

5. FPS値を決めます。値を大きくするとPCにかかる負荷も増えるため、今回は30で設定していきます。

 

6. CSSの欄に下記をコピー&ペーストで貼り付けます。 お好みのスタイルをお選びください

========== 以下 切り取り ============

html{font-size:12px;background-color:transparent}body{margin:0 auto;background:0;overflow:hidden}.chat-menu,.chat-input-area,.yell-ticker-wrapper,[class^=Background__Wrapper],[class^=Chat__LowLatencyWrapper],[class^=ChatArticle__FesEventIconSliderWrapper-]{display:none !important}.movie-page-chat-aside{background:0}.infinity-scroll-list{overflow:hidden !important}.chat-list-content{background:0}[class^=SystemChat__Wrapper],[class^=ChatArticle__FixedPhraseWrapper],.system-chat-cell-wrapper,[class^=FanletterAppealChat__Wrapper-],[class^=MemberAppealChat__Wrapper-]{display:none !important}[class^=ChatList__NewChat-]{display:none}.chat-cell{text-shadow:#000 1px 1px 0,#000 0 1px 0,#000 -1px 1px 0,#000 1px 0 0, #000 -1px 0 0,#000 1px -1px 0,#000 0 -1px 0,#000 -1px -1px 0;background:rgba(10,4,36,0.3)}.chat-content{color:#fff}[class^=ChatArticle__Wrapper]{background:transparent}.capture-chat{text-shadow:#000 1px 1px 0,#000 0 1px 0,#000 -1px 1px 0,#000 1px 0 0, #000 -1px 0 0,#000 1px -1px 0,#000 0 -1px 0,#000 -1px -1px 0;background:rgba(10,4,36,0.3);border:1px solid rgba(255,255,255,0.3)}.capture-chat-message{color:rgba(255,255,255,0.8);text-shadow:none}.capture-chat-title{color:#fff}.yell-label-content{background:rgba(255,255,255,0.15);color:#fff}

 ========== 以上 切り取り ============

2019/7/9修正:定型チャットの投稿に対応しました

2019/12/17修正:リニューアルに伴い、内容を更新しました

2021/3/19修正:フェスに伴い、内容を更新しました

2022/4/25修正

2024/4/24修正

7. 最後に配信上に表示する位置を調整し、完了となります。

この記事は役に立ちましたか? 12人中9人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください
Powered by Zendesk