Webナイト宮崎での発表資料です

1. SkyWay で
ビデオチャットサービス
を構築してみた！
澤井 友恵
@tomoeine

2. 今日話すこと
● ビデオチャットサービス構築の背景
● WebRTC とは？
● SkyWay とは？
● SkyWay でビデオチャットサービスを構築
● デモはなし（宣言）

3. 自己紹介
フリーランスWebエンジニア
澤井友恵 @tomoeine
● 宮崎の山の中でリモートワーク
● 東京生まれ・宮崎移住
● SIer → Web系に転身した人
● Laravel, Vue.js, Ruby on Rails, AWS 等
● 2018年6月〜 フルリモートでフリーランス

4. ビデオチャットサービス
構築の背景

5. ビデオチャットサービス構築の背景
● ４月の緊急事態宣言を受けて
リモートワークが広がった
● これまで、一部の業務では対面が前提になって
いたが、リモートで代替する手段を提供したい
（というプロダクトオーナーからの要望）

6. ● 自社サービスのデータを画面共有するなど、
よりシームレスで使いやすいUXを提供したい
● 企業向けのサービスのため、
会社PCにZoomアプリのインストールができない
可能性がある
どうしてZoomじゃダメなの？

7. WebRTCとは

8. WebRTC の仕組み
P2P(Peer to Peer) で映像や音声を交換する仕組み
P2Pの確立
ICEサーバー

9. ICEサーバーとは？
略
よくわかってない・・・😇

10. SkyWay とは？

11. SkyWay の特長
・無料で始められる
・専用の JS SDK やネイティブアプリのSDKを提供
・ICEサーバーをSaaSで提供
WebRTC SDK + API プラットフォーム
・日本語のサポート・ドキュメントが充実！

12. SkyWayを使うと・・・
P2P(Peer to Peer) で映像や音声を交換する仕組み
P2Pの確立
ICEサーバー
SkyWay

13. ビデオチャットの実装方法比較
独立サービス系：Zoom、Whereby など
フルスクラッチ系：ICE サーバーも含めた、WebRTC の自前実装
クラウドサービス系：SkyWay（後述）、OpenTok など

14. 実装の留意点（WebRTCの仕様上）
● スマートフォンのブラウザでは使えない
（ネイティブアプリ向けのSDKが別途提供されている）
● IE非対応
● 画面共有機能は、Safari非対応

15. SkyWay でビデオチャット
サービスを構築

16. JavaScript 処理の大まかな流れ（簡略化しています）
SkyWay
①peer を作る ②peer を作る
① peer ID をユーザー
情報に紐付け
③ Aさんのpeer IDを
問い合わせる
④ Aさんのpeer IDに
call する
⑤ Bさんからの call を
受信したら、応答する
自前サービスのバックエンド
Peer 接続❤
Aさん
Bさん

17. アカウント＆アプリケーション登録
https://webrtc.ecl.ntt.com/

18. アカウント＆アプリケーション登録

19. キーを控えておく

20. HTMLの準備
←自分の映像
←相手の映像

21. 自分のカメラ映像の取得・再生
↓WebRTCで重要なやつ

22. JS SDK を読み込んで peer を作る

23. JS SDK を読み込んで peer を作る

24. 発信する（Bさん）

25. 着信に応答する（Aさん）

26. 実際にできたもの

27. まとめと感想

28. まとめ・感想
● チュートリアル動かすだけなら半日でできた
● リリースまでも2週間ぐらいでできた
● とはいえ、JSのコードは結構たくさん書いた
（SkyWayというより、WebRTCの仕様的に仕方ないと思っている）
● 自分でコード書いてビデオチャット機能作れる
のは結構楽しかった

29. ご清聴ありがとうございました！
澤井 友恵
@tomoeine
SkyWay で
ビデオチャットサービス
を構築してみた！