ITエンジニア/デザイナ向けにオープンソースを毎日紹介

WebRTCが手軽に使えるようになります!

WebRTCを使うことでサーバを介さずP2Pでデータの送受信ができるようになります。とは言えその実装については知識が必要で、クライアント同士のID(ピアID)をつなぎ込むための仕組みも必要です。

そうした面倒な部分をまるっと実装しているのがPeerServerです。HTML5の新しい楽しみを知る上でも興味深いソフトウェアと言えるでしょう。

まず使い方としてPeer.jsを読み込みます。

<script src="http://cdn.peerjs.com/0.3/peer.js"></script>

後はAPIを作成(オープンソース版は不要かも?)して、それを読み込みます。

var peer = new Peer('pick-an-id', {key: 'myapikey'});

コネクトは次のように行います。

var conn = peer.connect('another-peers-id');
conn.on('open', function(){
  conn.send('hi!');
});

受信は接続さえしていれば通知がされる仕組みです。

peer.on('connection', function(conn) {
  conn.on('data', function(data){
    // Will print 'hi!'
    console.log(data);
  });
});

テキストだけでなく音楽や動画データも配信できます。

// 送信側
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
getUserMedia({video: true, audio: true}, function(stream) {
  var call = peer.call('another-peers-id', stream);
  call.on('stream', function(remoteStream) {
    // Show stream in some video/canvas element.
  });
}, function(err) {
  console.log('Failed to get local stream' ,err);
});
// 受信側
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
peer.on('call', function(call) {
  getUserMedia({video: true, audio: true}, function(stream) {
    call.answer(stream); // Answer the call with an A/V stream.
    call.on('stream', function(remoteStream) {
      // Show stream in some video/canvas element.
    });
  }, function(err) {
    console.log('Failed to get local stream' ,err);
  });
});

デモとして簡単なチャットが提供されています。

チャットのデモ。
チャットのデモ。

他のピアと接続したところ。テキストの他、ファイルの送信もできます。
他のピアと接続したところ。テキストの他、ファイルの送信もできます。

バイナリデータが送受信できるのでファイルや画像を伴ったチャットなどにも利用できるでしょう。今後のWebサービスを考える上で大きな可能性を持ったソフトウェアと言えそうです。

PeerJSはnode/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

PeerJS chat demo

PeerJS - Simple peer-to-peer with WebRTC

peers/peerjs

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2