次世代Webで注目を集めるWebRTCを手軽に実装できる「SkyWay」を触ってみた

NTTコミュニケーションズ(以下、NTT Comに略称)は、2013年12月5日に、ブラウザ間でリアルタイム通信を実現するWebRTC(Web Real-Time Communications)技術を活用するために開発したプラットフォーム「SkyWay」の無償提供を始めました。

 

「Webサイトからお問い合わせが来ない…」とお悩みの方必見!
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供

WebRTC ? SkyWay ? でできること

 


WebRTC (Web Real-Time Communication)とはWorld Wide Web Consortium (W3C)が提唱するリアルタイムコミュニケーション用のAPIの定義で、プラグイン無しでウェブブラウザ間のボイスチャット、ビデオチャット、ファイル共有ができる。
-wikipediaより引用

 

簡単に説明すると、これまでユーザー間同士のやりとりは、Webサーバーを介して通信していたが、「WebRTC」はブラウザ同士で通信を行い、ビデオチャットや、ファイル共有が行えるAPIです。

この「WebRTC」ですが、利用するには、ネットワークの問題、コネクト用のサーバーの問題など実装には敷居が少し高めです。
そこで実装を簡単にできるようにNTT Comが「SkyWay」を無償で提供開始しました。

 

実装方法

 

  1. SkyWayのサイトより、API登録申請を行います。
  2. JSライブラリを読み込みます
    <script src="https://skyway.io/dist/0.3/peer.js"></script>
    
    
  3. peerの生成を行います。このpeer生成時にユニークな「id」が発番されます。 自身で発行した「id」はidで取得可能です。
    「myapikey」にAPI登録申請で発行されたAPIキーを指定します。
    var peer = new Peer('pick-an-id', {key: 'myapikey'}); 
    // peerに接続時にランダムなidが生成される
    // console.log('My peer ID is: ' + id);
    
  4. 他ユーザーとコネクションし、メッセージ「hi!」を送信
    another-peers-idに他ユーザーで発行されたidを何らかの方法で受け取り、代入します。
    var conn = peer.connect('another-peers-id');
    conn.on('open', function(){
      conn.send('hi!');
    });
    
  5. メッセージの受信
    peer.on('connection', function(conn) {
      conn.on('data', function(data){
        // Will print 'hi!'
        console.log(data);
      });
    });

 

メッセージを送受信する簡単なアプリケーションですが、このように少ないコードで実装することができます。
他にもビデオチャットなどのサンプルコードが掲載されています。

 

デモ

 

簡単なチャットシステムのデモを、CPIスタッフブログに設置いたしました。

 

最後に

 

WebRTCは興味がありましたが、ネットワークやサーバーなどの知識が必要で敷居が高いのと、対応しているブラウザがまだ少ないなどの理由で触っていませんでした。
しかし今回紹介させていただきましたSkyWayは、手軽に実装できますし、今後WebRTCの技術を使ったサービスが増えると予想されるので今のうちから触ってみる価値はありそうですね。

 

 

このエントリーをはてなブックマークに追加

関連タグ:

CPIの最新情報をTwitterでチェックできます!
@cpiadjp
次へ
前へ