本日から「WebRTC Advent Calendar 2014」始まりました。
初日は入門編ということで、これからWebRTCを利用したアプリを開発したいと思っている方向けに、参考になるスライドやサイトをまとめます。
1. まずは動かしてみる
まずは、Googleが公開しているWebRTC Reference Appをご紹介します。開発者の間では通称apprtcと言われる、WebRTCのデモアプリで、プログラミングで言えば「Hello World」のような位置づけです。
WebRTC Reference App - https://apprtc.appspot.com/
アプリを開くとURLの末尾に r=15075904 というようなルームナンバーが発行されます。
このURLを接続したい人にシェアすることでビデオチャットを行うことが出来ます。
2. WebRTCの概要をさっと理解する
ざっくりWebRTCの動きがわかったところで、今度は用いられている技術を見て行きましょう。
WebRTCはHTML5（広義の意味での）と呼ばれるAPI群の一つですが、２つのAPIから構成されています。
ブラウザでWebカメラやマイクから取得できる映像や音声を取り扱うためのAPI
Media Capture and Streamsブラウザ同士でPeer to Peerによるリアルタイム通信を行うためのAPI
WebRTC 1.0: Real-time Communication Between Browsers
これらの概要を理解するには以下のスライドシェアが役立ちます。
このスライドはかなり盛り沢山です。概要を知る上でおさえて欲しいところは以下のポイントです。
- WebRTCとこれまでのリアルタイムコミュニケーションの違い P9〜P15
- ブラウザ対応状況等 P16〜P18
- 「Media Capture and Streams」の概要 P20〜P38
- 「WebRTC 1.0: Real-time Communication Between Browsers」の概要 P39〜P45
3. Peer to Peer でつながる仕組みを理解する
WebRTCはネットワークレイヤの技術と密接に関係するAPIです。そのため、標準化についてもW3CとIETFで分担して行われています。Webデベロッパーが関連仕様を全てを熟知する必要はありませんが、概要を理解しておくことはトラブルシューティングなどに便利です。
3-1. シグナリングについて
WebRTCでPeer to Peer通信を行う場合、シグナリングサーバと呼ばれる仲介サーバを用意する必要があります。ちょうど、昨年の「HTML5 Advent Calendar」で公開されたこちらの記事がわかりやすいです。
また、先ほどご紹介した「WebRTCの技術解説 公開版」にもアニメーション形式で繋がる仕組みが解説されていますので、合わせてご覧ください。
- 「Peer to Peerを実現するための仕組み（ネットワークのお話）」P50〜P91
ここまでご覧いただくこと、シグナリングの仕組みの中でICE、SDPというキーワードが出てきたと思います。これらは重要なキーワードとなるため個別に見ていきます。
3-2. ICEについて
ICEは、NAT（NATとは - IT用語辞典E-Words）があり、クライアント同士でPeer to Peer通信ができない場合に利用する技術です。いわゆるNAT越えの為の技術となります。WebRTCではこの技術を用いてPeer to Peer通信を行います。
ICEにはSTUN、TURNというサーバサイドの技術が登場します。これらの技術はかなり深い内容なのですが、ざっくり理解するには次の記事が有用です。
壁を越えろ！WebRTCでNAT/Firewallを越えて通信しよう - HTML5 Experts.jp
記事内で、STUNサーバとTURNサーバを自前で構築するという記載がありますが、STUNサーバについてはパブリックに公開されているサービスがいくつか有ります。
stun.l.google.com:19302 / Google提供
stun.services.mozilla.com:3478 / Mozilla提供
stun.skyway.io:3478 / NTTCommunications提供
TURNサーバについてはその性質上パブリックに公開されているサービスがないため、自前で構築する必要がありますが、必須ということではないため、まずはSTUNサーバのみ利用してみて下さい。
3-3. SDPについて
SDPはシグナリングの中でブラウザ同士で、交換される情報のフォーマットを規定するプロトコルです。
実際にどのような内容が交換されるのかまでは知らなくても構いませんが、どのような手順で交換されるのかは理解しておく必要があります。理解する上で参考になる記事をご紹介します。
WebRTCに触ってみたいエンジニア必見！手動でWebRTC通信をつなげてみよう - HTML5 Experts.jp
WebRTCをさわってみる＆手動シグナリングしてみる - Zoo of blue and red
これらのサイトでは、本来はブラウザが自動で交換するSDPを、あえて手動で交換しその動きを掴むということを解説しています。一度試してみると勉強になります。また、WebRTCのクライアント実装は非同期でかなり複雑なものになるため、この辺りの動きを理解しておくと、スムーズに実装することが出来ます。
4. WebRTCでアプリを書いてみる
さて、ここまでWebRTCに関する知識を身につけてきました。ここからは実際にコーディングしていきます。
コーディングする上で参考になるサイトはこちら。
- クライアントサイドの開発
HTML5でWebRTCを使ってみよう！「カメラを使ってみよう」編 - HTML5 Experts.jp
WebRTCを仕組みから実装までやってみる - Web notes.log
- サーバサイドの開発（シグナリングサーバ）
WebRTC初心者でも簡単にできる！Node.jsで仲介（シグナリング）を作ってみよう - HTML5 Experts.jp
5. WebRTCを簡単に開発するためのサービスを活用する
WebRTCはブラウザ同士で簡単にリアルタイム通信を実現する技術・・・という言い方を良くします。しかしながら、ここまで御覧頂いた方であればお分かりかと思いますが、WebRTCはぶっちゃけ簡単ではありません。
そこで、簡単に開発するためのサービスが幾つか存在します。WebRTCを活用したアプリを効率よく開発したい場合は、積極的にこのようなサービスを活用してください。
メジャーなものを幾つかご紹介します。
| サービス名 | 提供サービス | 料金 |
|---|---|---|
| PeerJS | クライアントライブラリ（Web） シグナリングサーバ（BaaS） |
無償 |
| SkyWay | クライアントライブラリ（Web） シグナリングサーバ（BaaS） STUNサービス |
無償 |
| SkylinkJS | クライアントライブラリ（Web/Android/iOS） シグナリングサーバ（BaaS） クライアントPolyfill（IE/safari対応） STUN/TURNサービス |
無償 |
| EasyRTC | クライアントライブラリ（Web/Android/iOS） シグナリングサーバ（ソフトウェアのみ提供） |
無償 |
| OpenTok | クライアントライブラリ（Web/Android/iOS） シグナリングサーバ STUN/TURNサービス MCU機能 |
有償 |
採用実績や提供サービスを考慮し商用グレードで使用する場合はOpenTok、そうでない場合はPeerJS、SkyWay、SkylinkJS、サーバサイドも自前で用意したい場合はEasyRTCがベストな選択肢かもしれません。
OpentTokの日本語の活用事例が先日公開されましたので、参考までに。
SENSEI NOTEのWebRTC導入事例─Opentokで安定したビデオチャットを提供する - HTML5 Experts.jp
これらのサービスを活用して、快適なWebRTCライフを送ってみてください。
6. その他参考資料（順次更新します）
色々なサイトのリンクをリストアップしようとしましたが、hiroyuki_hon さんのリンクまとめが参考になるので、リンクを掲載させてもらいます。ありがとうございます！
※順次有用そうなリンクを更新していきます。