Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WebRTC
〜Real Time Communication〜
自己紹介
山中夏樹
・トライフォート所属
・自社製アプリ・スタートークを初期から開発
・会社で使ってる言語はNode.js,Android Java,Objective-C,PHP
・一応サーバー周りからフロントエンド・ネイティブまで扱える
・...
今回のテーマ
・スタートークというトークアプリ(Android・iPhone)にて実装した
通話機能において使われている技術WebRTCについて
1. WebRTCとは
2. デモ
3. スタートークでWebRTCを使った経緯
4. WebRTCの技術的仕組み
5. ネイティブアプリにおけるWebRTC
6. WebRTCで複数人ビデオチャット
アジェンダ
WebRTCって何?
WebRTCとは
・ブラウザ間で特定のプラグイン無しにボイスチャット、ビデオチャット、ファイル共有
等ができる。
・JavaScriptを200行くらい書いたらSkypeもどきが作れる
・W3Cにより標準化が進められ、開発はGoogle主導で今...
まぁ、見た方が早いので
デモ
http://192.168.0.3:8080/webrtc_example.html
使用するもの:Chrome、node.js+socket.io
       300行以内のHtml
コードはgithubに上げました
https:/...
WebRTCすげえ!
…って思ってもらいたい
WebRTCを選んだ
理由
WebRTCを選んだ理由
■比較検討した他の手段
・VoIP + SIP
 SkypeやLINEはこのプロトコルを使っているという実績あり
 音声通話、コーデックの詳細設定ができ、安定性が高そうだった
 
 見つかったライブラリ
 ○ Andr...
WebRTCを選んだ理由
■比較検討した他の手段
・VoIP + SIP
 問題点:
 ○アプリ未起動時でもバックグラウンドでサーバとのコネクションを保持する為負荷大
 ○NAT越えを自前で実装する必要あり
 ○ライブラリが一部GPL
 ○ビデ...
WebRTCを選んだ理由
・WebRTC
 ブラウザでボイスチャット、ビデオチャット、ファイル共有などが簡単にできる
 ○Android - https://github.com/noiges/webrtc-android-demo ←これその...
WebRTCを選んだ理由
2、元がJavaScriptなので、PCへの移行がしやすい
3、NAT越えが簡単
4、トライフォートは常に新しい技術を追い求めていく会社だと
思ったから
1、Android・iOSでも動く
・WebRTC
WebRTCの仕組み
ここからネットワークよりの
話です
元々はブラウザの技術で、できることは
● P2P通信の確立
● ICE(Interactive Connectivity Establishment)でNAT越え
● メディアストリームの取得 (音声・動画等のデータ )
● DataChann...
・RTCPeerConnection P2P通信
・RTCSessionDescription P2P通信
・RTCIceCandidate ICEでNAT越え
・getUserMedia メディアストリームの取得
WebRTCの仕組み
Jav...
WebRTCの仕組み
P2P通信
・HTTPやWebSocketなどのプロトコルと違い、サーバーを介さずにクライアント同士での接続を 行う。
・WebRTCの場合、HTTPなどに使われるTCPよりもオーバーヘッドの少ない UDPプロトコルを使 ...
ローカルネットワーク
・P2P通信に必要なデータはシグナリングでやりとりする。 (スタートークの場合は Socket.IOを使う)
・先に送る方がOffer、後に来た方がAnswerとしてSDPを送信する
WebRTCの仕組み
P2P通信
19...
Bさん家Aさん家
・NAT越えの技術を総称してICEと言う。
・ICEにはSTUN・TURNなどのプロトコルがある
・どんなNATでも越えられる技術はない
・Internetを介してP2P通信を行う際には通常お互いのIPとポートを知る必要があり...
Bさん家Aさん家
192.168.0.1:1337
・NAT越しに繋がる為には、一度 NAT外部にアクセスして自分の IP、ポートを取得し、その IPに接続する
・接続先は複数取得される (eth0・eth1とか有線・無線とか)
・接続先候補を...
・getUserMedia API
WebRTCの仕組み
メディアストリームの取得
● PCに付属しているカメラやマイクな
どのデバイス入力を取得して、
<video>タグや<audio>タグで流すこ
とができる
● 別にP2PしなくてもWeb...
WebRTCの仕組み
DataChannel API
● WebSocketと大体同じことができる
● 自分はあまり使ってないので省略
● 興味ある方は
  http://www.html5rocks.com/ja/tutorials/webr...
ネイティブアプリにおけ
るWebRTC
・公式webrtcサイトにAndroid・iOS用ソースが存在
http://www.webrtc.org/native-code/development
・↑ビルド手順が複雑
・Chromiumプロジェクトに依存してるのでソース落とすのに半日...
さきほど紹介したものを使ってみた
 ○Android - https://github.com/noiges/webrtc-android-demo ←これそのままだと問題があった
 ○iOS - https://github.com/gand...
 ○Android - https://github.com/noiges/webrtc-android-demo
