はじめに
WebRTCで気軽にP2P通信が可能になり、ビデオチャット等が簡単に作れるようになってきました。
※残念な事にWebRTCはsafariが対応していません、対応したら色々と実案件でも使いやすくなると思います。PCとAndroidのChromeとFirefoxで利用できます。
今回はその技術を使って、遠隔カメラを作ってみました。 カメラ役のPCもしくはAndroidの映像を、複数人で見ることができるというものです。※カメラは１台のみで複数台には対応していません、今後できるようにする予定です。
peer.jsの準備
今回利用するpeer.jsはWebRTCの実装をラッピングしてくれて、WebRTCはサーバも必要なのですが その辺りの事は気にしないで出来るようになってます、素晴らしいですね。※peer.jsの中身を見ればわかりますが、WebRTCをそのまま使おうとすると結構大変です。
利用するには登録が必要なので下記から登録します、無料です。
登録すると下記の画面になるので、Create new API keyボタンを押下してAPI keyを作成しましょう。
作成するとAPI keyが発行されます、これを使うことでpeer.jsを利用可能になります。
peer.jsは日本語ドキュメントも存在します、仕組みを理解するのにお世話になりました。
実装
わかりやすいように、色々エラーハンドリングとか通信切断時のことは一旦飛ばして、コアな部分だけを抜き出しました。 詳しいことはソースのコメントを見て頂くとして、この実装を行うことで カメラが開始された後に、閲覧側がページを開くとカメラからの映像を閲覧出来ます。
■カメラ側
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
【camera.html】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>fixed point camera - camera</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> <script src="http://cdn.peerjs.com/0.3/peer.js" type="text/javascript"></script> <script src="js/camera.js"></script> </head> <body> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
【camera.js】 // カメラの準備 navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; navigator.getUserMedia({ video: true, // 今回は映像のみ audio: false }, function(cameraStream){ connectPeer(cameraStream); }, function(){ alert('webrtcに対応していません'); }); function connectPeer (cameraStream) { // camera1234はこのカメラに接続するためのIDです、閲覧側はこのIDに対して接続を行います // 指定しないとランダムなIDが利用されます var peer = new Peer( "camera1234", { key: "XXXXXXXXXXXXXXX", // 発行したAPI keyを指定します debug: 3 // 詳細なログをconsoleに表示 }); // 閲覧側からの接続要求をハンドリングします peer.on('connection', function(dataConnection) { // 接続が確立したので、カメラ側からMediaConnectionでStreamを渡します var mediaConnection = peer.call(dataConnection.peer, cameraStream); }); // ページを閉じた際にpeerをクリアします $(window).on('beforeunload', function(){ if (! peer.destroyed) { peer.destroy(); } }); } |
■閲覧側
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
【index.html】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>fixed point camera - viewer</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> <script src="http://cdn.peerjs.com/0.3/peer.js" type="text/javascript"></script> <script src="js/viewer.js"></script> </head> <body> <video id="video" muted="muted" autoplay="autoplay"></video> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
【viewer.js】 var peer = new Peer({ key: "XXXXXXXXXXXXXXX", // 発行したAPI keyを利用します debug: 3 }); peer.on('call', function(call) { // カメラ側からStreamが送られてきた場合に呼ばれます // 閲覧側のカメラは利用しないので、何も指定しないでanswerをします call.answer(); // カメラからのStreamをvideoタグに追加します call.on('stream', function(stream) { $('#video').attr('src', URL.createObjectURL(stream)); }); }); // カメラ側に接続します peer.connect("camera1234"); $(window).on('beforeunload', function(){ if (! peer.destroyed) { peer.destroy(); } }); |
今回やろうとしていることはこれだけで動作します。
実験としてうちのチームリーダーは席にいないことも多いので、いつでもいるかどうか確認できるようにカメラを置いてみました ※この時は不在でした。
最後に
WebRTCのすごい所は映像であっても遅延がほとんどない所と、P2Pでクライアント間通信するのでWebSocketを利用するより、サーバコストを下げることが出来る点ですね。
N対N通信ももちろん可能ですが、その場合はサーバサイドでクライアント管理をしっかりやらないと難しそうです。 今後はWebRTCでのN対N通信について調査していきたいと思います。