任天堂スイッチでAmong US配信 Discord StreamKit Overalyで重ねる方法

任天堂スイッチでAmong USを配信でDiscordのボイスチャット音声を、StreamKit Overalyを利用し無料配信ツールのOBSで重ねる方法と、discordのアイコンをデザインするカスタムCSS設定の方法をまとめます。

Among US配信で事前インストールの前提
Among US配信で事前インストールの準備１：Discord設定
Among US配信で事前インストールの準備２：OBS設定
Discordのボイスチャット音声のUIを変更するカスタムCSS
任天堂スイッチAmong US配信でDiscordのボイスチャット音声をStreamKit OveralyでOBSに重ねカスタムCSS設定する方法

Among US配信で事前インストールの前提

任天堂スイッチでAmong US配信用で、Discordのボイスチャット音声を、OBSで重ねるには、まず下記が必要です。

配信ツールOBSのインストール
Discordインストール
映像取得デバイス準備

上記のインストール・登録・登録をします。私はMacですが、Windows共にインストール可能です。

obsproject.com

discord.com

Among US配信で事前インストールの準備１：Discord設定

任天堂スイッチでAmong US配信用で、Discordのボイスチャット音声をOBSで重ねるために、Discord側の設定をします。

１：Discordでサーバー（グループ）を作る

２：Discordでボイスチャンネルを作る

３：Discord画面左下の歯車（ユーザー設定）

f:id:hiroshilab:20210114144417p:plain

４：テーマ内の開発者モードをONに

f:id:hiroshilab:20210114144521p:plain

５：Discord StreamKit Overlayにアクセス

【解説】Discord StreamKit Overlayは起動中のDiscordをブラウザで表示しWEBで動作するように、ブラウザでDiscordのサーバー表示するサイトです。

このブラウザ表示するURLを取得し、後にOBSでURLを読み、ブラウザの動作と、映像を重ねることでOverlay表示させます。

streamkit.discord.com

６：Discordを起動し、Discord内の「Server」読込み→各設定を画面を見ながら調整

f:id:hiroshilab:20210114144804p:plain

７：Voice Widgetタブも画面を見ながら設定

→アイコン・音声・テキスト表示の調整可

f:id:hiroshilab:20210114144857p:plain

８：右下のURLをコピペ。

※試しにChromeで開き、動作を確かめてみましょう。

Among US配信で事前インストールの準備２：OBS設定

任天堂スイッチでAmong US配信用で、Discordのボイスチャット音声をOBSで重ねるために、OBSの設定をします。

１：OBSを開き左下で「新規シーン」作成

f:id:hiroshilab:20210114145459p:plain

２：OBSで読込む「ソース」設定。プラスボタンで「ブラウザ」を選択

f:id:hiroshilab:20210114145602p:plain

3：「ブラウザ」で名前をつけ新規作成

f:id:hiroshilab:20210114145650p:plain

４：Discord StreamKit で取得したURLをペースト。カスタムCSSはそのままで大丈夫です。(コードは後述します）

f:id:hiroshilab:20210114145758p:plain

f:id:hiroshilab:20210114145955p:plain

５：OBSでブラウザで表示中のDicord音声チャットを背景透過で取得し、動画を重ねられます。後は、OBSで取得したい動画を追加していくだけです。

f:id:hiroshilab:20210114150026p:plain

私は、映像キャプチャデバイスは下記を利用しています。

▼4Kパススルー機能で（収録ＰＣへのHDMI出力と、ゲームモニターへHDMI出力する。4K動画を文字通り「スルー」する）１ｃｈ利用時に使用します。OBSで利用しています。

AVerMedia Live Gamer Ultra GC553 [4Kパススルー対応 USB3.1接続外付けゲームキャプチャーボックス] DV488

発売日: 2018/07/20
メディア: Personal Computers

▼1080pで4チャンネルのHDMIを簡易切替えできます。PC、ゲーム、iPad、スイッチ、iPhoneなどの出力を切替えられます。リモート会議、ゲーム配信、OBS配信で超便利。

【国内正規品】Blackmagic Design ライブプロダクションスイッチャー ATEM Mini SWATEMMINI

発売日: 2019/11/19
メディア: エレクトロニクス

▼配信時は、OBS、Discord、ゲーム利用などモニターは広い程便利なので下記を利用。

【Amazon.co.jp 限定】LG モニターディスプレイ 34WL500-B 34インチ/21:9 ウルトラワイド(2560×1080)/HDR/IPS 非光沢/FreeSync対応/HDMI×2

発売日: 2019/09/26
メディア: Personal Computers

▼３０００円台で買える、超コスパの良いモニターアームでモニターを浮かせます。

BESTEK PC モニターアーム液晶ディスプレイアームクランプ式水平多関節 17-27インチ対応 BTSS01BK

メディア: エレクトロニクス

７：映像キャプチャーはHDMIキャプチャーやATEM miniで取得でも良し、PC表示中画面、Quicktime経由でiPhoneの画面も取得可能です。OBSは便利なので色々試せます。

※参考：音声を別撮りも可能で、ゲーム内音楽と自分の声をオーディオインターフェースから取得も可能

Discordのボイスチャット音声のUIを変更するカスタムCSS

OBS設定で飛ばしましたが、下記のカスタムCSSを変更すると、Streamkit Overlayのシンプルな表示だけでなく、

Discordで話すと画像が、ぴょこぴょこ動く
Discordで話すと画像が、点滅する

などの、CSS設定で画像表示を変更することも可能です↓

f:id:hiroshilab:20210114151900p:plain

下記２サイトが設定方法記載があり参考になりました。Stream OverlayのHTMLをCSSでデザインすると、OBS配信時の音声チャットのUIが変更可能です。

blog.mayo31.info

Discordで喋ってる人を分かり易くするカスタムCSS | 萬巓堂本店

参考までに自分は下記カスタムCSSでDiscordを横表示にしています。

body {

background-color: rgba(0, 0, 0, 0);

margin: 0;

padding: 0;

overflow: hidden;

}

.voice-states * {

display: inline-block;

position: relative;

top: 0;

left: 0;

}

.voice-state {

width: 70px;

height: 90px;

}

.avatar {

left: 7px;

}

.user {

left: 2px;

top: 2px;

background: rgba(0,0,0,.7);

padding: 4px 5px 0px ;

border-radius: 4px;

}

.name {

width: 55px;

height: 17px;

line-height: 17px !important;

white-space: nowrap;

text-overflow: clip;

text-align: center;

background-color: rgba(0,0,0,0) ;

padding: 0 !important;

overflow: hidden;

}