WebRTCでビデオチャット
（※過去のブログ記事をZennにアップしています。）
PeerJS（WebRTC）でP2Pで繋いだビデオチャットを、Socket.io（WebSocket）で管理して、複数人でのビデオ会議を実装します。
WebRTCとは
WebRTCとは、「Web Real-Time Communication」の称で、ウェブブラウザでリアルタイム通信を実現する技術です。ウェブページ内で直接、P2P（ピア・ツー・ピア）通信を行うことによって、プラグインのインストールやネイティブアプリをダウンロードを行わなくても、ウェブブラウザ間のボイスチャット、ビデオチャット、ファイル共有などを実装できるようになります。
今回は、このWebRTCを使って、ビデオチャットを実装します。
▼ 今回作ったサンプル
※1台のPCの同じカメラでブラウザを4つ立ち上げてます。
PeerJSを使ってP2P通信
P2Pは、ネットワーク上の機器同士が直接接続・通信するための方式のひとつです。これまでのネットワーク通信では、データを提供するサーバーと提供されたデータを利用するクライアントに分かれる方式が一般的でした。P2P方式では、機器同士が直接データをやり取りするため、クライアントに負担が分散されます。
このP2P通信をブラウザで実現（WebRTC）するのに便利なPeerJSというライブラリを使っていきます。
PeerJSサーバの準備
まずはPeerJSサーバをインストールします。
npm init -y
npm install peer
インストールしたPeerJSサーバを起動します。
npx peerjs --port 9000
これで9000番ポートでPeerJSサーバにアクセスできます。
クライアント間の接続
まずは自身の固有ID（固有ID_A）を指定してPeerJSオブジェクトを作成し、接続相手の固有ID（固有ID_B）でCONNECTオブジェクトを作成し、sendでメッセージを直接送信します。
onst peer = new Peer('固有ID_A', {
host: 'localhost',
port: 9000,
path: '/'
});
const conn = peer.connect('固有ID_B');
conn.on('open', ()=>{
conn.send('hi!');
});
受けて側でも同様に自身の固有ID（固有ID_B）を指定してPeerJSオブジェクトを作成し、onでメッセージを受信します。
const peer = new Peer('固有ID_B', {
host: 'localhost',
port: 9000,
path: '/'
});
peer.on('connection', (conn)=>{
conn.on('data', (data)=>{
console.log(data); // Will print 'hi!'
});
});
1対１の通信はこれで実現できますが、複数同時通信となると、接続者全ての固有IDを管理する必要があり、PeerJSだけだと厳しくなってしまいます。
Socket.ioを使って接続を管理
PeerJSを使ったP2P通信の接続状態を管理するためにSocket.io（WebSocket）とExpress使います。PeerJSで指定する固有IDに、Socket.ioが発行するソケットIDを使用して接続します。
Socket.ioについての説明は省きますので、過去の記事「Socket.IOで始めるリアルタイム双方向通信」を参考ください。
カメラ映像の共有方法
getUserMediaメソッドでカメラを起動し、PeerJSのcallメソッドでカメラの映像を送信します。
// カメラ起動
navigator.mediaDevices.getUserMedia(option).then((mediaStream)=> {
// PeerJSでカメラ映像送信
peer.call('ソケットID', mediaStream);
}).catch((error)=> {
});
PeerJSのonメソッドでカメラ映像を受信し、VIDEOタグに反映するとカメラ映像が表示されます。
// PeerJSでカメラ映像受信
peer.on('call', (call)=> {
call.answer();
call.on('stream', (mediaStream)=> {
video.srcObject = mediaStream;
});
});
まとめ
PeerJSを使ったP2P通信は比較的簡単に実装できますが、複数人同時に接続となると、頭を悩ませるところです。今回はSocket.ioを使って管理しましたが、WebRTCをもっと高機能かつ簡単に利用するためのサービスはいくつか存在します。NTTコミュニケーションズが展開するWebRTCサービスSkywayは、無料でも社内で利用する程度でしたら問題ないのではないかと思います。ちなみにこのSkywayはPeerJSがベースになっているようです。
今回はあくまでオープンソースにこだわりました。
Discussion