メインの処理:AppRTCClient.java,AppRTCDemoActivity.java
2ファイル計1117行
 ○i...
 ○Android - https://github.com/noiges/webrtc-android-demo
・AppRTCGLView  ≒ <video>
・PeerConnectionFactory + PeerConnection...
・LGL22では動いたが、他の端末が動かなかった  (←これすごい最近気づいた )
・端末の音声サンプリングレートが対応していないというカタストロフィ (44100Hzを使ってた)
・結局https://github.com/pristinei...
・まだ全端末で動くわけではない
・OS3.0以上(API Level11のものが含まれてるので )
・4系でも音声周りのエラーでまだ 7割程度しか動作を確認できず
ネイティブアプリにおけるWebRTC
問題点:Android
・現状通話は安定してできている
・ビデオチャットを入れると、キャプチャの取得に 4,5秒時間がかかった
・http://qiita.com/ykst/items/412496713e1e887bcfca
 ↑ここら辺を見るとまだパフォーマンスは...
複数人のビデオチャッ
ト
・技術的には可能
・帯域限界やCPUの処理が足りなかったりで、PCでも10人くらいがいいとこ
・スマホだったら…3人くらいじゃね?
複数人のビデオチャット
スペックの限界
1. 中継サーバーを置くことでP2Pを一本化(MCUとか)
 → 負荷がでかいのでなるべくやりたくない
 → PCなら同時20人ほどにはなるらしい
複数人のビデオチャット
解決策
MCUサーバ
WebRTCでビデオチャット
MCUがそれぞれから...
2. クライアントの音質や画質を極力落としてデータを少なくする
 → 粗さの限界がある
3. n対nではなく1対nの音声配信なら5人くらいはいけるかも
 → PCなら動画を同時10人はいける
複数人のビデオチャット
解決策
以上
ありがとうございました
Upcoming SlideShare
Loading in …5
×

スマホ(Android・iPhone)でWebRTC

14,490 views

Published on

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

Published in: Technology
  • Be the first to comment

