Zoomのミニウィンドウでwebタイマー表示・タイマー音再生する方法

# はじめに
Qiita初投稿です．

Zoomで画面共有をせずに，webタイマーを表示・タイマー音を再生する方法を紹介します．
タイマー画面は，通常カメラ映像が映っているミニウィンドウに表示させます．
![Zoom ミーティング 2020_08_07 8_36_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/9f3b4cf3-2bd7-7780-6c5c-a68e71c59328.png)

この方法は，発表時間が決められた研究室ゼミや研究発表などで，発表者の邪魔をせずにタイマーを利用することを想定しています．

# 前提
- Windows 10
- Zoomアカウントを取得済み
- Chromeをインストール済み

# 利用するソフトウェア
- 仮想カメラ
    - [OBS Studio](https://obsproject.com/ja)（無料ライブ配信用ソフト）
- 仮想マイク
    - [VB-CABLE](https://www.vb-audio.com/Cable/)（仮想オーディオデバイス単体で利用できるフリーソフト）
- webタイマー表示ウェブブラウザ
    - Google Chrome

# 参考サイト
1.  [OBS-VirtualCamを用いて仮想カメラ経由でバーチャルキャラクターにてテレビ会議をする方法 [Windows - Android/iPhone]](https://note.com/youten_redo/n/nedf5f69c8712)
2.  [仮想オーディオデバイス「VB-CABLE」インストール方法。再生と録音デバイスを無料で追加できる](https://arutora.com/archives/20180516223000/)

# 仮想カメラ：webタイマーをZoomミニウィンドウに表示
以下の手順は基本的に，
 [OBS-VirtualCamを用いて仮想カメラ経由でバーチャルキャラクターにてテレビ会議をする方法 [Windows - Android/iPhone]](https://note.com/youten_redo/n/nedf5f69c8712)
の手順を踏襲しています．

## 1. OBS Studioのインストール
[OBS(Open Broadcast Software)](https://obsproject.com/ja/download)より，OBS Studioのインストーラをダウンロードします．
「ダウンロード インストーラ」をクリックすると，自動的に最新のインストーラがダウンロードされます．
※32bit OSの場合は，下の「ダウンロード インストーラ(32bit)」からダウンロードしてください．
![ダウンロード _ OBS - Google Chrome 2020_08_07 8_09_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/358c6892-220e-f2c8-5839-f3c1612e8616.png)


ダウンロードした"OBS-Studio-X.X.X-Full-Installer-x64.exe"を実行し，指示に従いセットアップを進めます．

インストール先の選択は，デフォルトで"C:\Program Files\obs-studio\"となっています．もし，別のフォルダにインストールする場合はその場所を覚えておいてください．後述のOBS-VirtualCamのインストールで利用します．
![OBS Studio 25.0.8 Setup  2020_08_07 8_47_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/e0ff47f1-006e-2427-5633-e3d876a92ee0.png)

インストール後にOBS-Studioを起動すると「自動構成ウィザード」が実行されますが，webタイマーにはあまり関係のない設定なので特に気にせず進めます．

次の手順ではOBS Studioが閉じている必要があるので，OBS Studioを終了します．

## 2. OBS-VirtualCamのインストール
OBS-Studioに仮想カメラを導入するために，OBS-VirtualCamをインストールします．

[OBS-VirtualCamのダウンロードサイト](https://github.com/CatxFish/obs-virtual-cam/releases)より，インストーラをダウンロードします．
ここでは，"OBS-VirtualCamX.X.X-Installer.exe"をダウンロードします．
※zipファイルから手動でインストールする場合は，[参考サイト1](https://note.com/youten_redo/n/nedf5f69c8712)の注意に従い進めてください．
![Releases · CatxFish_obs-virtual-cam - Google Chrome 2020_08_07 10_44_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/e4566361-e360-95f7-87ef-84384250fe46.png)

ダウンロードした"OBS-VirtualCamX.X.X-Installer.exe"を実行し，指示に従いセットアップを進めます．

ライセンス契約に同意します．
![スクリーンショット (22).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/f943cd85-e6e4-f1a4-b8a1-12f1af25d620.png)

インストール先の選択では，デフォルトで"C:\Program Files\obs-studio\"となっています．先述したOBS Studioのインストール先と同じフォルダを選択していください．
![スクリーンショット (28).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/eb4a24a8-7d8d-42a7-c309-bc283c2064e1.png)


インストール先の選択で「OK」をクリックすると，「フォルダが既に存在している」というアラートが表示されます．
OBS Studioのフォルダを特にいじっていなければ，「はい」をクリックして上書き展開します．
![スクリーンショット (29).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/dfed261e-b864-db98-efea-78d34dd36728.png)

仮想カメラのインストール数を選択します．
「4つ」または「1つ」を選択でき，どちらを選択してもwebタイマーは動作します．
![スクリーンショット (30).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/1546c624-8c55-9e56-0e92-468dc07c0cb5.png)

インストール項目を確認し，問題がなければ「Install」をクリックします．
![スクリーンショット (31).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/213ca432-64a3-1881-1b5e-d8e97db5a5fe.png)

以下のようなウィンドウが表示されればインストール成功です．
![スクリーンショット (33).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/c997bc5b-8e37-422e-41a1-cc9977b144ef.png)

## 3. OBS Studioで仮想カメラの有効化
OBS Studioを起動します．

「ツール」タブ -> 「VisualCam」をクリックします．
![スクリーンショット (36).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/bd218e4d-060e-1868-64ff-db6592b4e039.png)

「AutoStart」にチェックを入れ，「Buffered Frames(遅延時間)」を0に設定し，Startします．
※PCマシンパワーが不足しているときは，1以上に設定してください．
![スクリーンショット (37).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/3b0f0f35-c865-ce02-3c5d-97c0e1239a1d.png)

## 4. OBS Studioでwebタイマー画面の表示
まず，webブラウザでタイマーを表示します．
ここでは，ブラウザにはGoogle Chrome，webタイマーには[Time Keeper](https://maruta.github.io/timekeeper/#t1=15:00&t2=20:00&t3=25:00&m=Click%20to%20edit%20this%20message.)を使用します．
[Time Keeper](https://maruta.github.io/timekeeper/#t1=15:00&t2=20:00&t3=25:00&m=Click%20to%20edit%20this%20message.)は，1回/2回連続/3回連続ベルのタイミングを設定することができ時間も見やすいため，おすすめです．

次にOBS Studioで，「ソース」ウィンドウの「＋」をクリック -> 「ウィンドウキャプチャ」をクリックします．
![スクリーンショット (24).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/4610537e-afd7-7ed2-ccf1-157213073b99.png)

ソースを作成/選択する画面で，「新規作成」を選択し任意のタイトルを入力して，「OK」をクリックします．
![スクリーンショット (38).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/0fc85bdc-298d-ab85-3c7d-848abd7a4488.png)

「ウィンドウ」選択欄で，webタイマーを表示させているウィンドウを選択し，「OK」をクリックします．
ここでは，"[chrome.exe]: Time Keeper - Google Chrome"を選択します．
![スクリーンショット (39).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/60ec2ef3-227b-1a77-8425-81808cc3d9b6.png)

OBS Studioの画面全体にwebタイマーが表示されていない場合は，
「編集」タブ -> 「変換」 -> 「画面に合わせる」をクリックします．
これにより，ウィンドウの左右比率を変更させずに，画面全体に表示できます．
![スクリーンショット (40).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/834a5081-b292-63a2-c23c-6a9b9eb0db7e.png)

## 5. Zoomで仮想カメラの表示
Zoomを起動します．

Zoomの「カメラ」より”OBS-Camera”を選択すると，先ほど設定したタイマー画面がカメラ映像として出力されます．
![スクリーンショット (42).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/70cf4c6a-5dc0-6dff-3117-b8c7aa3b2627.png)

※タイマー画面が左右反転して表示されている場合は，
「ビデオ設定」より，「マイビデオ」の「マイビデオをミラーリング」をオフにしてみてください．


以上で仮想カメラは利用できるようになりました．


# 仮想マイク：webタイマーのタイマー音を再生
**爆音チャイムが流れる可能性があるので，必ず音量テストしてから使用してください**

「VB-CABLE」は，[VB-AUDIO Software](https://www.vb-audio.com/index.htm)さんが提供している仮想オーディオデバイスです．
無料で1つ，寄付をすれば3つの仮想オーディオデバイスを使用することができます．今回は，1つのみで動作するので無料版を想定します．

以下の手順は基本的に，
[仮想オーディオデバイス「VB-CABLE」インストール方法。再生と録音デバイスを無料で追加できる](https://arutora.com/archives/20180516223000/)
の手順を踏襲しています．

## 1. VB-CABLEのインストール
まず，[VB-CABLEのダウンロードサイト](https://www.vb-audio.com/Cable/index.htm)より，「VB-CABLE」をダウンロードします．
![VB-Audio Virtual Apps - Google Chrome 2020_08_07 15_03_22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/d60f86d8-261a-327b-2c5f-5f7e3f094045.png)

ダウンロードファイル（VBCABLE_Driver_PackX.zip）はzip形式で圧縮されているので，展開してください．

展開したフォルダから"VBCABLE_Setup_x64.exe"を探し，『管理者として実行』を行います．
※32bit OSの場合は，"VBCABLE_Setup.exe"を実行してください．
![スクリーンショット (45).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/63b35aa8-ff9d-8de9-e66a-1987ca76ab01.png)

「Install Driver」をクリックすると，インストールが開始されます．
![スクリーンショット (46).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/53ecdaa1-f888-6fd4-745b-1572c32666e7.png)

以下のようなウィンドウが表示されればインストール成功です．
![スクリーンショット (47).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/5a3e4ea9-3a03-2fa9-109e-2e2780e5255b.png)

## 2. パソコンの再起動
仮想マイクを有効にするために，パソコンを再起動させます．

## 3. Zoomで仮想マイクの再生
Zoomを起動します．

Zoomの「マイク」より”CABLE Input(VB-Audio Visual Cable)”を選択します．
![スクリーンショット (48).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/5119aefc-093b-b570-d582-fe61d9619643.png)

仮想マイクが正常に動作しているかは，Zoom上で別の人にチェックしてもらう必要があります．
[Time keeper](https://maruta.github.io/timekeeper/#t1=15:00&t2=20:00&t3=25:00)を表示し，右上の「Sound Check」をクリックしてタイマー音が流れるか確認してください．
※初期設定では，爆音になる可能性があるので，チェックする相手には注意してもらってください．

タイマー音が流れない場合は，「サウンドコントロールパネル」より，「録音」タブの"CABLE Output"が「有効」になっているかを確認してください．

## 4. Zoomで仮想マイクの音量調整
初期設定の仮想マイク音量は非常に大きいため，調整する必要があります．
ただ，自分のPCだけでは音量の確認ができないので，面倒ですが誰かに逐次確認してもらいながら調整してください．

Zoomの「オーディオ設定」より，以下の項目を行って音量を調整してください．

- マイク音量の「自動で音量を調整」をオフ
- マイク音量を小さめに設定
![スクリーンショット (50).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687190/945a106c-059e-82fb-35e2-63a98b114ddf.png)

以上で，仮想マイクは利用できるようになりました．

# おわりに
できるだけ分かりやすくしようと心掛けましたが，説明不足のところがあるかもしれません．
何か問題等がありましたらお教えください．