作成したアプリケーション
https://nextjs-webrtc-firebase.web.app
Next.js ＆ Web-RTC を利用したビデオ通話アプリのサンプルです。ビデオ通話、画面共有、チャット機能、録画機能、デバイス設選択 などの機能を実装しています。
主な機能
- ビデオ通話
- 画面共有
- チャット機能
- 録画機能
- デバイス選択
利用している技術
- Next.js （React16）
- Typescript
- Web-RTC
- Firebase（Auth・Realtime Database）
WebRTCとは？
「Web Real-Time Communication」の略称で、APIを経由して、ウェブブラウザやモバイルアプリでリアルタイム通信を実現しようと立ち上がったプロジェクトです。リアルタイム通信を標準化するために開発されました。
主に以下のような機能が実現できます。
- カメラ・マイクといったデバイスへのアクセス
- 仲介を必要とせずに(実際には完全なサーバーレスとは言い難い)ブラウザ・モバイル間でデータの交換ができる
- キャプチャしたオーディオ／ビデオストリームの送受信が出来る
P2P 通信 が確立するまでの処理の流れ
1. Aさんがルームに入ったらブロードキャストですべてのメンバーにjoinを送信する
2. BさんがAさんからjoinを受信したらBさんはAさんにacceptを送信する
2-1. joinを受信して新メンバーの情報をローカルに登録する
2-2. acceptを送信する
3. AさんがBさんからacceptを受信したらAさんはBさんにofferを送信する
3-1. acceptを受信して既存メンバーの情報をローカルに登録する
3-2. 通信経路をシグナリングサーバーに送信できるようにイベントハンドラを登録する
3-3. P2P確立後、通信相手のメディアストリーム情報の受信後、表示先のDOMを登録しておく
3-4. SDP(offer)を作成する
3-5. 作成したSDP(offer)を保存する
3-6. SDP(offer)を送信する
4. AさんがBさんからofferを受信したらAさんはBさんにanswerを送信する
4-1. 新メンバーからofferを受信する
4-2. 通信経路をシグナリングサーバーに送信できるようにイベントハンドラを登録する
4-3. P2P確立後、通信相手のメディアストリーム情報の受信後、表示先のDOMを登録しておく
4-4. 受信した相手のSDP(offer)を保存する
4-5. SDP(answer)を作成する
4-6. 作成したSDP(answer)を保存する
4-7. SDP(answer)を送信する
5. BさんがAさんからanswerを受信したらBさんはAさんのSDP(answer)を保存する
5-1. 既存メンバーからanswerを受信する
5-2. 受信した相手のSDP(answer)を保存する
6. シグナリングサーバー経由でcandidateを受信し、相手の通信経路(candidate)を追加する
6-1. Aさん、Bさんはシグナリングサーバーからcandidateを受信する
6-2. 受信した相手の通信経路(candidate)を保存する
MediaDevices
getUserMedia()
要求された種類のメディアを含むトラックを持つ MediaStream を生成するメディア入力を使用する許可をユーザーに求めます。
// カメラ
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
// 画面共有
navigator.mediaDevices.getDisplayMedia({ audio: false, video: true })メディアストリームをVideoタグに書き出す
const videoRef = document.querySelector(`#video-xxxx`)
videoRef.srcObject = mediaStream開発環境の構築
ソースコード
MIT ライセンスにてコードを公開していますのでご利用下さいませ。
https://github.com/isystk/nextjs-webrtc-firebase
ディレクトリ構造
.
├── docker/
│ ├── apache/ (Webサーバー)
│ │ └── Dockerfile
│ ├── app/ (Node.js をDockerで動作させたい場合に利用する)
│ │ └── Dockerfile
│ └── firebase/ (Firebase のエミュレータ)
│ ├── Dockerfile
│ └── src
│ └── functions (Cloud functions のソースコード)
├── src/ (Next.js のソースコード)
│ ├── @types/
│ ├── common/
│ ├── components/
│ ├── pages/
│ ├── store/
│ ├── styles/
│ └── utilities/
├── test/
└── dc.sh （Dockerの起動用スクリプト）起動方法
# .env ファイルに ローカルのIPアドレスを設定 $ cp .env.example .env # Dockerを起動 $ ./dc.sh start # クライアントの起動 $ yarn $ yarn dev # ブラウザでアクセス open https://xxx.xxx.xxx.xxx/
関連記事