スマホ(Android・iPhone)でWebRTC

  1. 1. WebRTC 〜Real Time Communication〜
  2. 2. 自己紹介 山中夏樹 ・トライフォート所属 ・自社製アプリ・スタートークを初期から開発 ・会社で使ってる言語はNode.js,Android Java,Objective-C,PHP ・一応サーバー周りからフロントエンド・ネイティブまで扱える ・自社のネイティブ勉強会幹事やってます(これも発表時の資料)
  3. 3. 今回のテーマ ・スタートークというトークアプリ(Android・iPhone)にて実装した 通話機能において使われている技術WebRTCについて
  4. 4. 1. WebRTCとは 2. デモ 3. スタートークでWebRTCを使った経緯 4. WebRTCの技術的仕組み 5. ネイティブアプリにおけるWebRTC 6. WebRTCで複数人ビデオチャット アジェンダ
  5. 5. WebRTCって何?
  6. 6. WebRTCとは ・ブラウザ間で特定のプラグイン無しにボイスチャット、ビデオチャット、ファイル共有 等ができる。 ・JavaScriptを200行くらい書いたらSkypeもどきが作れる ・W3Cにより標準化が進められ、開発はGoogle主導で今も頻繁に更新されて いる ・各ブラウザ対応状況 http://caniuse.com/#feat=stream  Chrome・Firefox・Opera・Android Chrome・Lolipop以降のAndroidブラウザが対応  iOS・IE・Safariは未対応
  7. 7. まぁ、見た方が早いので
  8. 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. 9. WebRTCすげえ! …って思ってもらいたい
  10. 10. WebRTCを選んだ 理由
  11. 11. WebRTCを選んだ理由 ■比較検討した他の手段 ・VoIP + SIP  SkypeやLINEはこのプロトコルを使っているという実績あり  音声通話、コーデックの詳細設定ができ、安定性が高そうだった    見つかったライブラリ  ○ Android - https://code.google.com/p/sipdroid/  ○ iOS - https://code.google.com/p/siphon/  ○ サーバー - Asterisk
  12. 12. WebRTCを選んだ理由 ■比較検討した他の手段 ・VoIP + SIP  問題点:  ○アプリ未起動時でもバックグラウンドでサーバとのコネクションを保持する為負荷大  ○NAT越えを自前で実装する必要あり  ○ライブラリが一部GPL  ○ビデオチャットなどの実装はあまり sampleない
  13. 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. 14. WebRTCを選んだ理由 2、元がJavaScriptなので、PCへの移行がしやすい 3、NAT越えが簡単 4、トライフォートは常に新しい技術を追い求めていく会社だと 思ったから 1、Android・iOSでも動く ・WebRTC
  15. 15. WebRTCの仕組み
  16. 16. ここからネットワークよりの 話です
  17. 17. 元々はブラウザの技術で、できることは ● P2P通信の確立 ● ICE(Interactive Connectivity Establishment)でNAT越え ● メディアストリームの取得 (音声・動画等のデータ ) ● DataChannel APIを用いてファイルなどをやりとり   など。 WebRTCの仕組み 概要 ※P2P通信 サーバーを介さないクライアント同士の接続 ※NAT ルータやモデムなどの、 Internetとクライアントの間に挟まるネットワークの総称
  18. 18. ・RTCPeerConnection P2P通信 ・RTCSessionDescription P2P通信 ・RTCIceCandidate ICEでNAT越え ・getUserMedia メディアストリームの取得 WebRTCの仕組み JavaScript API
  19. 19. WebRTCの仕組み P2P通信 ・HTTPやWebSocketなどのプロトコルと違い、サーバーを介さずにクライアント同士での接続を 行う。 ・WebRTCの場合、HTTPなどに使われるTCPよりもオーバーヘッドの少ない UDPプロトコルを使 用して 通信を行える為、やりとりが高速 ・P2P通信を行う為の情報を SDP(Session Description Protocol)というフォーマットでやりとりす る。 SDP には自分のIP、ポート、メディアの種類、コーデックなどが含まれている。 ※new RTCPeerConnectionでPeer接続生成 ※new RTCSessionDescriptionでSDP生成
  20. 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. 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. 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. 23. ・getUserMedia API WebRTCの仕組み メディアストリームの取得 ● PCに付属しているカメラやマイクな どのデバイス入力を取得して、 <video>タグや<audio>タグで流すこ とができる ● 別にP2PしなくてもWebRTC ● コードも簡単→
  24. 24. WebRTCの仕組み DataChannel API ● WebSocketと大体同じことができる ● 自分はあまり使ってないので省略 ● 興味ある方は   http://www.html5rocks.com/ja/tutorials/webrtc/datachannels/   らへんを参照
  25. 25. ネイティブアプリにおけ るWebRTC
  26. 26. ・公式webrtcサイトにAndroid・iOS用ソースが存在 http://www.webrtc.org/native-code/development ・↑ビルド手順が複雑 ・Chromiumプロジェクトに依存してるのでソース落とすのに半日くらいかかる ・容量20GB、メモリ2GBは必須 ・ninja、gclient、gyp等の謎のビルドツールを使ってる …誰か解析して欲しい ・今も頻繁に更新されていて、最新のソースはビルドできないことも ・できれば使いたくない! ネイティブアプリにおけるWebRTC ライブラリ そこで!
  27. 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. 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. 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. 30. ・LGL22では動いたが、他の端末が動かなかった  (←これすごい最近気づいた ) ・端末の音声サンプリングレートが対応していないというカタストロフィ (44100Hzを使ってた) ・結局https://github.com/pristineio/webrtc-build-scriptsを参考に、公式サイトのソースをビルド ・ →…それでもサンプリングレートでエラー ・C++のソースのDefault Sampling Rateとか修正(16000Hz) ・ →動いた!(2014/12初め)    →スタートークリリースへ ネイティブアプリにおけるWebRTC 問題点:Android ※サンプリングレート  1秒に何回音声を取得するか。数値が大きいほど音がきれいに聞こえる
  31. 31. ・まだ全端末で動くわけではない ・OS3.0以上(API Level11のものが含まれてるので ) ・4系でも音声周りのエラーでまだ 7割程度しか動作を確認できず ネイティブアプリにおけるWebRTC 問題点:Android
  32. 32. ・現状通話は安定してできている ・ビデオチャットを入れると、キャプチャの取得に 4,5秒時間がかかった ・http://qiita.com/ykst/items/412496713e1e887bcfca  ↑ここら辺を見るとまだパフォーマンスは上げられそう ・公式のソース最新の安定板を入れるべき ネイティブアプリにおけるWebRTC 問題点:iPhone
  33. 33. 複数人のビデオチャッ ト
  34. 34. ・技術的には可能 ・帯域限界やCPUの処理が足りなかったりで、PCでも10人くらいがいいとこ ・スマホだったら…3人くらいじゃね? 複数人のビデオチャット スペックの限界
  35. 35. 1. 中継サーバーを置くことでP2Pを一本化(MCUとか)  → 負荷がでかいのでなるべくやりたくない  → PCなら同時20人ほどにはなるらしい 複数人のビデオチャット 解決策 MCUサーバ WebRTCでビデオチャット MCUがそれぞれからくる メディアデータを合成して配 信
  36. 36. 2. クライアントの音質や画質を極力落としてデータを少なくする  → 粗さの限界がある 3. n対nではなく1対nの音声配信なら5人くらいはいけるかも  → PCなら動画を同時10人はいける 複数人のビデオチャット 解決策
  37. 37. 以上 ありがとうございました

×