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

__________2018-08-21_11.55.49.png

 

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

 

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

__________2018-08-14_16.50.34.png

 

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

 

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

 

6. CSSの欄に下記をコピー&ペーストで貼り付けます。 

 

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

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }.skin10, .chat-menu, .chat-input-area, .yell-ticker-wrapper { display: none !important; }.movie-page-article { background: none; }.infinity-scroll-list { overflow: hidden !important; }.chat-list-content .chat-cell { background-color: rgba(0,0,0,0); color: #fff; text-shadow: -1px -1px #000000,-1px 0px #000000,-1px 1px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000; }.chat-list-content .chat-cell * { background-color: rgba(0,0,0,0); font-size: 16px; font-weight: bold; }

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

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

他にご質問がございましたら、リクエストを送信してください
Powered by Zendesk