コラボ配信で「アバターとゲーム」等の複数ウィンドウを共有する using VDO.Ninja

はじめに

VTuberやゲームストリーマー（ゲーム実況者）によるコラボ配信では、アバターやゲーム画面など複数のウィンドウを共有したいニーズが稀にあります。
一般的な手段では一度に共有可能な画面は1つに限られている場合が多く、これを実現する方法は明らかでない場合があります。

この記事では、VDO.Ninjaを用いた配信構成における複数画面共有設定のリファレンスとしてまとめを書いていきます。

前提

• Windows 11
  • 執筆時環境は Windows 11 Pro 22H2 22621.1555 です
• VDO.Ninja
  • 執筆時環境は VDO.Ninja v22.9 stable です
  • 通常は公式にホストされた最新バージョンを使うと思うので、あまり気にしなくてよいはず
• Electron Capture
  • 執筆時環境は Electron Capture 2.17.2 (April 8) です

あわせて読みたい

本記事ではVDO.Ninjaを用いた映像伝送を行っていることを前提としています。下記の記事などを参考に、配信構成をされた経験が必要です。

• OBSでリモートVTubingをする using VDO.Ninja

Electron Captureとは

Electron Capture は、VDO.Ninja 向けに設計された簡易ブラウザアプリです。

通常VDO.Ninjaは、

• （Chrome等の）普段お使いのブラウザアプリ経由でルームを作成/入室し、Webカメラ映像、マイク音声、ウィンドウキャプチャ映像などを送受信
• ゲスト映像を視聴可能なウェブページURLを取得し、OBSビルトインのブラウザソースプラグイン（obs-browser）経由で表示・キャプチャ

といった形式で利用されます。が、上記にはいくつかの問題があり、それを解決する目的でVDO.Ninjaの開発者自身が公開しているアプリです。

今回はこのアプリを複数の画面を送出したい側、つまり配信ゲストが利用することで、複数画面の共有を実現します。
なお、配信ホスト側もゲスト同様に相手方と相互で複数画面を共有したい可能性がありますが、その場合も当然にホスト側でもこの手順を踏むだけでOKです。

ホストが行う作業

ホストが行う作業を記していきます。

1. 必要な場合、Electron Captureを導入する

ホスト側のElectron Capture導入は通常不要です。が、下記のようなケースに当てはまる場合は事前に導入してください。

• ホストからも相手方に複数ウィンドウの共有をしたい
• obs-browserを利用せず、Electron Capture経由でゲストの映像をキャプチャしたい
  • 通信が安定する、実際の描画サイズのままキャプチャしやすい、Chromeと別プロセスで動作させられる、等いくつかのメリットがあります

2. 配信準備やゲスト招待を行う

複数画面の送出を行わない限り、基本的に通常の準備と差分なく進めればOKです。

1に列挙したようなケースでホスト側もElectron Captureを利用したい場合がありますので、そのようなケースでのホスト側参考手順を記しておきます。

2-1. Electron Capture内の権限昇格を実行する

Electron Captureはブラウザアプリなので、任意のウェブサイトを閲覧することが可能ですが、VDO.Ninjaへのアクセス時に一般的なブラウザアプリと異なる動作をさせることで、ウィンドウキャプチャ等の機能を実現させています。

VDO.Ninjaでの利用においては非常に便利ですが、その仕組故、Electron Captureでアクセスできる全てのウェブページでそのような動作をさせることは非常に危険です。

そこで、Electron Captureではそのような特権的機能の利用を行う場合には事前操作を行うようになっています。この操作は VDO.NinjaへアクセスするElectron Captureウィンドウでのみ 行い、それ以外のウェブサイトへアクセスするElectron Captureウィンドウでは絶対に行わないでください。

やりかたは簡単です。Electron Capture起動時のページでコンテキストメニューを開き、⚠️ Elevate Privilege をクリックするだけです。画面が再読み込みされます。

2-2. モニター用デバイスを選択する

Electron Captureは再生デバイスの切替が可能です。VDO.Ninja経由の音声について聴取するデバイスを変更する必要があれば、それに応じて選択してください。

2-3. Electron CaptureでVDO.Ninjaへアクセスする

Electron Captureはブラウザアプリですので、この中でVDO.Ninjaへアクセスしてください。起動時の画面にアドレスバー相当がありますので、ここへVDO.NinjaへのURLを入力し、GOをクリックするのみです。

