Android,iPhoneアプリでのWebRTC+WebRTCを使った自社の事例紹介+WebRTC基礎+google codeのソースビルド周りの話

1. WebRTC
〜Real Time Communication〜

2. 自己紹介
山中夏樹
・トライフォート所属
・自社製アプリ・スタートークを初期から開発
・会社で使ってる言語はNode.js,Android Java,Objective-C,PHP
・一応サーバー周りからフロントエンド・ネイティブまで扱える
・自社のネイティブ勉強会幹事やってます(これも発表時の資料)

3. 今回のテーマ
・スタートークというトークアプリ(Android・iPhone)にて実装した
通話機能において使われている技術WebRTCについて

4. 1. WebRTCとは
2. デモ
3. スタートークでWebRTCを使った経緯
4. WebRTCの技術的仕組み
5. ネイティブアプリにおけるWebRTC
6. WebRTCで複数人ビデオチャット
アジェンダ

5. WebRTCって何？

6. WebRTCとは
・ブラウザ間で特定のプラグイン無しにボイスチャット、ビデオチャット、ファイル共有
等ができる。
・JavaScriptを200行くらい書いたらSkypeもどきが作れる
・W3Cにより標準化が進められ、開発はGoogle主導で今も頻繁に更新されて いる
・各ブラウザ対応状況 http://caniuse.com/#feat=stream
Chrome・Firefox・Opera・Android Chrome・Lolipop以降のAndroidブラウザが対応
iOS・IE・Safariは未対応

7. まぁ、見た方が早いので

8. デモ
http://192.168.0.3:8080/webrtc_example.html
使用するもの：Chrome、node.js+socket.io
300行以内のHtml
コードはgithubに上げました
https://github.com/natsuki-yamanaka/webrtc-socketio-sample
ほぼがねこさんのコードそのままです。めっちゃ詳しい説明書いてあるので興味ある方は下記参照
http://html5experts.jp/mganeko/5349/

9. WebRTCすげえ！
…って思ってもらいたい

10. WebRTCを選んだ
理由

11. WebRTCを選んだ理由
■比較検討した他の手段
・VoIP + SIP
SkypeやLINEはこのプロトコルを使っているという実績あり
音声通話、コーデックの詳細設定ができ、安定性が高そうだった
見つかったライブラリ
○ Android - https://code.google.com/p/sipdroid/
○ iOS - https://code.google.com/p/siphon/
○ サーバー - Asterisk

12. WebRTCを選んだ理由
■比較検討した他の手段
・VoIP + SIP
問題点：
○アプリ未起動時でもバックグラウンドでサーバとのコネクションを保持する為負荷大
○NAT越えを自前で実装する必要あり
○ライブラリが一部GPL
○ビデオチャットなどの実装はあまり sampleない

13. WebRTCを選んだ理由
・WebRTC
ブラウザでボイスチャット、ビデオチャット、ファイル共有などが簡単にできる
○Android - https://github.com/noiges/webrtc-android-demo ←これそのままだと問題があった
○iOS - https://github.com/gandg/webrtc-ios
○ICEサーバー - https://code.google.com/p/rfc5766-turn-server/

14. WebRTCを選んだ理由
2、元がJavaScriptなので、PCへの移行がしやすい
3、NAT越えが簡単
4、トライフォートは常に新しい技術を追い求めていく会社だと
思ったから
1、Android・iOSでも動く
・WebRTC

15. WebRTCの仕組み

16. ここからネットワークよりの
話です

17. 元々はブラウザの技術で、できることは
● P2P通信の確立
● ICE(Interactive Connectivity Establishment)でNAT越え
● メディアストリームの取得 (音声・動画等のデータ )
● DataChannel APIを用いてファイルなどをやりとり
など。
WebRTCの仕組み
概要
※P2P通信 サーバーを介さないクライアント同士の接続
※NAT ルータやモデムなどの、 Internetとクライアントの間に挟まるネットワークの総称

18. ・RTCPeerConnection P2P通信
・RTCSessionDescription P2P通信
・RTCIceCandidate ICEでNAT越え
・getUserMedia メディアストリームの取得
WebRTCの仕組み
JavaScript API

19. WebRTCの仕組み
P2P通信
・HTTPやWebSocketなどのプロトコルと違い、サーバーを介さずにクライアント同士での接続を 行う。
・WebRTCの場合、HTTPなどに使われるTCPよりもオーバーヘッドの少ない UDPプロトコルを使 用して
通信を行える為、やりとりが高速
・P2P通信を行う為の情報を SDP(Session Description Protocol)というフォーマットでやりとりす る。 SDP
には自分のIP、ポート、メディアの種類、コーデックなどが含まれている。
※new RTCPeerConnectionでPeer接続生成
※new RTCSessionDescriptionでSDP生成

20. ローカルネットワーク
・P2P通信に必要なデータはシグナリングでやりとりする。 (スタートークの場合は Socket.IOを使う)
・先に送る方がOffer、後に来た方がAnswerとしてSDPを送信する
WebRTCの仕組み
P2P通信
192.168.0.3:1337
※SDP：P2P通信に必要なデータ
192.168.0.1:1337
先手 後手
createOffer
sendOffer
SDP
setOffer
createAnswer
SDP
setAnswer
sendAnswer
接続確立(NATがなければ)

21. Bさん家Aさん家
・NAT越えの技術を総称してICEと言う。
・ICEにはSTUN・TURNなどのプロトコルがある
・どんなNATでも越えられる技術はない
・Internetを介してP2P通信を行う際には通常お互いのIPとポートを知る必要があります。しかし
間にNATがあると自分のIPを伝えてもP2P通信で接続できない。
WebRTCの仕組み
NAT越え
192.168.0.1:1337
NAT
192.168.0.3:1337
NAT
192.168.0.3:1337

