以下の様に良い感じでOBSに17Liveのコメントが表示されるようになります。
また、コラボの際に相手枠のコメントを表示するなど、応用も効くかと思います。
「URL」にコメントを取得したい配信のURLを張り付ける。
※幅と高さについては、幅対高さが2対3ぐらいになるようにしてください。
OBSに音声を再ルーティングするにチェックを入れる。
カスタムCSSに「2-1. カスタムCSSの設定」で解説したCSSをコピペする。
①縦長配信の場合は以下のカスタムCSSを設定する。
縦長配信の場合のカスタムCSS。
body { background-color: rgba(0, 0, 0, 0) !important; margin: 0px auto; overflow: hidden; }
.MobileBlock__MobileBlockRelativeWrapper-bziSJ {display: none;}
.Live__OverFlowHiddenContainer-kWnEQR {display: none;}
.Live__TopShadow-bUiich {display: none;}
.Live__ContentContainer-exTHxW {display: none;}
.Nav__NavRelativeWrapper-empriJ {display: none;}
.SuggestedPanel__PanelWrapper-fnDgsA {display: none;}
.FooterWrapper-wVyic {display: none;}
.Snackbars__SnackbarsWrapper-jMcqCx {display: none;}
.Live__Shadow-kQTDiu {background-color: transparent !important;}
.ChatListContainer-hgYdaF {background-color: transparent !important;}
.MobileChatList__ListWrapper-kRMrAH {background-color: transparent !important;}
.MobileChat__ChatWrapper-kQtXCh {background-color: transparent !important;}
.Container-ifeZxx {
background-color: rgba(0,0,0,0);
}
.enpNxD {
background-image:linear-gradient(rgba(40, 35, 45, 0), rgba(40, 35, 45, 0) 0%, rgba(40, 35, 45, 0));
}
.jiNCLS .MobileChatList__ListWrapper-kRMrAH {
position: fixed;
top: 1px;
left: 1px;
max-height: 99vh;
}
②横長配信の場合は以下のカスタムCSSを設定する。
横長配信の場合のカスタムCSS。
body { background-color: rgba(0, 0, 0, 0) !important; margin: 0px auto; overflow: hidden; }
.MobileBlock__MobileBlockRelativeWrapper-bziSJ {display: none;}
.Live__OverFlowHiddenContainer-kWnEQR {display: none;}
.Live__TopShadow-bUiich {display: none;}
.Live__ContentContainer-exTHxW {display: none;}
.Nav__NavRelativeWrapper-empriJ {display: none;}
.SuggestedPanel__PanelWrapper-fnDgsA {display: none;}
.FooterWrapper-wVyic {display: none;}
.Snackbars__SnackbarsWrapper-jMcqCx {display: none;}
.Live__Shadow-kQTDiu {background-color: transparent !important;}
.ChatListContainer-hgYdaF {background-color: transparent !important;}
.MobileChatList__ListWrapper-kRMrAH {background-color: transparent !important;}
.MobileChat__ChatWrapper-kQtXCh {background-color: transparent !important;}
.Container-ifeZxx {
background-color: rgba(0,0,0,0);
}
.enpNxD {
background-image:linear-gradient(rgba(40, 35, 45, 0), rgba(40, 35, 45, 0) 0%, rgba(40, 35, 45, 0));
}
.MobileChatList__ListWrapper-kRMrAH {
position: fixed !important;
top: 1px !important;
left: 1px !important;
max-height: 99vh !important;
}
ブラウザソースの「OBSに音声を再ルーティング」にチェックを入れていると、ブラウザソースに対する音声ミキサーの操作が出来るので、ミュートに設定する。
※これを設定しないと、指定したURLの17Liveの音声が流れる事になります。
エフェクトフィルタにクロマキーを追加し、以下の画像の様な設定にする。
※各々微調整してください。