シユカ May/01/2023 11:11

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

はじめに

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

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

前提

あわせて読みたい

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

Electron Captureとは

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

通常VDO.Ninjaは、

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

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

ホストが行う作業

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

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

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

  • ホストからも相手方に複数ウィンドウの共有をしたい
  • obs-browserを利用せず、Electron Capture経由でゲストの映像をキャプチャしたい

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文字)を知ることができます。

"拍手プラン" plans and above exclusive(s) Support amount:110 yen

By purchasing this back issue, you can view the exclusive bonuses for May/2023. What is a back issue?

Support Cost: 110 yen

If you liked this article, support the creator with a tip!

Sending tips requires user registration.Find details about tips here.