ブラウザ画面を、zoom背景にしてみた

## こんにちは

ども、ども。
[Life is Tech ! Kanto Advent Calendar 2022](https://qiita.com/advent-calendar/2022/life-is-tech-kanto)の4日目を担当します、 webサービス コースメンターのつぼつぼです！

昨日は、エーエスの「画像も投稿できるSNS」の話でしたね！JSONの周りの知識も知れて、大変参考になりました。

さて、今回は、zoomであったら便利Tipsです！

## この記事を書こうと思ったきっかけ
自分のブラウザ画面を共有したいのに、'画面共有'機能を使ってすると参加者**全員**の顔が見れなくなったり、チャットに気づきにくいことをどうにか改善できないかなと思って考えた策です。
OBSのYouTube LIVEへのストリーミングの仕方の記事はあっても、ZOOMカメラへの配信記事はなかなかなくて、苦労したので🥲、共有します！


↓完成イメージ図（オンラインホワイトボードツールmiroのブラウザを背景にして、左下に自分がいる図）
![IMG_6882.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/0b955037-8cb5-664b-f3dc-acb68a0f1d91.jpeg)

## 概要

1. [人物を抜くカメラソースを作ろう。](#1-人物抜くカメラソースを作ろう)

1. [OBSでブラウザ画面を背景に。](#2-obsでブラウザ画面を背景に)

1. [OBSにSnapCameraを読み込む。](#3-obsにsnapcameraを読み込む)

1. [OBSの仮想カメラをzoomカメラとして設定。](#4obsの仮想カメラをzoomカメラとして設定)

＊OBS プラグインで背景を消す方法もありますが、動作が非常に重くなる可能性があることから、ここでは触れません。


## 1. 人物抜くカメラソースを作ろう。 

SnapCameraというアプリを使って、人物にグリーンバックをつけたカメラソースを作ります。

SnapCameraとは、いろいろな人が作ったフィルターを自由に使えるアプリです。

#### SnapCameraアプリをダウンロード
https://snapcamera.snapchat.com/

アプリ起動後、検索バーに green screen と入れて、↓赤枠のアプリを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/3010784a-7439-6066-391c-9aafe5cf0107.png)

自分の後ろにグリーンの壁がある人は、このままでもいいですが、たいていの家にはないと思うので（笑）、ここで、↓から緑色の壁紙をダウンロードして、その画像をSnapCameraのSelect Imageに入れてみてください。背景が緑になると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/d15191bd-0477-7425-ef0a-b648b9fd5114.png)

https://drive.google.com/file/d/1LUu5HSNo6oUW0JxVaCXLfDwik9YawJka/view


## 2. OBSでブラウザ画面を背景に。

OBSとは、無料でライブ配信や録画ができるソフトウェアです。

#### OBSソフトウェアをダウンロード
https://obsproject.com/ja


起動したら、シーンタブの左下の＋より、シーン追加します。
名前は、”ブラウザ背景”をお勧めします！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/91fe7185-e8b7-68da-2bcf-7177ae3fe97e.png)

シーンタブがブラウザ背景になっていることを確認した上で、一個右のソースタブの＋ボタンから、macOSスクリーンキャプチャを選択。（windowsの場合はwindowsOSスクリーンキャプチャ）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/1387cb67-c659-b300-7c42-e61b5498263f.png)

スクリーンキャプチャをクリックすると、新規ウィンドウが開き、方式をウィンドウキャプチャ、ウィンドウを背景にしたいウィンドウを選択。

![qiita-miro.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/431fd7ba-b4e9-156c-47b5-185f91d8388e.png)

他の開いているタブやブックマークバーが見えないように、画面の大きさを調整します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/88a38ca2-5bc0-457f-587c-7f915d730fab.png)

## 3. OBSにSnapCameraを読み込む。

1のSnapCameraで作ったカメラソースをOBSで読み込みます。

再度、ソースタブの左下＋ボタンから、映像キャプチャディバイスを選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/f657142a-9c2d-b61f-841b-a5c8b3b01e22.png)

新規作成に読み込むSnapCameraの名前を入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/5bb53a54-2144-39f9-512f-9b18eea17084.png)

デバイス、プリセットを以下のように設定!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/150790e2-829a-ed51-aaac-756f886774cf.png)

SnapCameraの部分で二本指クリック（winは右クリック）→フィルターをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/c59ff6e7-b73a-ac20-c3d3-ea64aa3a7eae.png)

左下のエフェクトコントロールから、クロマキーを選択。
その後、エフェクト名や滑らかさなどの設定ができますが、デフォルトのままでオッケーです！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/be2ce3fe-1487-1651-1004-3ca604e39c80.png)

↑タブを閉じた後、SnapCameraの位置大きさを調節したら、OBSでの設定はほぼ終わりです！!

## 4.OBSの仮想カメラをzoomカメラとして設定。

ラスト！　zoomのカメラにOBSを設定します！僕がめちゃ、苦戦した部分です😅

まず、OBSで、仮想カメラをオンにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/41e03210-8db6-c541-4751-28dfcb559f85.png)

そして、zoom側のカメラ設定で、OBS　Virtual Cameraを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2664651/cbd00e70-7825-32db-8e31-5b0e2b8d2109.png)

ビデオオンにしてみてください！！
OBSで設定した画面でzoomに写っているはずです！！

## うまくいかないとき。。。

人は写ってるけど、ブラウザ画面が背景にならない！！
→zoomのバーチャル背景を設定していませんか？　なしにすると、OBSで設定したブラウザ画面が出てくるはずです！
　（僕は、これに何時間も悩まされました笑）

ブラウザが固まってしまってリアルタイムで動いてない！！
→OBSのソースタブ→スクリーンキャプチャー→ウィンドウからもう一度希望のブラウザ選択してみてください！

SnapCameraのカメラがグリーンバックの画像のみで、人物が反映されてない！！
→僕の場合は、SnapCameraを再起動したら、直りました！

## 初めてアドカレ書いてみて

この記事を書くにあたって、改めて色々調べ直して新たな発見や学びがあり、頭を整理するいい機会になりました！

この記事を書くにあたり、アドカレ会を開いてくださったり、いい仲間にめぐまれここまで書くことができました。

さて、明日は、またまたエーエスの記事です！

カウントアプリを突き詰めたみたいです。ワクワク！！

お楽しみに！！