WebRTCで画面共有

（※過去のブログ記事をZennにアップしています。）

WebRTCで画面共有

PeerJS（WebRTC）でP2Pで繋いだ画面共有を、Socket.io（WebSocket）で管理して、複数人での画面共有を実装します。

WebRTCとは

WebRTCとは、「Web Real-Time Communication」の称で、ウェブブラウザでリアルタイム通信を実現する技術です。ウェブページ内で直接、P2P（ピア・ツー・ピア）通信を行うことによって、プラグインのインストールやネイティブアプリをダウンロードを行わなくても、ウェブブラウザ間のボイスチャット、ビデオチャット、ファイル共有などを実装できるようになります。

今回は、このWebRTCを使って、画面共有を実装します。

▼ 今回作成した画面共有モックアップです。

PeerJSを使ってWebRTC

PeerJS部分は、以前に公開した記事「WebRTCでビデオチャット」と同じになりますので、こちらをご覧ください。

https://peerjs.com/

Socket.ioを使って接続を管理

PeerJSを使ったP2P通信の接続状態を管理するためにSocket.io（WebSocket）とExpress使います。PeerJSで指定する固有IDに、Socket.ioが発行するソケットIDを使用して接続します。

Socket.ioについての説明は省きますので、過去の記事「Socket.IOで始めるリアルタイム双方向通信」を参考ください。

画面の共有方法

getDisplayMediaメソッドで画面を共有し、PeerJSのcallメソッドで画面共有映像を送信します。

// 画面を共有
navigator.mediaDevices.getDisplayMedia(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;
    });
});

getDisplayMediaメソッドが呼ばれると、以下のような共有する画面の選択するウィンドウが表示されます。

まとめ

前回の記事「WebRTCでビデオチャット」と実装方法は同じですので、同様のところは省きました。違うところは、getUserMediaメソッドではカメラを起動することができましたが、getDisplayMediaメソッドは、画面を共有することができます。

今回、オープンソースにこだわって、PeerJSとSocket.ioを利用しましたが、WebRTCをもっと高機能かつ簡単に利用するためのサービスはいくつか存在します。NTTコミュニケーションズが展開するWebRTCサービスSkywayは、無料でも社内で利用する程度でしたら問題ないのではないかと思います。

ビデオチャットと組み合わせて、バーチャルイベント会場を作ろうと思いますのでご期待ください。

https://webrtc.ecl.ntt.com/