昨今、当たり前に利用するようになったビデオチャットアプリケーション。代表格のZoomは昨年急成長を遂げています。

以前友人から「このビデオチャット機能を使って学生時代のたまり場であった部室を再現したい。ふと感じる寂しさを埋めたい。」なる心の叫びを聞き、ブラウザで簡単にこの機能を実装できるWebRTC技術について調べてみることにしました。

少し調べてみるとさすがのGoogle様が簡単なビデオチャットシステムのサンプルコードを公開してくれていました。

上記ページのガイドを参考に、Firebase上にサンプルコードをデプロイした後、FirebaseのホスティングURLにアクセスすれば、１対１の簡単なビデオチャットができるようになります。

以下のURLは僕の無料利用版FirebaseのホスティングURLです。数日間はデプロイ状態にしておこうと思いますので、興味がある方はアクセスしてみてください。

使い方：
１．OPEN CAMERA & MICROPHONE　よりカメラとマイクを有効化
２．CREATE ROOM　よりルームIDを取得
３．別の端末利用者にルームIDとホスティングURLを伝える
４．別の端末でURLにログイン後、カメラとマイクを有効化し　JOIN ROOM　より２で取得したルームIDを入力

巨人の肩に乗ってサンプルコードを動かしてみるだけでも楽しいものです。ただ、、肝心の友人からのリクエストである、部室のだらだら緩く人が集まる感じ、どうやって再現するんだろうか、、（サンプル動かしたら満足いした自分がいます）

■動作環境

・Ubuntu 18.04 on Windows（WSL 2）
　※WSL 2の設定方法：https://www.pc-koubou.jp/magazine/40465
　※nodejs/npmをインストール済みであること
　　インストール方法の参考：https://qiita.com/seibe/items/36cef7df85fe2cefa3ea　
・firebase

■動作確認手順

１．firebaseプロジェクトを作成する
　1. Firebaseコンソールで、[プロジェクトの追加]をクリックし、FirebaseプロジェクトにFirebaseRTCという名前を付けます。
　2. [プロジェクトの作成]をクリックします。
　3. Firebaseコンソールメニューの[開発]セクションで、[データベース]をクリックします。
　4. CloudFirestoreペインでデータベースの作成をクリックします。
　5. [テストモードで開始]オプションを選択し、セキュリティルールに関する免責事項を読んだ後、[有効にする]をクリックします。
　⇒ここまででCloudFirestoreを有効化。

２．サンプルコード入手

git clone -b solution https://github.com/webrtc/FirebaseRTC
cd FirebaseRTC

※masterブランチだとソースコードが虫食い状態になっているため、solutionブランチをcloneする

３．Firebaseコマンドラインをインストール
　1. 次のnpmコマンドを実行してCLIをインストールします　npm -g install firebase-tools
　2. 次のコマンドを実行して、CLIが正しくインストールされていることを確認します　firebase --version
　3. 次のコマンドを実行して、FirebaseCLIを承認します　firebase login
　4. 次のコマンドを実行して、アプリをFirebaseプロジェクトにアプリを関連付け　firebase use --add
　5. プロンプトが表示されたら、プロジェクトIDを選択し、Firebaseプロジェクトにエイリアス名（default）を付けます。

４．ローカルサーバを実行
　1. 次のFirebaseCLIコマンドを実行します　firebase serve --only hosting
　2. コマンドラインに次の応答が表示されます。　hosting: Local server: http://localhost:5000
　3. http：// localhost：5000でアプリを開きます。
　　⇒webrtc画面が見えてればOK

５．Firebase CloudFirestoreでアプリを実行
CloudFirestoreにアプリをデプロイする

cd FirebaseRTC
firebase login
firebase use --add
firebase deploy

⇒以下のようにFirebaseのホスティングURLが表示される

Hosting URL: https://fir-rtc-b1db8.web.app

６．動作確認
ホスティングURLにログインする。
カメラとマイクをONにし、roomを作成する。
room IDが表示されるので、別の端末でそのIDにアクセスする。
２つのデバイス間でテレビ電話できればOK

７．Firebaseアプリの削除

firebase hosting:disable