
【配信小ネタ】Discordのアイコンを配信に乗せる方法
こんばんは。ちゅーぼーです。
ついにGWが終わってしまいました。
超満喫したものの、Apexはあまりできずで結局ゴールドで終わりそうな気配です。キーマウでせめてプラチナは行きたかったんですが、ギリギリ届かないかもな~って感じです。今晩の結果次第!
今日はちょっと息抜きで配信小ネタを一つ。
配信画面に通話アイコン
YoutubeでApexの配信を見ていると通話しているメンバーのアイコンが表示されて、話している人のアイコンが点滅するやつ見たことありませんか。

あれは特定の条件が揃っていれば簡単にできるので、紹介しようと思います。
必要なもの
これを実現するためにはいくつか条件があります。
環境
まずDiscordで通話しながらPCを使って配信をしている必要があります。
僕の知る限りPS4/PS5にDiscordは統合されていないので、直接配信している場合は実現できません。
ただし、キャプチャーボードで映像をPCに持ってきていれば可能です。
Discord
通話はDiscordを使う必要があります。
PCにDiscordのアプリをインストールした状態で利用してください。
一度インストールしてしまえばDiscord側で特に何か特殊な操作は必要なくて、どこかしらのボイスチャンネルに入って通話していればOKです。
OBS
配信ツールです。Windowsで配信している人なら誰しもが使っているツールですが、今回のDiscordの表示のためにはこちらを使う必要があります。
使い方はここでは書かないですが、インストールするだけでOK。
StreamKit Overlay
このDiscordの通話状態を取得し、配信に乗せるために必要となるのがこのStreamKit Overlay になります。
このサイトでPCにインストールしたDiscordのアプリから通話状況を取得し、配信ツールに乗せる(オーバーレイ)することが可能になります。
サイトにアクセスすると、Install OBS というボタンがあるのでそれをポチ。

すると、Discordのアプリとの連携が始まる(だったと思う)ので、進めていきましょう。
この時にDiscordのアプリがインストールされている必要があります。

成功すると、こんな画面になります。
今回は VOICE WIDGET というタブを使います。
ここで、利用するサーバとボイスチャンネルを指定すると、そのボイスチャンネルにいる人のアイコンが右のプレビュー画面に表示されます。


このプレビューが表示されたら準備OK。
いろいろ設定はありますが、今回はスルーで。
OBSの配信画面にアイコン表示
で、ここからどうやって画面に乗せるねん!と僕も最初は思いました。
想像以上に簡単にできます。

このプレビューの下部にあるURL。これをいったんコピーしておきましょう。
OBSのソースに「ブラウザ」を追加します。


先ほどコピーした文字をURLの部分に張り付けましょう。
これだけでOK!

これで、アイコンが表示されました!
ゲーム画面の上に表示(オーバーレイ)できていますね。
こんな感じでPCで配信すると画面に色々載せたりできます。
手元配信とか顔出しとかも簡単ですね。やらんけども
最後に
ということで、今回は配信画面にDiscordのアイコンを載せる方法でした。
OBSを使ったことがある人からしたら全然難しくないと思うので、ぜひやってみてください。
それではまた!