バーチャルキャストでホワイトボードにゲーム画面を映す方法

バーチャルキャストでホワイトボードにゲーム画面を映す方法

バーチャルキャストの配信中に次のようなコメントを頂いたので、解説します。
「ホワイトボードにどうやって画面出してるの？」


11/12 画像を差し替えました。これで読み込みに時間がかからなくなったと思います。

環境
バーチャルキャスト ver1.4.2b
NAir ver1.0.20181106-1

手順
大まかに3段階あります。
1.画像の準備
2.画像のweb上への配置とconfig.jsonの編集
3.配信ソフトの設定

画像の準備
①クロマキー合成用の画像を用意する。
　各種ペイントソフトを使用し、クロマキー合成用の画像ファイル(png形式)を作成する。
　配信ソフトで透過させる色で全面塗りつぶした画像を作成します
　色の例) グリーンバック(r0,g255,b0), ブルーバック(r0,g255,b0)

画像のweb上への配置とconfig.jsonの編集
②クロマキー合成用の画像ファイルを公開webサーバー上に配置する。
ここのやり方は複数の方法があります。

1. 自前のwebサーバー上に画像を配置し、web上から参照できるようにする。
2. google drive上に画像を格納し、直接リンクを貼る
3. droopbox上に画像を格納し、直接リンクを貼る

私は1の方法を使っていますが、全ての方法でホワイトボードに画像を埋め込めることを確認しています。
※2,3の方法でurlが描かれていますが、すでに削除済みです。
※※one driveの直リンは上手くできなかったです。バーチャルキャストは現状windows 10でのみ動作するため、one driveは特にアカウントを新規作成する必要がなくて楽だと思うのですが・・・

1.の方法でwebサーバー上に画像ファイルを格納する方法。
サーバー情報(簡易)
CentOS release 6.9 (Final)
kernel 2.6.32-696.23.1.el6.x86_64
httpd 2.2.15
1)/var/www 配下の外部から参照可能なディレクトリに①で作成した画像を格納する。
2)ブラウザから画像のurlへアクセスし、参照可能なことを確認する。
3)config.jsonに以下を追記する。

"whiteboard": {
"urls": [
"2)でブラウザに入力したurl,
]
}

2.google drive上に画像を格納し、直接リンクを貼る
1)google drive上に画像を格納する。
2)google drive上の画像ファイルを右クリックし、"Get shareable link"から、共有リンクを取得する。
3)共有リンクの"open?id="を”uc?export=view&id=”に書き換える。
例)

https://drive.google.com/open?id=1UKsLUxl66yIXJIAqy2a2tCNEokLoF7TO
↓
https://drive.google.com/uc?export=view&id=1UKsLUxl66yIXJIAqy2a2tCNEokLoF7TO

4)config.jsonに以下を追記する。

"whiteboard": {
"urls": [
"3)で書き換えた後のurl,
]
}

このページも参考にしてみてください。

バーチャルキャストでサーバないけどスライド作る方法


3.droopbox上に画像を格納し、直接リンクを貼る
1)droopbox上に画像を格納する。
2)droopbox上に格納した画像の共有ボタンをクリックし、
　立ち上がった小ウィンドウのリンクを作成から、共有リンクを取得する。
3)共有リンクの"www.dropbox.com"を”dl.dropboxusercontent.com”に書き換える。
　ファイル名の後ろの”?dl=0”を削除する。
例)

https://www.dropbox.com/s/dawk6x28rt25ohb/greenback.png?dl=0
↓
https://dl.dropboxusercontent.com/s/dawk6x28rt25ohb/greenback.png

4)config.jsonに以下を追記する。

"whiteboard": {
"urls": [
"3)で書き換えた後のurl,
]
}

このページも参考にしてみてください。

【備忘録】Dropboxの画像のURL（直リンク）の取得


③バーチャルキャストを起動し、ホワイトボードを表示する。
web上の画像が、バーチャルキャストからアクセス可能な場合、config.jsonに設定した画像がホワイトボードに表示されます。
うまくいかない場合、インフィニットループの以下のページを参考にしてみてください。
https://www.infiniteloop.co.jp/blog/2018/06/virtualcast-122-release/


配信ソフトの設定
④配信ソフトからクロマキー合成を行う。
※バーチャルキャストを配信ソフトからキャプチャできているものとして、進めます。
1)バーチャルキャストをキャプチャしたソースを右クリックし、フィルター(1)をクリックする。
2)立ち上がった小ウインドウの左中央少し上の+を選択し、新規フィルタを追加する。(画像の黄色で囲ったところをクリック



3)フィルタの種類から"クロマキー合成"を選択し、完了をクリックする。



4)色キーの種類を①で作成した色と合わせてください。
　類似性は環境によって、うまく調整してみてください。
　※うちの環境ではスカートも透過してしまったので、類似性を調整しています。
クロマキー合成がうまく行えている場合、配信ソフトの画面は以下のようにホワイトボード部分が透明になります。



5)配信ソフトでゲーム画面の表示位置を調整し、ホワイトボード上に配置する。




これらの方法を使って、ホワイトボード上にゲーム画面を表示しています。
よかったら、参考にしてみてください。
今後のより一層バーチャルキャストが盛り上がることを祈って、この記事を締めたいと思います。
P.S.バーチャルキャスト+ゆかりねっとも需要があれば、記事にします。