WebRTCでビデオチャットアプリ作成

| 1件のフィードバック

WebRTCを使ったコミュニケーションアプリを作る機会があったので、今回はWebRTC関連のライブラリの使い方とサンプルアプリを紹介したいと思います。

WebRTCとは?

WebRTCはリアルタイムコミュニケーションアプリを作成するためのAPIです。具体的には以下のような機能がJavaScriptの知識さえあれば簡単に実装できます。

  • テキストチャット
  • ビデオチャット
  • ボイスチャット
  • ファイル共有
  • スクリーン共有(Chromeのみ)

アプリ作成

WebRTC用のライブラリはいくつかあるようですが、比較的実績のあるという「PeeJS」を使うことにします。

ライブラリのダウンロード

以下のサイトからライブラリをダウンロードします。

http://peerjs.com/

ピアサーバーの準備

ピアサーバー(シグナリングサーバー)はオープンソースを利用して自前で構築することも可能ですが、今回はPeerJSのクラウドサービスを利用します。以下にアクセスし開発用のAPIキーを取得します。

http://peerjs.com/peerserver

アプリ作成

チュートリアル(http://peerjs.com/)とAPIリファレンス(http://peerjs.com/docs/#api)を見ながら作成していきます。

ピアのセットアップ

先ほど取得したAPIキーを指定してピアを生成します。オプションでデバッグモードを指定すれば詳細なログ情報を確認することもできます。

var peer = new Peer({
  key: "[API KEY]",
  options {
    debug: 3,
    logFunction: function() {
      var copy = Array.prototype.slice.call(arguments).join(' ');
      console.log(copy);
    }
});

ブローカIDの取得

シグナリングサーバーへの接続が成功するとブローカーIDが返却されます。

peer.on('open', function(id){
  console.log('peerId', id);
});

DataConnection

テキストデータやバイナリデータをやり取りする場合はDataConnectionクラスを使用します。

送信側

DataConnectionの場合はconnectメソッドを使用します。接続先のブローカーIDを指定してコネクションを生成します。オプションでラベルを指定することができます。ラベルはやり取りするデータのフォーマットで分けると良いと思います。
■ テキストデータの場合

peer.connect(brokerId, {
  label: 'text',
  metadata: {
    userId: "[my user id]",
    userName: "[my user name]"
  }
});

■ JSONデータの場合

peer.connect(brokerId, {
  label: 'json',
  serialization: 'json'
});

■ バイナリーデータの場合

_peer.connect(brokerId, {
  label: 'file',
  serialization: 'binary',
  reliable: true
});

受信側

connectionイベントにデータ受信処理をラベルにごとに記述していきます。

peer.on('connection', function(conn){
   if (conn.label === 'text') {
    conn.on('data', function(data) {
     // テキストデータの受信処理
    }
   }
   else if (conn.label === 'json') {
    conn.on('data', function(data) {
     // JSONデータの受信処理
    }
   }
   else if (conn.label === 'file') {
    conn.on('data', function(data) {
     // バイナリデータの受信処理
    }
   }
});

MediaConnection

カメラ映像、音声、スクリーンキャプチャ等のメディアデータをやり取りする場合はMediaConnectionクラスを使用します。

メディアデータの取得

あらかじめユーザーにカメラ等のデバイス使用許可を行い、メディアデータを送信する準備をしておきます。

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

navigator.getUserMedia({audio: true, video: true}, function(stream){
  _myStream = stream;

  // 自分のカメラ映像を表示
  var video = $('<video autoplay="true"/>').prop('src', URL.createObjectURL(stream));
  $(document.body).append(video);
}, function(){
  // on error
});

送信側

MediaConnectionの場合はcallメソッドを使用します。接続先のブローカーIDと自分のメディアデータを指定してコネクションを生成します。メディアデータ受信時にvideo,audio要素でメディアデータを表示する処理も記述しておきます。

var call = _peer.call("[my broker id]", _myStream);
call.on('stream', function(stream) {
  // メディアデータ受信処理
  var video = $('<video autoplay="true"/>').prop('src', URL.createObjectURL(stream));
  $(document.body).append(video);
});

受信側

peer.on('call', function(call){
  call.answer(_myStream);
  call.on('stream', function(stream){
    // メディアデータ受信処理
    var video = $('<video autoplay="true"/>').prop('src', URL.createObjectURL(stream));
    $(document.body).append(video);
  });
});

サンプルアプリ

WebRTCを利用したアプリではポピュラーではありますが、サンプルアプリとしてビデオチャットアプリを作成しました。複数人でのグループチャットにも対応しています。
画面は以下のようなイメージとなります。ソースコードのリンクも書いておきますのでダウンロードしてお試しください。HTMLとJavaScriptのみなのでWebサーバーに配置しなくてもindex.htmlをChromeかFirefoxで開けば動作します。(APIキーの取得はお手数ですがお願いします。)

画面イメージ:
video-chat

ソースコード:
https://github.com/kenarai7/video-chat-sample

おわりに

GoogleハングアウトやFaceTimeなど既成のコミュニケーションアプリはたくさんありますが、WebRTCの登場により既存のWebシステムにもユーザ同士がコミュニケーションを行うための機能を簡単に追加できるようになりました。今後B2C、B2Bに限らず様々な業務システムにWebRTCを利用したアプリケーション機能が組み込まれる可能性があります。WebRTCをサポートしているブラウザもまだChrome, Firefox, Operaだけのようですが、今後IE,Safariにも実装されるとさらに活性化すると思います。

今回はサンプルアプリを紹介しましたが、ビデオチャットとドキュメントとプレゼンテーションというinfoScoop上で動作するガジェットをガジェットギャラリーに掲載しています。ご自身のポータルにコミュニケーション機能を追加することができます。ぜひinfoScoopのご利用もご検討頂けたらと思います。

WebRTCでビデオチャットアプリ作成」への1件のフィードバック

  1. ピンバック: WebRTCでビデオチャットアプリ作成 | infoScoop開発者ブログ | 日刊☆なんでもトピックス!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>