Zoom背景使いたいけどグリーンスクリーンもスペックも足りない・・・せや！！！


# はじめに

Zoomといえばバーチャル背景ですね！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328319/500d6788-3672-5979-62a2-83a76b3a89c6.png)

**グリーンスクリーンなんて無いんじゃ！！**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328319/55509a88-1577-15cd-76bb-c40ce40e121e.png)

**スペックが足りないんじゃ！！**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328319/b4c059c8-3638-40ef-479b-54e44740aa43.png)

**そもそもWebカメラが無いんじゃ！！！**

という方、いらっしゃいますよね。
まぁWebカメラ需要は最近すごいらしくて、なかなか手に入らない問題もあるみたいなので、
結構切実だと思います。

# TL; DR

**やりたかったこと**

1. 自前の動画ソース（キャプチャなど？）を用意する
1. 自前の小さいリソースでも実現可能な背景除去処理を挟む
1. Zoomで背景除去済み動画をストリーミングする

**やったこと**

1. グリーンバックの動画を用意する
1. Zoomでグリーンバック動画でバーチャル背景する


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/zoom?src=hash&amp;ref_src=twsrc%5Etfw">#zoom</a> の背景削除使いたいけど、<br>「グリーンバックが無い！！！」<br>「スペックも足りん！！！」<br>「そもそもWebカメラが無い！！！」<br><br>なるほどね完全に理解した <a href="https://t.co/Vj6UScGNxt">pic.twitter.com/Vj6UScGNxt</a></p>&mdash; いす (@yoh1496) <a href="https://twitter.com/yoh1496/status/1249639260426129409?ref_src=twsrc%5Etfw">April 13, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

大したことやってないポエムです。

# バーチャルWebカメラ

「**Webカメラがない！**」

そういうときのために「バーチャルWebカメラ」というものがあります。
Webカメラが用意できない場合や、Webカメラからの入力しか受け付けないアプリに
外部ストリーム（キャプチャとか）を流したい場合に有用な方法です。

## 有効にする方法（Windows）

あまり配信界隈に精通していないのもあって知らなかったんですが、世の中には
OBSという、配信界隈で使われるオープンソースの便利アプリが存在するようです。
[Open Broadcaster Software | OBS](https://obsproject.com/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328319/f45adbcf-010d-a826-7332-5d765eb12fb0.png)


今回は、そのアプリのプラグインである、OBS-VirtualCamというアプリを使っていきます。
https://github.com/CatxFish/obs-virtual-cam

### OBS Studioの導入

簡単なのは上記ホームページから「Windows」ボタンを押して、
「OBS-Studio-25.0.4-Full-Installer-x64.exe」というインストーラをダウンロード／実行する方法です。

ただ、v25は新しいバージョンで、他のプラグインが対応していないこともある（OBS-websocketなど）ので、
下記ページからv24.0.3をダウンロードするのがオススメです。

https://github.com/obsproject/obs-studio/releases

### OBS-VirtualCamの導入

GitHubのリリースページからダウンロードします。

https://github.com/CatxFish/obs-virtual-cam/releases

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328319/4a93b151-5a3a-7760-e9b5-2b851ced7b2a.png)

Zipでバイナリをダウンロードすることもできるのですが、
仮想カメラの登録／解除を忘れると危ないので、
インストーラー版である「OBS-VirtualCam2.0.4-Installer.exe」をダウンロード／実行するのがよいと思います。

### バーチャルWebカメラの有効化

プラグインのメニューからバーチャルWebカメラを有効化します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328319/c6ee926a-b8d3-068a-980d-5734dfb6ecb4.png)

使用するアプリケーションによっては左右を反転させて表示するようになっているものもあるので、
「Horizontal Flip」にチェックを入れるなど、適宜変更すると良いと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328319/538df038-9158-5dec-4ce0-6a42dbbce558.png)


これで「Start」ボタンを押すと「OBS-Camera」というWebカメラがZoomで使用可能になり、
OBSに表示されている内容がWebカメラとしてZoom側からも表示できるようになったと思います。

# 使用例

例として、以下の動画を使用します。

[![ZXsQAXx_ao0](http://img.youtube.com/vi/ZXsQAXx_ao0/0.jpg)](http://www.youtube.com/watch?v=ZXsQAXx_ao0)

「Just Do Itおじさん」としてTwitterで話題の俳優、シャイア・ラブーフさん。
（私はこの動画で存在を知りました・・・）

## バーチャルWebカメラの有効化

![EVeb8j8UwAITZok.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328319/d0794b05-e918-dab9-d253-a3b8bb139056.jpeg)

右がOBS、左がブラウザ版Zoomです。結構低負荷で実行できるのに驚きました。

## バーチャル背景の適用

![EVedfhzU4AkNC3A.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328319/84339f08-02fb-d662-9f72-14d620d6ec1d.jpeg)

こんな感じになります。かなりシュール。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">just do it おじさんが応援してくれる zoom。<a href="https://twitter.com/hashtag/zoom%E8%83%8C%E6%99%AF?src=hash&amp;ref_src=twsrc%5Etfw">#zoom背景</a> 思ったよりシュールで笑っちゃった <a href="https://t.co/7QtlyBRQOe">pic.twitter.com/7QtlyBRQOe</a></p>&mdash; いす (@yoh1496) <a href="https://twitter.com/yoh1496/status/1249646065520742405?ref_src=twsrc%5Etfw">April 13, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# 終わりに

本当はキャノンのミラーレスをWebカメラにしたくて、
リモート撮影機能のライブビュー画面をソフトウェア的にキャプチャして流し込む作戦だったんですが、
気づいたらグリーンバックの動画を流しているという謎な事態に。

だけどこれで必要な機能は揃いました。
これを応用すればアバターで会議に参加するバーチャルZoomerも可能です。
（今度は脱線してそっちにいきそう）

技術的には、おそらくOBSの表示をレンダリングする
DirectShowのソースフィルタを定義しているだけなので、
直接レンダリングする気合と技術力があれば自前で低遅延のアバターも表示できそうですね。


# おまけ

音声認識してリアルタイムに字幕も付けられるようにしてみました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328319/f690609f-71cc-6e92-d4d7-67dce7555287.png)


みなさんも楽しいZoomライフを！