WebRTC Meetup Tokyo#9で登壇した内容です。

1. スマホアプリBestieBoxにWebRTCを組みこんでみた
WebRTC Meetup Tokyo #9
2015年8月3日
@nyalse、@jirourashima

2. 自己紹介
■名前
ー つだゆうき（@nyalse）
■所属
ー NTTコミュニケーションズ ボイス&ビデオコミュニケーションサービス部
■ワーク
ー グループコミュニケーションアプリ「BestieBox」の企画と開発とデザイン
（内製でやってます）
■Web
ー http://www.bestiebox.net

3. ？

4. 仲良しグループで行う様々な活動をサポートし、
もっと一緒に過ごして、もっと仲良くなってもらう
ためのアプリケーションです。
は
先週金曜から配信！

5. グループでコミュニケーション・ディスカッション！
いいネタも見つかったし、みんなで出かけよう
ラーメンおいしかった！また行こう。
使い方の流れ

6. チャット・通話・掲示板機能
イベント企画・日程調整機能
フォトアルバム機能
使い方の流れ

7. 通話機能は実装したいけど、普通にやると時間がかかる
SIPサーバを用意する
SIPサーバ経由での接続制御
音声ストリームの再生制御
大変

8. これだ、これですね！

9. 実際これを使って通話機能を組み込んだ結果、
すぐに通話機能（しかもビデオ付き）が
できてしまった

10. SkyWayのAPIキーを手に入れて早速導入！

11. 自己紹介
■氏名
ー 原 拓(はら たくま)
■仕事
ー NTTコミュニケーションズ
ー 電話の部署でアプリ開発をやってます
■日焼けの理由
ー 昨日炎天下の中ROCK IN JAPAN FES2015に参加してきました

12. 友達と「音声・ビデオ」通話を行う機能をWebRTCで実装
1.友達リスト一覧から電話をかけたい友達を選択
2.「音声通話」か「ビデオ通話」どちらかを選んで発信
3.着信側が応答ボタンを押すとWebRTC通話開始

13. どうやって実装したか

14. 必要なのは以下の6クラスのみ
Navigator
MediaStream
Peer
PeerOption
Media
Connection
Canvas
※ビデオ通話時のみ

15. ステップ１：Peer IDの取得
Peer peer = new Peer(context, options);
引数のoptionsで、
・Skyway APIキー
・ドメイン名
・ログレベル
・TURNサーバの利用有無
等を指定可能PeerID A
発信端末A
着信端末B
skyway
PeerID B

16. ステップ２：ローカルメディア取得
MediaStream msLocal = Navigator.getUserMedia(constraints);
音声入力、ビデオ入力を取得
映像が不要(音声通話のみ)時は、
引数のconstraintsに含まれる
videoFlagをfalseにする
発信端末A
着信端末B
msLocal
PeerID B
PeerID A
msLocal
skyway

17. ステップ３：発信
MediaConnection media = peer.call(‘PeerID B’,msLocal, option);
ステップ１で作成した
Peerオブジェクトのcallメソッドを発行
引数は、
・対象のPeerID
・発信側のローカルメディア
・オプション設定
発信端末A
着信端末B
msLocal
PeerID B
PeerID A
msLocal
skyway

18. ステップ４：応答
(MediaConnection)media.answer(msLocal);
着信側でPeerEventEnum.CALLイベントが発生
MediaConnectionクラスのanswerメソッドにより
これに応答する
※自身のローカルメディアを引数に紐付ける
発信端末A
着信端末B
msLocal
PeerID B
PeerID A
msLocal
skyway

19. ステップ５：通話開始
MediaStream _msRemote = (MediaStream)object
双方でMediaEventEnum.STREAMイベントが発生するので、受
信したobject(対抗のメディア）をオブジェクト内へ格納すれば
通話が開始される
受信データの処理等はSDK内で扱うため、開発側の作業は不要
発信端末A
着信端末B
msLocal
PeerID B
PeerID A
msLocal
skyway
msRemote msRemote
通話開始

20. 想像よりはるかに簡単に実装できた
ー 合計4,000行程度だが、通話部分のコードは遥かに少ない
ー Java、Android開発未経験からでも
大変だったポイント
ー エラーハンドリング処理
・登場人物(Skywayサーバ、BestieBoxサーバ群、クライアント端末等)が
多く、状態遷移のマトリクスが複雑
ー ハンドオーバー時の移行処理
・ハンドオーバー時は通話断
・今後の改修で対応予定