22. Bさん家Aさん家
192.168.0.1:1337
・NAT越しに繋がる為には、一度 NAT外部にアクセスして自分の IP、ポートを取得し、その IPに接続する
・接続先は複数取得される (eth0・eth1とか有線・無線とか)
・接続先候補をCandidate(候補)と呼び、OfferとAnswerと共に送り合う
WebRTCの仕組み
NAT越え
NAT
192.168.0.3:1337
NAT
STUNサーバ
50.76.44.114:2312360.76.44.114:43123
60.76.44.114:43123
50.76.44.114:23123

23. ・getUserMedia API
WebRTCの仕組み
メディアストリームの取得
● PCに付属しているカメラやマイクな
どのデバイス入力を取得して、
<video>タグや<audio>タグで流すこ
とができる
● 別にP2PしなくてもWebRTC
● コードも簡単→

24. WebRTCの仕組み
DataChannel API
● WebSocketと大体同じことができる
● 自分はあまり使ってないので省略
● 興味ある方は
http://www.html5rocks.com/ja/tutorials/webrtc/datachannels/
らへんを参照

25. ネイティブアプリにおけ
るWebRTC

26. ・公式webrtcサイトにAndroid・iOS用ソースが存在
http://www.webrtc.org/native-code/development
・↑ビルド手順が複雑
・Chromiumプロジェクトに依存してるのでソース落とすのに半日くらいかかる
・容量20GB、メモリ2GBは必須
・ninja、gclient、gyp等の謎のビルドツールを使ってる …誰か解析して欲しい
・今も頻繁に更新されていて、最新のソースはビルドできないことも
・できれば使いたくない！
ネイティブアプリにおけるWebRTC
ライブラリ
そこで！

27. さきほど紹介したものを使ってみた
○Android - https://github.com/noiges/webrtc-android-demo ←これそのままだと問題があった
○iOS - https://github.com/gandg/webrtc-ios
○Unity - Asset Storeになかった…C++ソースで自作するしかない
中身はさっきの公式をビルドして .soと.jar(Android)、.a(iOS)を使ったデモApp
https://apprtc.appspot.com/に接続してブラウザともビデオチャットができる
ネイティブアプリにおけるWebRTC
お手軽ライブラリ

28. ○Android - https://github.com/noiges/webrtc-android-demo
メインの処理：AppRTCClient.java,AppRTCDemoActivity.java
2ファイル計1117行
○iOS - https://github.com/gandg/webrtc-ios
メインの処理：APPRTCAppClient.m、APPRTCAppDelegate.m、APPRTCViewController.m
3ファイル計1245行
ネイティブアプリにおけるWebRTC
お手軽ライブラリ
Htmlのソースだと300行以内で書けることが冗長に書いてある

29. ○Android - https://github.com/noiges/webrtc-android-demo
・AppRTCGLView ≒ <video>
・PeerConnectionFactory + PeerConnection ≒ RTCPeerConnection
・RTCSessionDescription ≒ RTCSessionDescription
・MediaStream ≒ getUserMedia
○iOS - https://github.com/gandg/webrtc-ios
・RTCVideoRenderer ≒ <video>
・RTCPeerConnectionFactory+RTCPeerConnection≒ RTCPeerConnection
・RTCSessionDescription ≒ RTCSessionDescription
・RTCVideoCapturer ≒ getUserMedia
ネイティブアプリにおけるWebRTC
お手軽ライブラリ Class対応表
おまけ

30. ・LGL22では動いたが、他の端末が動かなかった (←これすごい最近気づいた )
・端末の音声サンプリングレートが対応していないというカタストロフィ (44100Hzを使ってた)
・結局https://github.com/pristineio/webrtc-build-scriptsを参考に、公式サイトのソースをビルド
・ →…それでもサンプリングレートでエラー
・C++のソースのDefault Sampling Rateとか修正(16000Hz)
・ →動いた！(2014/12初め)
→スタートークリリースへ
ネイティブアプリにおけるWebRTC
問題点：Android
※サンプリングレート
1秒に何回音声を取得するか。数値が大きいほど音がきれいに聞こえる

31. ・まだ全端末で動くわけではない
・OS3.0以上(API Level11のものが含まれてるので )
・4系でも音声周りのエラーでまだ 7割程度しか動作を確認できず
ネイティブアプリにおけるWebRTC
問題点：Android

32. ・現状通話は安定してできている
・ビデオチャットを入れると、キャプチャの取得に 4,5秒時間がかかった
・http://qiita.com/ykst/items/412496713e1e887bcfca
↑ここら辺を見るとまだパフォーマンスは上げられそう
・公式のソース最新の安定板を入れるべき
ネイティブアプリにおけるWebRTC
問題点：iPhone

33. 複数人のビデオチャッ
ト

34. ・技術的には可能
・帯域限界やCPUの処理が足りなかったりで、PCでも10人くらいがいいとこ
・スマホだったら…3人くらいじゃね？
複数人のビデオチャット
スペックの限界

35. 1. 中継サーバーを置くことでP2Pを一本化(MCUとか)
→ 負荷がでかいのでなるべくやりたくない
→ PCなら同時20人ほどにはなるらしい
複数人のビデオチャット
解決策
MCUサーバ
WebRTCでビデオチャット
MCUがそれぞれからくる
メディアデータを合成して配
信

36. ２. クライアントの音質や画質を極力落としてデータを少なくする
→ 粗さの限界がある
３. n対nではなく1対nの音声配信なら5人くらいはいけるかも
→ PCなら動画を同時10人はいける
複数人のビデオチャット
解決策

37. 以上
ありがとうございました