Skip to main content

ビデオと共にあらんことを

著者
Headshot of DeveloperSteve Coochin

DeveloperSteve Coochin

feature may devsteve green

2022年5月4日

0 分で読めます

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

星が広がる宇宙空間を飛行する、未来的な紫色の宇宙船の中に座る人物のイラスト

May the 4th Dayを祝して、Snykの特製バーチャル背景を公開します。オープンソースプロジェクトを使って、壮大なビデオシーンを作成する方法をご紹介します。

ビデオに魔法をかけよう

まず、オープンソースプロジェクトのOBSをインストールします。Linux、Mac、Windows向けのインストーラーが用意されています。インストールしたらOBSを起動し、カメラを接続しましょう。

OBS Studioの自動設定ウィザードに表示される、配信、録画、仮想カメラの使用オプション

初回起動時にはセットアップウィザードが表示され、OBSで主にどのような用途に使うかを選択するよう求められます。これらの設定は後から変更できますが、通常は「仮想カメラ」を選ぶのがおすすめです。ほとんどのビデオプラットフォームアプリで、OBSをカメラソースとして使えるようになります。

OBSの仮想カメラ機能は、プロジェクトを支えるオープンソースコミュニティによる改良を経て、クロスプラットフォームでよりスムーズに動作するよう進化してきました。数年前までは、仮想カメラを動作させるためにかなり複雑な回避策が必要でした。

便利なヒント:ビデオプラットフォームアプリによっては、仮想カメラを使用できない場合があります。利用可能であれば、Webアプリを使うことで回避できます。

アプリの設定ができたら、シーンの素材を用意しましょう。snyk-labsのGitリポジトリにあるMayTheFourthにアクセスし、Snyk MayTheFourthシーンの作成に必要な4つのファイルをクローンまたは保存します。

MayTheFourthの素材を保存したら、OBSでシーンを設定しましょう。素材をシーン内のソースとして保存して使います。すでにシーンが設定されているので、それを使いましょう。

OBS Studioのソースメニューが開いており、画面キャプチャ、画像、メディアソース、テキスト、映像キャプチャデバイスなどの項目が表示されている

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

暗い色のメディア設定ダイアログ。ローカルのbackground.mp4ファイルが選択され、ループ再生と自動再生のオプションが有効になっている

次に、snyk-labsのGitHubリポジトリからbackground.mp4を選択します。この画面では、いくつかの設定を確認しましょう。

  • ループ:チェックを入れます。動画が終わると最初から再生されます。

  • 再生を再開:チェックを入れます。シーンを切り替えたときに動画を最初から再生できるので便利です。

  • 可能な場合はハードウェアを使用:任意です。グラフィックカードがある場合は、チェックを入れるとよいでしょう。

  • 再生終了時に何も表示しない:チェックを外します。この背景動画は継続して再生したいからです。

  • 非アクティブ時にファイルを閉じる:チェックを入れます。複数のシーンがある場合、他のシーンの未使用ソースがアクティブにならず、メモリとCPUを大幅に節約できます。

OKをクリックします。OBSのプレビューウィンドウに、ドラッグできるボックスが表示されます。spaceの動画をドラッグしてプレビューウィンドウいっぱいに広げれば、最初のシーンの背景が追加されます。

黒いキャンバス上で星空のメディアソースが選択されているOBS Studioのウィンドウ

あとは、残りの素材をソースとしてシーンに追加するだけです。

ソースの+、続けてメディアソースをクリックします。今度はリポジトリからship_interior.mp4を選択します。背景と同じ設定を適用し、こちらもループ再生にします。

このソースレイヤーをプレビューウィンドウの中央に移動し、少しサイズを調整します。さらにレイヤーを追加したら、位置を合わせる必要があります。

星が広がる宇宙を背景に、スタイリッシュな宇宙船のコックピットシーンをプレビュー表示した動画編集インターフェース

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

コントロールパネルのグリーンスクリーン画像の横に、オーディオ/ビデオフィルターのメニューが表示された動画編集インターフェース

追加した船内ソースをソース一覧からクリックし、「フィルター」タブを開きます。「エフェクトフィルター」の+をクリックし、フィルター一覧からクロマキーを選択します。

既定の「クロマキー」という名前のままにして、フィルターのウィンドウを閉じます。MayTheFourthの船の前半部分が表示されるはずです。

星空を背景に、青いSF風の扉とカラフルなコントロールパネルを表示した、ストリーミングソフトウェアのプレビュー

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

「Video Capture Device」が選択されたオープンソースメニュー。Syphon Client、Text、VLC Video Source、Window Captureなどの項目が表示されている

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

星空と青い惑星の背景に、グリーンバックのレイヤー上の人物が表示された動画編集インターフェース

もうすぐ完成です。Snykの宇宙船を追加しましょう。

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

画像インポートダイアログに表示された、明るい緑色のコックピットキャノピーを備えた、スタイリッシュな紫色の宇宙船の正面図

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

星空を背景に、アニメ風の宇宙船のコックピットに座る人物。OBS Studioに表示されており、室内はグリーンスクリーンになっている。

この最後の手順は任意ですが、ビデオの上に船の窓を重ねるとシーンが完成します。船のソースレイヤーと同じように画像を読み込み、今度はship_window.pngを選択します。

次に、クロマキーのときと同じようにエフェクトを追加しますが、ウィンドウのソースレイヤーの「フィルター」タブで+をクリックし、色補正を選択します。シーン内の窓に合わせて不透明度を設定します。私は通常、30程度にしています。

ガンマ、コントラスト、明るさ、彩度、色相シフト、不透明度を調整するコントロールを表示したカラー補正エフェクトのフィルターパネル。

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

星空を背景にした、漫画風の宇宙船のコックピットに人物が映る配信環境

新しいMayTheFourthシーンを通話で使う準備ができたら、仮想カメラを開始をクリックします。これで、各アプリのビデオソースとして使用できるようになります。

自由な発想で、自分だけのシーンを作ろう

自分のソースレイヤーを追加したり、新しいシーンを作ったりできるようになりました。背景ソースを変えるだけでシーンを切り替え、はるか彼方の銀河へ旅立てます……

紫色の宇宙船のコックピットに座る人物を正面から見た様子。背後には星とモーションブラーが広がっている

カテゴリー: