ビデオ付きホワイトボードアプリをアップデートしてみた

## 概要

ホワイトボード共有サービスをデザイン、機能共にアップデートしました。
[前回の記事](https://qiita.com/esakiryota/items/9297e213c4af67ce7d94)
[ホワイトボード共有アプリ Pairs Board](https://www.pairs-board.link/)
利用はもちろん無料。さらにアカウント作成必要なしなので、手軽に利用してみてください。
コストがかからない技術につきましては次の記事に書く予定です。

## 使用方法
1. 以下の画面の『ルームを作成』をクリック
![スクリーンショット 2024-03-16 19.58.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860891/d185f468-3be1-0efa-c2be-f97fc4b77478.png)

2. 『表示名』『ルーム名』を入力し、『作成』をクリック
![スクリーンショット 2024-03-16 20.02.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860891/707deb93-4ccf-2cc3-ce9c-79de0399463f.png)

3. 以下の画面が表示されることを確認
![スクリーンショット 2024-03-16 20.03.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860891/25027ef9-0938-293b-8276-bfa41f47968b.png)

4.以下のボタンをクリックし、招待リンクをクリップボードに保存し、通信したい相手に送信
![スクリーンショット 2024-03-16 20.04.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860891/b8a64019-df8c-0bff-3383-1ce8ab56d9b7.png)

5.相手はそのリンクをブラウザで開き、表示名に名前を入れ、参加をクリック
![スクリーンショット 2024-03-16 20.06.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860891/e98d01fb-0c59-bc25-3178-63f516d45bd9.png)

6.通信が開始される
![スクリーンショット 2024-03-16 20.08.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860891/ff4f781e-ee0f-1e71-2ce5-4c0182e35abc.png)

## 前回からのアップデート機能
### 映像にカメラ機能を付け加え、カメラアイコンをクリックするとその瞬間のビデオの静止画を画像ファイルとして、ボードにアップロードする
![スクリーンショット 2024-03-16 20.13.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860891/912cc379-0dc8-84af-10cd-307088a00610.png)![スクリーンショット 2024-03-16 20.14.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860891/8dcc215c-38d7-14fe-539f-53c9ee0001b8.png)

### 画面共有ボタンをクリックすると画面共有映像がボードに反映される。（chrome, edge限定）
1. 以下の画面共有ボタンをクリック
![スクリーンショット 2024-03-16 20.16.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860891/10d5a98f-39d6-aac9-6bb7-7e0ca9704bff.png)

2. 共有したい画面を選択
![スクリーンショット 2024-03-16 20.18.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860891/e30bb5ce-9876-375e-daf4-c9f1290cb90c.png)
3. 左上に投影
![スクリーンショット 2024-03-16 20.18.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860891/9a82e16b-d4ad-a47e-872a-63a569ec0293.png)
4. 場所を移動したい場合は上のボタン群の左から3つ目のボタンをクリックし、画面共有映像コンテンツをドラックアンドドロップをすれば好きなところに動かせる。また、ドラッグした時の右下の小さな四角をドラッグアンドドロップをすれば、画面共有映像コンテンツのサイズも変更できる
![スクリーンショット 2024-03-16 20.22.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860891/87b0b63b-a220-73bf-a778-8fd932c0aa25.png)
5. 相手も画面共有する場合は相手の画面共有コンテンツと自分の画面共有コンテンツの2枚を並べることも可能。オンラインビデオアプリにありがちな「ちょっと画面いただいてもいいですか？」など言わずとも画面共有が可能
![スクリーンショット 2024-03-16 20.27.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860891/c30f71f5-2caa-1b04-6408-8310c7c16c65.png)

### AR機能（完全に趣味）
1. 上のボタン群の左から11個目のボタンをクリック
![スクリーンショット 2024-03-16 20.30.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860891/513fabcc-17f5-d09b-c2cf-d4ebfa03f112.png)
2. 画面に手をかざすと、ボードに自分の手が現れる。
![スクリーンショット 2024-03-16 20.31.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860891/6bb18c3a-2fc5-7b1c-92df-5ba25f738c0a.png)
3. 手の線の色と太さも変更可能![スクリーンショット 2024-03-16 20.33.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860891/4a546937-ea7b-d514-d77c-ee3399137c55.png)

### 自分の映像をボードに移す機能（chrome, edge限定）
1. ビデオの右上の『+』ボタンをクリック
![スクリーンショット 2024-03-16 20.35.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860891/1d123e18-abaa-155c-f77d-0171ed5dddc0.png)
2. 左上に自分の映像コンテンツが表示される
![スクリーンショット 2024-03-16 20.36.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860891/f576a35c-1ecb-a169-a85b-4b038a650f8c.png)
3. 画面共有時と同じようにその映像コンテンツも動かす、サイズを変更するなどが可能
![スクリーンショット 2024-03-16 20.38.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860891/5759e6a3-d04b-f35f-5702-0d5e7924353b.png)


## 技術
次の記事に記載予定

## 背景
オンラインで家庭教師をしているときに、Zoomを使用しおり、ビデオ共有アプリなら、作れそうだし、せっかくなら作ってしまおうと考えたのがきっかけです。
今回アップデートした理由としては
①仕事に少し慣れ、暇だった
②他のホワイトボード共有アプリと差別化してみたいと考えた
です。

『Pairs Board』で検索してみてください！