peer.jsで遠隔カメラを作ってみた【WebRTC】

はじめに

WebRTCで気軽にP2P通信が可能になり、ビデオチャット等が簡単に作れるようになってきました。

※残念な事にWebRTCはsafariが対応していません、対応したら色々と実案件でも使いやすくなると思います。PCとAndroidのChromeとFirefoxで利用できます。

今回はその技術を使って、遠隔カメラを作ってみました。 カメラ役のPCもしくはAndroidの映像を、複数人で見ることができるというものです。※カメラは1台のみで複数台には対応していません、今後できるようにする予定です。

peer.jsの準備 

今回利用するpeer.jsはWebRTCの実装をラッピングしてくれて、WebRTCはサーバも必要なのですが その辺りの事は気にしないで出来るようになってます、素晴らしいですね。※peer.jsの中身を見ればわかりますが、WebRTCをそのまま使おうとすると結構大変です。

利用するには登録が必要なので下記から登録します、無料です。

http://peerjs.com/peerserver

登録すると下記の画面になるので、Create new API keyボタンを押下してAPI keyを作成しましょう。

 作成するとAPI keyが発行されます、これを使うことでpeer.jsを利用可能になります。

 

peer.jsは日本語ドキュメントも存在します、仕組みを理解するのにお世話になりました。

PeerJS ドキュメント

実装

わかりやすいように、色々エラーハンドリングとか通信切断時のことは一旦飛ばして、コアな部分だけを抜き出しました。 詳しいことはソースのコメントを見て頂くとして、この実装を行うことで カメラが開始された後に、閲覧側がページを開くとカメラからの映像を閲覧出来ます。

■カメラ側

■閲覧側

今回やろうとしていることはこれだけで動作します。 

実験としてうちのチームリーダーは席にいないことも多いので、いつでもいるかどうか確認できるようにカメラを置いてみました ※この時は不在でした。

 

 最後に

WebRTCのすごい所は映像であっても遅延がほとんどない所と、P2Pでクライアント間通信するのでWebSocketを利用するより、サーバコストを下げることが出来る点ですね。 

N対N通信ももちろん可能ですが、その場合はサーバサイドでクライアント管理をしっかりやらないと難しそうです。 今後はWebRTCでのN対N通信について調査していきたいと思います。

●この記事を書いた人