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.

Web RTC Conference資料

500 views

Published on

WebRTC Conference Japan 2016の資料です。
「スマホチャットアプリにおけるWebRTC通話アプリ開発事例」
http://webrtcconference.jp/

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Web RTC Conference資料

  1. 1. WebRTC Conference Japan ~スマホチャットアプリにおける WebRTC通話アプリ開発事例~ WebRTC Conference Japan ~スマホチャットアプリにおける WebRTC通話アプリ開発事例~
  2. 2. 自己紹介 -Introduction- 2 / 29 ● 名前 : 山中夏樹 natsuki-yamanaka@trifort.jp ● 所属 : TriFort Inc. ● 肩書 : ネイティブアプリ(iOS・Android)エンジニア ● 業務内容: 自社開発にて主にチャットアプリやリアルタイムギルドバトルなどを担当 Node.jsによるサーバーサイドやiOS・Androidアプリの開発を手掛けてきた
  3. 3. ● 知見 / ノウハウの共有 ○ 自社で扱った通話アプリ開発の事例紹介 ○ 開発する上で苦労した点など ○ 発表者はエンジニアなので、若干技術よりのお話 今日の目的 -Purpose- 3 / 29
  4. 4. WebRTC事例紹介 Introducing Cases of WebRTC 4 / 29
  5. 5. ● 若者向けチャットツールで、 2014年よりWebRTCを用いた 下記機能を実装 自社WebRTC事例 -Cases- 通話 ビデオ通話 生放送 通話機能Sample 5 / 29
  6. 6. ● 若者向けチャットツールで、 2014年よりWebRTCを用いた 下記機能を実装 自社WebRTC事例 -Cases- 通話 ビデオ通話 生放送 通話機能Sample 6 / 29
  7. 7. 音声RealTime配信+Chat 生放送機能 -Live function- 作成ページ 配信ページ 7 / 29 チャットも送 れる!
  8. 8. 8 なぜWebRTCか Why WebRTC? / 29
  9. 9. ● 他技術との比較 WebRTCの選定理由 -Reason for selection- 9 / 29 ※それぞれサンプルアプリをビルドし比較
  10. 10. ● 通話接続チェック WebRTCの選定理由 -Reason for selection- 10 / 29 iOS Wifi オフィスの4階 Android 3G回線 オフィスの5階 などして、実際の接続性を試す 音がクリアに聞こえるのはどちらかもチェック
  11. 11. WebRTCの選定理由 -Reason for selection- 11 / 29 ● 音質や接続性にそこまでの差異がなかった ● PC対応の容易さや既存システムで使っていたNode.jsとの 親和性などからWebRTCを選択
  12. 12. 通話の実装 Implementation of phone call with WebRTC 12 / 29
  13. 13. 通話の待ち受けについて -Incoming phone call- ● 例:WebRTC以外の通話サンプルの場合 ○ 着信を受け取る為、常時裏でサーバーに接続 ○ アプリの数だけ常にサーバーと接続する 13 / 29 膨大なインフラコスト
  14. 14. ● 弊社アプリでの実装 ○ 常時接続しない ○ 着信通知をPush通知により実装 インフラコストの削減 通話の待ち受けについて -Incoming phone call- 14 / 29
  15. 15. ● 通話をしながらチャットや他の アプリを使用できるマルチタスク機能 も実装した バックグラウンドで通話 -InApp phone call- ゲームやチャットを やりながら通話可能 15 / 29
  16. 16. 苦労した点 Implementation difficulties 16 / 29
  17. 17. ● 2016年2月現在でスマホブラウザはまだWebRTCを一部サ ポートしていない 前提:WebRTCのスマホ対応状況 17 / 29
  18. 18. ● もともとブラウザの技術であるWebRTCを Android・iOSのネイティブアプリに組み込めるGoogle開発の ライブラリ ● ソースのダウンロード・ビルドだけで4~5時間かかる ● 特にAndroidはそのまま組み込んでも動かない端末がある WebRTCのネイティブライブラリ -Library- 18 / 29
  19. 19. ● 開発中、接続しているように見えても音声が流れないというよ うなことがよくある ● 人の聴覚によるデバッグが不可欠 通話のデバッグ -Debug- ひたすら一人通話を繰り返してデバッグ タブレットで通話してる 図 19 / 29
  20. 20. ・WebRTCは基本ユーザー同士がP2P(サーバーを介さず直接) で繋がる 接続性について -Connectivity- 20 / 29 壁1:NAT等のファイアウォール 壁2:スマホによくあるネットの瞬断 ・P2Pで接続するまでの様々な 壁
  21. 21. ● スマホは基地局が変更されたりに備えて、再接続処理が必 須 ● PeerJS等だとやってくれない ● 自社で一から実装 ● Push受信〜P2Pで接続、の間の どこで切れても再接続するように 接続性の向上 -Improvement of connectivity- 21 / 29
  22. 22. 多人数配信について Live Stream Broadcasting Using WebRTC 22 / 29
  23. 23. 通話:1対1 P2Pでの配信形式の種類 -Delivery format- 生放送:1対N グループ通話:N対N 23 / 29
  24. 24. ・1対Nの生放送 何人まで接続できるのか? -How many can connect- ※これを超えると音質が悪くなったり、繋がらなかったりしだす  いずれもP2P、音声のみの場合を想定。TURNやSFU等使うと話は別 ・N対Nのグループ通話 7人程度で限界 5人程度で限界 ※PCを親としての生放送であれば 30人以上に配信した実績もある 24 / 29
  25. 25. iOSのIPv6対応について Supporting IPv6 DNS64/NAT64 Networks 25 / 29
  26. 26. ● 対応しないとApple審査に通らなくなるとのこと ● 2016年初頭からと言われているがまだ実際に審査に落とされ た話は聞かない iOSアプリにおけるIPv6対応について 出典: WWDC15 - Your App and Next Generation Network 26 / 29
  27. 27. ● 2015/12時点で未対応の様子 https://codereview.webrtc.org/1547883002 ○ 自身もAppRTCDemoを動かしたりして動作しない箇所を調査中 ○ STUNサーバーにRequestが届かない WebRTCはどうなのか? -Not compatible yet- 27 / 29
  28. 28. 今後の展望 Future Work 28 / 29
  29. 29. 通話機能SDK化 -Contractor for Developing WebRTC- ● ゲームやチャットなどと親和性の高いSDKとしてパッケージ化 を検討中 ● まだ事例はないですが、使ってみたい!という企業様を募集 中です! 29 / 29
  30. 30. 以上 ご清聴ありがとうございました 30 / 29

×