ビデオと共にあらんことを
DeveloperSteve Coochin
2022年5月4日
0 分で読めますビデオ通話やライブ配信、録画で個性を演出する手段として、バーチャル背景はすっかり定番になりました。さまざまなクリエイティブなバーチャルシーンが見られるようになり、多くの人気ビデオアプリでも、背景やオーバーレイを使って映像をカスタマイズできます。

May the 4th Dayを祝して、Snykの特製バーチャル背景を公開します。オープンソースプロジェクトを使って、壮大なビデオシーンを作成する方法をご紹介します。
ビデオに魔法をかけよう
まず、オープンソースプロジェクトのOBSをインストールします。Linux、Mac、Windows向けのインストーラーが用意されています。インストールしたらOBSを起動し、カメラを接続しましょう。

初回起動時にはセットアップウィザードが表示され、OBSで主にどのような用途に使うかを選択するよう求められます。これらの設定は後から変更できますが、通常は「仮想カメラ」を選ぶのがおすすめです。ほとんどのビデオプラットフォームアプリで、OBSをカメラソースとして使えるようになります。
OBSの仮想カメラ機能は、プロジェクトを支えるオープンソースコミュニティによる改良を経て、クロスプラットフォームでよりスムーズに動作するよう進化してきました。数年前までは、仮想カメラを動作させるためにかなり複雑な回避策が必要でした。
便利なヒント:ビデオプラットフォームアプリによっては、仮想カメラを使用できない場合があります。利用可能であれば、Webアプリを使うことで回避できます。
アプリの設定ができたら、シーンの素材を用意しましょう。snyk-labsのGitリポジトリにあるMayTheFourthにアクセスし、Snyk MayTheFourthシーンの作成に必要な4つのファイルをクローンまたは保存します。
MayTheFourthの素材を保存したら、OBSでシーンを設定しましょう。素材をシーン内のソースとして保存して使います。すでにシーンが設定されているので、それを使いましょう。

ソースの+をクリックして、ソースの一覧を開きます。次に、メディアソースをクリックし、「space」と名前を付けます。

次に、snyk-labsのGitHubリポジトリからbackground.mp4を選択します。この画面では、いくつかの設定を確認しましょう。
ループ:チェックを入れます。動画が終わると最初から再生されます。
再生を再開:チェックを入れます。シーンを切り替えたときに動画を最初から再生できるので便利です。
可能な場合はハードウェアを使用:任意です。グラフィックカードがある場合は、チェックを入れるとよいでしょう。
再生終了時に何も表示しない:チェックを外します。この背景動画は継続して再生したいからです。
非アクティブ時にファイルを閉じる:チェックを入れます。複数のシーンがある場合、他のシーンの未使用ソースがアクティブにならず、メモリとCPUを大幅に節約できます。
OKをクリックします。OBSのプレビューウィンドウに、ドラッグできるボックスが表示されます。spaceの動画をドラッグしてプレビューウィンドウいっぱいに広げれば、最初のシーンの背景が追加されます。

あとは、残りの素材をソースとしてシーンに追加するだけです。
ソースの+、続けてメディアソースをクリックします。今度はリポジトリからship_interior.mp4を選択します。背景と同じ設定を適用し、こちらもループ再生にします。
このソースレイヤーをプレビューウィンドウの中央に移動し、少しサイズを調整します。さらにレイヤーを追加したら、位置を合わせる必要があります。

次に、このソースにクロマキー(グリーンスクリーン)フィルターを追加し、船内の周りにある緑の部分を取り除きます。

追加した船内ソースをソース一覧からクリックし、「フィルター」タブを開きます。「エフェクトフィルター」の+をクリックし、フィルター一覧からクロマキーを選択します。
既定の「クロマキー」という名前のままにして、フィルターのウィンドウを閉じます。MayTheFourthの船の前半部分が表示されるはずです。

ソースの+をクリックして映像キャプチャデバイスを選択し、カメラを追加します。ポップアップウィンドウのドロップダウンリストからカメラを選択します。

OKをクリックします。次に、ビデオのボックスを船内に重なるようにサイズ変更し、位置を調整します。船を追加した後でもう一度調整しますが、まずは船内ソースレイヤーの内側に収まるように配置しましょう。

もうすぐ完成です。Snykの宇宙船を追加しましょう。
もう一度、ソースの+をクリックします。ソース一覧から画像を選択し、「Snyk Ship」と名前を付けます。ship_green.pngを選び、非表示時に画像をアンロードにチェックを入れます。複数のシーンを使う場合、メモリとCPUの使用量を節約できます。

OKをクリックすると、船のレイヤーが表示されます。船内のときと同様に、フィルタータブからクロマキーを追加しましょう。各ソースレイヤーの位置とサイズを調整して、ぴったり重ね合わせます。カメラの位置も少し調整が必要かもしれません。

この最後の手順は任意ですが、ビデオの上に船の窓を重ねるとシーンが完成します。船のソースレイヤーと同じように画像を読み込み、今度はship_window.pngを選択します。
次に、クロマキーのときと同じようにエフェクトを追加しますが、ウィンドウのソースレイヤーの「フィルター」タブで+をクリックし、色補正を選択します。シーン内の窓に合わせて不透明度を設定します。私は通常、30程度にしています。

ソースレイヤーの位置やサイズを調整して、すべてがきれいに重なるまで整えましょう。少し手間がかかるかもしれませんが、完成したシーンは……まさに別世界です。

新しいMayTheFourthシーンを通話で使う準備ができたら、仮想カメラを開始をクリックします。これで、各アプリのビデオソースとして使用できるようになります。
自由な発想で、自分だけのシーンを作ろう
自分のソースレイヤーを追加したり、新しいシーンを作ったりできるようになりました。背景ソースを変えるだけでシーンを切り替え、はるか彼方の銀河へ旅立てます……

