WebRTC・PeerJSを利用したビデオチャットアプリ開発

View Github Repository Open presentation in a new window

yosssi

See all presentation from yosssi

WebRTC・PeerJSを利用したビデオチャットアプリ開発

0 0

jscafe15

jscafe15

On Github yosssi / jscafe15

WebRTC・PeerJSを利用したビデオチャットアプリ開発

Created by Keiji Yoshida / @_yosssi

自己紹介

  • 吉田 啓二（Keiji Yoshida）
  • Webエンジニア
  • Node.js, JavaScript, HTML5, WebRTC, HTTP/2.0

発表内容

  • WebRTC
  • PeerJSを利用したビデオチャットWebアプリの実装例

WebRTCとは

  • Web Real-Time Communicationsの略
  • Webブラウザ同士が直接、リアルタイムに通信できるようにするためのフレームワーク

  • W3CがAPI、IETFがプロトコルの標準化をそれぞれ推進中

WebRTCの主要API

  • getUserMediaマイク・カメラから入力された音声・映像データをWebブラウザへ取り込む
  • RTCPeerConnectionブラウザ間で音声・映像データを送受信する
  • RTCDataChannelブラウザ間でバイナリデータを送受信する

WebRTCで実現できること

  • テキストチャット、ファイル共有、スクリーン共有、ゲーム、センサーデータフィード、音声・ビデオチャットなど
  • サーバ・ストレージの排除による、より効率的で高速、安全なWebブラウザ間データ通信

各ブラウザの実装状況（1/3）

  • PC・Android版のGoogle Chrome、Firefoxにて実装
    • Google Chrome 23（2012/11/06）〜
    • Firefox 22（2013/06/25）〜
    • Google Chrome for Android 28（2013/07/11）〜
    • Firefox for Android 24（2013/09/17）〜

各ブラウザの実装状況（2/3）

各ブラウザの実装状況（3/3）

  • WebRTCのAPIの実装にはvendor prefixesが必要 W3C標準 Google Chrome Firefox getUserMedia webkitGetUserMedia mozGetUserMedia RTCPeerConnection webkitRTCPeerConnection mozRTCPeerConnection RTCSessionDescription RTCSessionDescription mozRTCSessionDescription RTCIceCandidate RTCIceCandidate mozRTCIceCandidate
  • W3C標準の記法で実装できるライブラリ「adapter.js」https://code.google.com/p/webrtc/source/browse/trunk/samples/js/base/adapter.js

WebRTCを用いたP2P接続の仕組み

WebRTCのP2P接続を簡単に実装できるライブラリ

PeerJShttp://peerjs.com

  • クライアント側とサーバ側（シグナリングサーバ側）の二つのライブラリで構成
  • 音声・映像の送受信（RTCPeerConnection）とバイナリデータの送受信（RTCDataChannel）の両方を実施可能

実装例（クライアント・発信側）

// Peerオブジェクトの生成（シグナリングサーバのホスト名とポート番号を指定する）
var peer = new Peer({host: 'localhost', port: 9000});

// シグナリングサーバとの接続確立時にopenイベントが発生
peer.on('open', function(id){
  getUserMedia({video: true, audio: true}, function(stream) {
    var call = peer.call('another-peers-id', stream);
    call.on('stream', function(remoteStream) {
      // 受け取ったストリームをvideoタグなどへ出力する処理を記載
    });
  }, function(error) {
    // ローカルストリーム取得失敗時の処理を記載
  });
});

実装例（クライアント・受信側）

// Peerオブジェクトの生成（シグナリングサーバのホスト名とポート番号を指定する）
var peer = new Peer({host: 'localhost', port: 9000});

// 他のWebブラウザからの受信時にcallイベントが発生
peer.on('call', function(call){
  getUserMedia({video: true, audio: true}, function(stream) {
    call.answer(stream);
    call.on('stream', function(remoteStream) {
      // 受け取ったストリームをvideoタグなどへ出力する処理を記載
    });
  }, function(error) {
    // ローカルストリーム取得失敗時の処理を記載
  });
});

実装例（シグナリングサーバ）

$> npm install peer
$> peerjs --port 9000 --key peerjs

作成したビデオチャットアプリ

  • Vois.io Sessionshttps://vois.io/ja/sessions
  • Web上でビデオチャットミーティングを行えるアプリ
    • ミーティングスケジュールの登録
    • 参加者の募集・管理
    • ビデオチャットミーティングの実施（WebRTC, PeerJS）

PeerJSを使用した感想

  • WebSocketと同じような記法で、ビデオチャットアプリを簡潔に実装できる
  • 本格的に運用する場合は、クライアントのセッション情報をデータベースへ格納するよう、シグナリングサーバを修正する必要がある