Next.js で Web-RTC を利用したZoomのようなビデオ通話アプリを作成する

作成したアプリケーション

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/

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。