こちらの画像のように、ご自身の配信にチャットを表示する方法についてご案内いたします。
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 300で設定したいため、Widthに300、Heightに300を入力します。
5. FPS値を決めます。値を大きくするとPCにかかる負荷も増えるため、今回は30で設定していきます。
6. CSSの欄に下記をコピー&ペーストで貼り付けます。 お好みのスタイルをお選びください
========== 以下 切り取り ============
html { font-size: 10px;} body { margin: 0 auto; background: none; overflow: hidden; } .chat-menu, .chat-input-area, .yell-ticker-wrapper, [class*=Background__Wrapper], [class*=Chat__LowLatencyWrapper] { display: none !important; } .movie-page-chat-aside { background: none; } .infinity-scroll-list { overflow: hidden !important; } .chat-list-content { background: none; } [class*=SystemChat__Wrapper], [class*=ChatArticle__FixedPhraseWrapper], .system-chat-cell-wrapper { display: none !important; } .chat-cell { text-shadow: #000 1px 1px 0, #000 -1px 1px 0, #000 1px -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 -1px 1px 0, #000 1px -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修正：リニューアルに伴い、内容を更新しました
7. 最後に配信上に表示する位置を調整し、完了となります。