Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie スマホ(Android・iPhone)でWebRTC
Ähnlich wie スマホ(Android・iPhone)でWebRTC (20)
Mehr von Natsuki Yamanaka
Kürzlich hochgeladen
Kürzlich hochgeladen (7)
スマホ(Android・iPhone)でWebRTC
- 4. 1. WebRTCとは 2. デモ 3. スタートークでWebRTCを使った経緯 4. WebRTCの技術的仕組み 5. ネイティブアプリにおけるWebRTC 6. WebRTCで複数人ビデオチャット アジェンダ
- 5. WebRTCって何？
- 7. まぁ、見た方が早いので
- 10. WebRTCを選んだ 理由
- 11. WebRTCを選んだ理由 ■比較検討した他の手段 ・VoIP + SIP SkypeやLINEはこのプロトコルを使っているという実績あり 音声通話、コーデックの詳細設定ができ、安定性が高そうだった 見つかったライブラリ ○ Android - https://code.google.com/p/sipdroid/ ○ iOS - https://code.google.com/p/siphon/ ○ サーバー - Asterisk
- 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/
- 15. WebRTCの仕組み
- 17. 元々はブラウザの技術で、できることは ● P2P通信の確立 ● ICE(Interactive Connectivity Establishment)でNAT越え ● メディアストリームの取得 (音声・動画等のデータ ) ● DataChannel APIを用いてファイルなどをやりとり など。 WebRTCの仕組み 概要 ※P2P通信 サーバーを介さないクライアント同士の接続 ※NAT ルータやモデムなどの、 Internetとクライアントの間に挟まるネットワークの総称
- 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がなければ)
- 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/ らへんを参照
- 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
- 33. 複数人のビデオチャッ ト
- 37. 以上 ありがとうございました