お手軽WebRTC

WebRTC Logo

とある案件でリアルタイム動画通話を利用したサービスのプロトタイプを頼まれましたが、ネイティブでアプリを作るとなるとコーデックをどうする、サーバをどうするとかなり悩みました。そこでWebRTCってあったじゃないかと思い出して、最近のWebRTC事情を調べてみました。

そもそもWebRTCとは、Web Real-Time Communicationsの略でW3Cが提唱するブラウザでリアルタイムコミュニケーションを可能にするAPI群で、ビデオ・ボイスでのチャットなどを提供します。現在では、ビデオとオーディオのストリーム、バイナリーデータが扱えるデータチャンネルとブラウザ間を直接やりとりできるPeerConnectionが定義されています。
つまりブラウザでビデオチャットを作ったり、並列してバイナリデータをやりとりすることができます。

WebRTCでは、基本ブラウザ間が直接接続する(P2P)ため、NAT越えのようなネットワークの技術的な山もAPIレベルで吸収してくれています。NAT越えにはICE(Interactive Connectivity Establishment)と言う規格が定義され、具体的にはSTUNTURNが利用されていますが、殆ど意識することはありません。

似たような機能にWebSocketがありますが、WebSocketはサーバとクライアント間での情報のやりとりを想定しますが、WebRTCはクライアント間で直接通信を行い、正確性よりもリアルタイム性を重視した通信(UDP)を行っています。

サポートブラウザ

徐々にサポートするブラウザも増えてきました。Chrome(Webkit)勢とFirefoxは対応しています。
2013/12現在のサポートブラウザは以下の通り(出典:caniuse.com)

  • Chrome 21以降
  • Chrome Android 31以降
  • Firefox 17以降
  • Firefox Android 25以降
  • Opera 18以降

WebRTCのAPI

WebRTCの基本的なAPIは以下の4つあります。

  • getUserMedia
    カメラやマイクから入力された映像・音声をWebブラウザへ取り込む
  • RTCPeerConnection
    ブラウザ間でコネクションを貼り、映像・音声のストリームを送受信
  • RTCDataChannel
    ブラウザ間でバイナリデータを送受信
  • RTCIceCandidate
    NAT超えのための仕組みを提供

これらを組み合わせて通信を行います。

通信の流れ

接続の流れを簡単に示します。

ブラウザA(caller)とブラウザB(callee)が通信します。

  1. [ブラウザA]アプリサーバよりhtmlやJavaScriptを取得します。
  2. [ブラウザA]getUserMediaでマイクやカメラのストリームを取得します。
    表示する場合はVideoやAudioにアタッチします。
  3. [ブラウザA]RTCPeerConnectionで接続要求をします。
    このとき、利用するICE(STUN/TURNサーバ)の設定やストリーム、データチャンネル用のイベントハンドラを追加します。
  4. [ブラウザA]RTCPeerConnectionで接続情報を取得したらアプリサーバへ接続依頼オファーを送信します。
  5. [ブラウザB]Aと同様に1〜3を行います。
  6. [ブラウザB]アプリサーバからオファーに受信する。通信許可アンサーをRTCSessionDescriptionで作成し、アプリサーバへ送信します。
  7. [ブラウザA]アンサーを受信します。ブラウザAとBが直接接続を開始します。

流れは複雑になるため、ライブラリを使うと簡単にできます。

ライブラリ

簡単にですが調べたところ以下の3つのライブラリが有名のようです。

デモ

シンプルなビデオとテキストチャットを作ってみました。ライブラリにはwebRTC.ioを使っています。
実際に作ったプログラムはgithubに置いてあります。

サーバ起動にはnode.jsとnpmが必要です。node v0.10.24で動作確認しています。
ファイルを落としディレクトリで以下を実行してください。動作に必要なライブラリがダウンロードされます。

npm install
node server.js

あとは2つのChromeで8080ポートを叩いてみてください。カメラへのアクセスを聞いてきますので許可することでカメラの動画が表示されます。接続されれば自動的にお互いのカメラ画像が見られるはずです。AndroidのChrome同士でも表示出来ます。 (ビデオのクオリティやフレームレートは起動しているPC/スマホの性能とネットワークにかなり左右されます。)

webRTC.ioを使うことでサーバ側は34行、ブラウザ側も57行でできてしまいます。
お手軽ですね。

スマホでのリアルタイムプログラムが簡単に作れるなんて良い時代になりました。

おまけ

社内勉強会の資料も合わせて貼っておきます

コメントを残す

メールアドレスが公開されることはありません。