2017/04/24 青山エンジニア勉強交流会 19:30 ~ by @kmagai

1. ビデオチャットアプリの
アーキテクチャ
ひとつひとつ
組み上げてみていく
SHOWROOM株式会社
熊⾕ 昂樹

2. 誰
熊⾕昂樹 / kmagai
株式会社ディー・エヌ・エー ̶> SHOWROOM株式会社（出向中）
新卒３年⽬の（主に）アプリケーションエンジニア
GitHub: kmagai
Twitter: @kmagai_

3. Server
Firebase Cloud Messaging
HeartbeatActor
RoomSessionActor
Akka Actors
MySQLStorage
WebRTC ICE Server
ICE
SDP
SDP
Text / Image
ICE
overview
Text / Image

4. 前半はWebRTCの⼀般的な実装の話
後半はメッセージングの話

5. Firebase
Cloud Messaging
WebRTC ICE Server
ICE
SDP
SDP
ICE
まずはビデオチャット部分

6. WebRTC
WebRTC 101
そもそもの話
これになりたい

7.
😇
ローカルから⾒えるネットワー
ク情報
≠
インターネットから⾒える実際
のネットワーク情報
NATNAT WebRTC ❌❌

8. 😇
通信⼿段が分からない
WebRTC ❌

9. SDPをお互いに交換すれば
WebRTC接続できる
🗒 🗒
🗒 🗒
SDP SDP

10. SDP（Session Description
Protocol）?
• メディアの種類/形式
• 暗号化の鍵
• ICE Candidate
など
🗒 🗒
🗒 🗒
SDP SDP

11. ICE Candidate =
相⼿から⾒た⾃分への接続⼿段
（IPとポート番号とか）
🗒 🗒
🗒 🗒
SDP SDP

12. SDPの取得
ICE Candidateを取得すれば、
あとはWebRTCのライブラリが
⾃動的に⽣成してくれる
🗒 🗒
🗒 🗒
SDP SDP

13. ICE Candidateの取得
1. ローカルから
2. NATの外側から
3. リレーサーバー経由
🗒

14. あらゆる接続経路・方法とは…
1. ローカルから
2. NATの外側から
3. 専用サーバー経由で
🗒
ICE Candidateの取得
1. ローカルから
2. NATの外側から
3. リレーサーバー経由
OSに問い合わせて取得
もしファイアウォール・NATが
存在しない場合はこれでも通信
できるかも…IP address: A
port B/UDP

15. あらゆる接続経路・方法とは…
1. ローカルから
2. NATの外側から
3. 専用サーバー経由で
🗒
SDP
ICE Candidateの取得
1. ローカルから
2. NATの外側から
3. リレーサーバー経由
接続できる可能性のあるパブリッ
クなルーティングパスを、NAT
の外側にあるSTUNサーバーに
問い合わせて集める
NAT
STUN Server
🗒 IP address: A
port B/UDP

16. あらゆる接続経路・方法とは…
1. ローカルから
2. NATの外側から
3. 専用サーバー経由で
🗒
SDP
ICE Candidateの取得
1. ローカルから
2. NATの外側から
3. リレーサーバー経由
どうしても接続できない場合に
P2Pを諦めてTURN Server(リ
レーサーバー)を経由する
NAT
TURN Server
❌
それでも繋げないことがある場合は…

17. SDPが⼿に⼊ったので、送受信
を考える
🗒 🗒
🗒 🗒
SDP SDP

18. 通信相⼿のSDPをどうやって受
け取るのか？
相⼿が通信可能であればすぐに
接続したい
🗒 🗒
🗒 🗒
SDP SDP

19. Signaling Serverをつくる
サーバー側からクライアントに
Pushできればよい
e.g.
WebSocket
Firebase Cloud Messaging
🗒 🗒
Signaling Server
push

20. Firebase
Cloud Messaging
WebRTC ICE Server
SDP
SDP
ICE
こうなった
ICE

21. Server
Firebase Cloud Messaging
HeartbeatActor
RoomSessionActor
Akka Actors
MySQLStorage
次はメッセージング

22. これになりたい

23. できる！！！！！
テキストやバイナリを送れる
WebRTC
DataChannel

24. テキスト・画像はサーバーに保
存したい…
（同時にお絵かきしたりすると
かのユースケースには合いそう）
WebRTC
DataChannel
😇

25. こうかな？
Firebase Cloud Messaging
MySQLStorage
API Server

26. ⼤量のメッセージを捌く… 😇
→ 並⾏処理したいけど⼤変…
Firebase Cloud Messaging
MySQLStorage
API Server

27. Akka
• 並⾏処理
• スケーラビリティ
• 耐障害性
Server
Firebase Cloud Messaging
RoomSessionActor
Akka Actors
MySQLStorage

28. 並列処理の実現
⼀つ⼀つのActorの処理⾃体は
直列でミュータブルなデータを
Actor間で共有しない
↓
普通に書けばスレッドセーフ
Server
Firebase Cloud Messaging
Akka Actors
MySQLStorage
RoomSessionActor

29. Actor
責務をActorに切り分ける
e.g. RoomSessionActorはチャッ
トルーム単位でActorをつくる
Server
Firebase Cloud Messaging
RoomSessionActor
Akka Actors
MySQLStorage

30. まだ問題が…
Server
Firebase Cloud Messaging
Akka Actors
MySQLStorage
RoomSessionActor

31. 対障害性の問題
このままではクラッシュした時
にハンドリングできない
Server
Firebase Cloud Messaging
RoomSessionActor
Akka Actors
MySQLStorage
crash!

32. 責務の切り分け問題
RoomSessionActorの⽣成や管
理の責務はどこが持つのか？
Server
Firebase Cloud Messaging
RoomSessionActor
Akka Actors
MySQLStorage
どこから⽣成されるべき？

33. 親（HeartbeatActor）をつくる
RoomSessionActorのライフサ
イクル管理の責務を担う
e.g. エラーハンドリング、
RoomSessionActor⽣成、メッ
セージフォワーディング、死活
監視
Server
Firebase Cloud Messaging
HeartbeatActor
RoomSessionActor
Akka Actors
MySQLStorage

34. Server
Firebase Cloud Messaging
HeartbeatActor
RoomSessionActor
Akka Actors
MySQLStorage
WebRTC ICE Server
ICE
SDP
SDP
Text / Image
ICE
Text / Image

35. おわり
GitHub: kmagai
Twitter: @kmagai_