要は https://vdo.ninja と入力するってこと

2-4. 招待など配信準備を進める

以後の操作は特段通常と差分なく進めて結構です。普段どおり配信準備を行い、ゲストをVDO.Ninjaへ招待し、必要に応じてOBSでキャプチャしてください。

Tips: ブラウザソースとしてElectron Captureを利用するには

せっかくElectron Captureをホスト側でも利用するなら、OBSでゲストの映像をキャプチャする場合にもこれを使うという選択肢があります。マストではありませんが、手順を記しておきます。

まずはゲストの copy solo view link からURLをコピーします。

次に、Electron Captureのコンテキストメニューから ✖ Open New Window をクリック。

なおアイコンは :cross_mark: ではなく :multiply: らしい

表示されたウィンドウで、さきほどコピーしたURLを張り付けて遷移します。

OBSでは上記により表示されたウィンドウを ウィンドウキャプチャ ソースを用いてキャプチャすればOKです。

なお配信レイアウトにおける画面サイズの変更は、OBS上で行う他、Electron Capture自身のウィンドウを拡大縮小する方法が取れます。OBS上で行うより、ウィンドウ自体を変更する方が通常は画質が適切です。

3. 必要なら、ホストからも複数ウィンドウの共有設定をする

ホスト側もゲストに対し複数の画面を共有する必要がある場合、自身をVDO.Ninjaへゲストとして招待し、そこで画面共有をすればOKです。
Electron Captureの新しいウィンドウを作り、権限昇格させ、招待URLから画面共有を掛ければよいでしょう。

具体的な手順はゲスト側作業と全く同じなので、続くセクションをお読みください。

ゲストが行う作業

招待されたゲスト側で行う作業を記していきます。

1. Electron Captureを導入する

今回はゲストのウィンドウを複数共有することが目的なので、事前に導入しておきます。

2. 送信するウィンドウ毎にElectron Captureで設定を行う

複数ウィンドウを共有する場合、そのウィンドウごとに新しいElectron Captureウィンドウを開く必要があります。ここから続く手順を繰り返してください。

2-1. Electron Capture内の権限昇格を実行する

Electron Captureはブラウザアプリなので、任意のウェブサイトを閲覧することが可能ですが、VDO.Ninjaへのアクセス時に一般的なブラウザアプリと異なる動作をさせることで、ウィンドウキャプチャ等の機能を実現させています。

VDO.Ninjaでの利用においては非常に便利ですが、その仕組故、Electron Captureでアクセスできる全てのウェブページでそのような動作をさせることは非常に危険です。

そこで、Electron Captureではそのような特権的機能の利用を行う場合には事前操作を行うようになっています。この操作は VDO.NinjaへアクセスするElectron Captureウィンドウでのみ 行い、それ以外のウェブサイトへアクセスするElectron Captureウィンドウでは絶対に行わないでください。

やりかたは簡単です。Electron Capture起動時のページでコンテキストメニューを開き、⚠️ Elevate Privilege をクリックするだけです。画面が再読み込みされます。

2-2. モニター用デバイスを選択する

Electron Captureは再生デバイスの切替が可能です。VDO.Ninja経由の音声について聴取するデバイスを変更する必要があれば、それに応じて選択してください。

2-3. Electron Captureで招待URLへアクセスする

ホストから貰ったURLを、Electron Captureの起動時画面で入力し、GOをクリックします。

ここがアドレスバーに相当します

2-4. 画面共有準備をすすめる

作業は通常と変わりませんので、ゲストとして画面共有などを進めてください。

2-5. 次のウィンドウキャプチャを準備する

今回は1つだけでなく2つ以上のウィンドウをホストへ送出したいので、これを準備していきます。

Electron Captureのコンテキストメニューから ✖ Open New Window をクリック。

なおアイコンは :cross_mark: ではなく :multiply: らしい

すると新しいウィンドウでElectron Captureの起動時画面が表示されます。ここから改めてゲストとして設定を進めます。2-1. Electron Capture内の権限昇格を実行する まで戻り、各種設定を行い他のウィンドウを選択すればOKです。

おわり

以上のように設定することで、複数ウィンドウを共有したライブ配信が可能です。参考にしてください。

以後の部分にコンテンツはありませんが、有料プランに加入するとシユカが今日飲んでいるドリンク（約4文字）を知ることができます。