CPaaS「SkyWay」を作るために 必要なスキルの身につけ方

CAMPHOR - WebRTCとSkyWayを学ぼう 〜リアルタイム通信のこれから〜

Transcript

1. © NTT Communications Corporation All Rights Reserved. CPaaS「SkyWay」を作るために
 必要なスキルの身につけ方
 イノベーションセンター
 SkyWayチーム
 沈　嘉秋 (Shin Yoshiaki)
 NTT Comunications
 CAMPHOR - WebRTCとSkyWayを学ぼう 〜リアルタイム通信のこれから〜

2. 高専 → 大学（3年次編入）　2020年入社（学部卒、2年目） Shin Yoshiaki • イノベーションセンター所属 • SkyWayのメジャーアップデート版の開発業務 • 業務で使っている言語 • TypeScript • (Python) • 趣味 • VRゲーム • サバゲー • プログラミング
3. © NTT Communications Corporation All Rights Reserved. 3 目次 - CPaaSとは
 - 1分
 - CPaaSを支える技術
 - 2分半
 - 自分の業務遍歴
 - 6分
 - CPaaSのコア技術「WebRTC」に詳しくなる方法
 - 20分
 - 最後に
 - 1分

4. CPaasとは
5. CPaaS（Communications Platform as a Service） ビデオ通話、音声通話をかんたんにアプリに実装できる、マルチプラット フォームなSDKを提供しているサービス
6. CPaaSを使えばメディア通信の難しいところ丸投げ アプリのUX向上などに注力できる！
7. CPaasを支える技術
8. © NTT Communications Corporation All Rights Reserved. 8 ざっくり分類 - SDK - ブラウザ - javascript - ブラウザAPI - ネイティブ - Android - iOS - C++ - （機械学習系） - 運用・監視 - スケーリング - 障害検知 - ロギング - 統計 - サーバサイド - 一般的なWebサービスに必要なもの - WebRTC系コンポーネント - シグナリングサーバ - TURN - SFU - 録音録画 - その他 - Webフロントエンド - 管理画面 - ランディングページ - サンプルアプリ - ドキュメンテーション
9. © NTT Communications Corporation All Rights Reserved. 9 - SDK - ブラウザ - javascript - ブラウザAPI - ネイティブ - Android - iOS - C++ - (機械学習系) - 運用・監視 - スケーリング - 障害検知 - ロギング - 統計 - サーバサイド - 一般的なWebサービスに必要なもの - メディア通信（WebRTC系） - シグナリングサーバ - TURN - SFU - 録音録画 - その他 - Webフロントエンド - 管理画面 - ランディングページ - サンプルアプリ - ドキュメンテーション
10. 自分の業務遍歴
11. © NTT Communications Corporation All Rights Reserved. 11 入社時点のスキルセット - 典型的なフロントエンドエンジニア
 
 - 大学の研究でWebRTCを「P2Pで〇〇する」ような文脈で使っていた
 - ブラウザのWebRTC APIは分かる
 

12. © NTT Communications Corporation All Rights Reserved. 12 入社当初 - SDK - ブラウザ - javascript - ブラウザAPI - ネイティブ - Android - iOS - C++ - (機械学習系) - 運用・監視 - スケーリング - 障害検知 - ロギング - 統計 - サーバサイド - 一般的なWebサービスに必要なもの - メディア通信（WebRTC系） - シグナリングサーバ - TURN - SFU - 録音録画 - その他 - Webフロントエンド - 管理画面 - ランディングページ - サンプルアプリ - ドキュメンテーション
13. © NTT Communications Corporation All Rights Reserved. 13 業務遍歴 オンボーディング 現行SkyWay 開発運用 次期SkyWay 開発 1ヶ月半 3ヶ月 今に至る 業務を始めるため に必要な最低限の 知識とスキル 実践的な 開発運用スキル 0から作る挑戦
14. © NTT Communications Corporation All Rights Reserved. 14 「オンボーディング 〜 現行SkyWay」 でやったこと - SDK - ブラウザ - javascript - ブラウザAPI - ネイティブ - Android - iOS - C++ - (機械学習系) - 運用・監視 - スケーリング - 障害検知 - ロギング - 統計 - サーバサイド - 一般的なWebサービスに必要なもの - メディア通信（WebRTC系） - シグナリングサーバ - TURN - SFU - 録音録画 - その他 - Webフロントエンド - 管理画面 - ランディングページ - サンプルアプリ - ドキュメンテーション
15. © NTT Communications Corporation All Rights Reserved. 15 主に現行版SkyWayの開発/運用を通して
 CPaaSを支える技術についてほとんど一通り触れることができた
 
 あまり触れられていないもの
 
 - ネイティブ - Android - iOS - C++ 
 
 - サーバサイド - メディア通信（WebRTC系） - TURN - SFU - 録音録画

16. © NTT Communications Corporation All Rights Reserved. 16 何故触れられていないか - ネイティブ
 - モチベーションベースなところがある (キャリアパスやスキルセットなどの関係)
 
 - WebRTC系コンポーネント - 特殊な技術体系 - 必要な知識が膨大 - 通常業務だけでマスターするのは困難 もともとWebRTCに興味があって入社した 重点的に強化

17. CPaaSのコア技術 「WebRTC」に詳しくなる方法
18. © NTT Communications Corporation All Rights Reserved. 18 CPaaSとWebRTCの関係 WebRTCは全ての主要プラットフォームに対応している低遅延かつ双方向なメディア通信の手段
 
 - Webブラウザ
 - Android
 - iOS
 - PC向けOS
 - サーバサイドでも動く
 
 全てのCPaaSがWebRTCを使ってメディア通信を実現している言っても過言ではない
 （ブラウザをサポートしている === WebRTCを使っている）

19. © NTT Communications Corporation All Rights Reserved. 19 「WebRTC」に詳しくなる方法 - プロトコルスタックの勉強方法と言い換えられる
 - quicとか他のプロトコルに興味がある場合も同じ感じで勉強できると思う

20. © NTT Communications Corporation All Rights Reserved. 20 詳しくなっていくステップ Level 1 APIを 使いこなす Level 2 仕組みを知る Level 3 WebRTC そのものを 実装できる
21. © NTT Communications Corporation All Rights Reserved. 21 レベル1　APIを使いこなす SkyWayなどのCPaaSに頼らずに生のAPIを叩いて
 シンプルなビデオ通話アプリなんかを作ると良い
 
 このレベルだと日本語の記事もたくさんある
 
 - WebRTCハンズオン 概要編 https://qiita.com/massie_g/items/916694413353a3293f73 - WebRTCハンズオン 本編 https://qiita.com/yusuke84/items/43a20e3b6c78ae9a8f6c 意外と簡単に作れますが、このレベルで作ったビデオ通話アプリだと 技術的にスケールしない問題などがあるので CPaaSを使ったほうが結果的に簡単だと気付けるかもしれません 

22. © NTT Communications Corporation All Rights Reserved. 22 レベル2に行く前にもう少し詳しく知りたい - ハイパフォーマンス ブラウザネットワーキングの18章 - 英語版は無料 - https://www.oreilly.com/library/view/high-performance-browser/9781449344757/ch18.html 

23. © NTT Communications Corporation All Rights Reserved. 23 レベル2　仕組みを知る 今は最強の教科書が存在する
 - 好奇心旺盛な人のためのWebRTC - https://webrtcforthecurious.com/ja/
 2021年に出た電子書籍
 WebRTCがどういった技術なのかが網羅的に詳しく知れる
 
 自分が勉強し始めた当時にはなかった...
 いきなりレベル3に行った

24. © NTT Communications Corporation All Rights Reserved. 24 レベル3　実装できる WebRTCのプロトコルの仕様はRFCに定義されている
 
 - RFCとは
 - IETFという団体が出しているインターネット関連のプロトコルの仕様書
 - 各仕様書に番号が振られている ex. RFC XXXX
 - 9000以上ある
 - 仕様策定中のものはIETF Draftと呼ばれたりする。番号はまだ振られない
 - WebRTC関連のRFCは2021年にDraftからRFC入りして番号が振られた
 
 世の中のWebRTCの実装はRFCに基づいて実装されている
 →　実装間の互換性がある
 
 WebRTCについて最も詳しく知りたいのならRFCを読めば良い
 

25. © NTT Communications Corporation All Rights Reserved. 25 ちなみに
 ユーザが触るAPIの標準仕様は別の仕様書がある
 
 - WebRTC PC
 - https://w3c.github.io/webrtc-pc/ これはIETFじゃなくてW3C配下 - ブラウザAPIやネイティブ向けのライブラリなど殆どのクライアント実装がこれに準拠している - ブラウザでのWebRTCの挙動を正確に知りたければWebRTC PCを読む必要がある
26. © NTT Communications Corporation All Rights Reserved. 26 世の中のWebRTCの実装はRFCに基づいて実装されている
 →　実装間の互換性がある
 
 WebRTCについて最も詳しく知りたいのならRFCを読めば良い
 
 RFCが分かればWebRTCを実装できるはず！
 
 
 

27. © NTT Communications Corporation All Rights Reserved. 27 実装のステップ RFCと 既存実装を読む コードを書く 相互接続 試験
28. © NTT Communications Corporation All Rights Reserved. 28 RFCを読む WebRTCはモノリシックなプロトコルではない 歴史ある無数の実績のあるプロトコルの集合体 たくさんのRFCに依存している https://webrtcforthecurious.com/ja/
29. © NTT Communications Corporation All Rights Reserved. 29 読む順番 自分は低いレイヤから攻めていった ICE/STUN/TURN→DTLS→SCTP →DataChannel→SRTP→RTCPeerConnection こうすると、実装する際に常に動くものを作れる ----
 上のレイヤから攻めるメリットがあるとすれば
 WebRTCの全体像をつかみやすいかも知れない
 https://www.oreilly.com/library/view/ high-performance-browser/9781449 344757/ch18.html
30. © NTT Communications Corporation All Rights Reserved. 30 RFCの読み方 英語で書かれている上に長い。集中力が持たない 日本語に機械翻訳して読んでいる
31. © NTT Communications Corporation All Rights Reserved. 31 超オススメ　ツール/サイト https://github.com/tex2e/rfc-translater https://tex2e.github.io/rfc-translater/html/index.html
32. © NTT Communications Corporation All Rights Reserved. 32 RFCだけ読んでも、イメージが湧きづらいこともある 既存の実装を読むと理解が深まる RFCを読みながら既存の実装と照らし合わせる
33. © NTT Communications Corporation All Rights Reserved. 33 主な実装 - libwebrtc (C++) - 事実上の標準実装（各種ブラウザが使っている） - コード量が膨大なので全部読むのは辛い - 知りたいところを摘み読み - aiortc (Python) - 読みやすい - DTLS、SRTPなど一部スタックを自前で実装していない - Pion (Go) - 読みやすい - 全スタックを自前で実装している
34. © NTT Communications Corporation All Rights Reserved. 34 RFCと既存実装を読んだら次は実装

35. © NTT Communications Corporation All Rights Reserved. 35 実装 できるだけRFCからコードを書き起こす
 慣れないと難しい（今も）
 RFCが何言ってるのかわからない部分は既存の実装を見に行く
 
 既存の実装のユニットテストが参考になる
 →　ある程度テスト駆動風に開発できる

36. © NTT Communications Corporation All Rights Reserved. 36 どういうプログラムを書くのか 基本的にやることは
 
 ・値をパケットに詰めたり、
 　パケットから値を取り出したり
 
 ・パケットを決まった手順でやり取りしたり
 RTPパケットの例
37. © NTT Communications Corporation All Rights Reserved. 37 個別のプロトコル毎に一つずつ既存の実装と接続できるか確かめていく
 
 
 
 
 
 相互接続試験
38. © NTT Communications Corporation All Rights Reserved. 38 当然すんなりとはいかない
 単純に実装ミスなこともある
 
 既存実装によってRFCのどの範囲まで実装しているのか違ったりする
 - サポートしている暗号の種類
 - 拡張仕様
 
 実際に相互接続試験をして問題を洗い出して修正していく

39. © NTT Communications Corporation All Rights Reserved. 39 下のレイヤのプロダクトを完成させて、
 最後にWebRTCのエージェントを書いたら
 
 ブラウザと相互接続試験ができる！
 
 自分の実装がブラウザと
 つながった時の
 達成感はすごいです！！

40. © NTT Communications Corporation All Rights Reserved. 40 個別の下層のプロトコルの相互接続試験は手動でやった
 
 
 WebRTCのPeerConnectionの相互接続試験ツール
 
 - webrtc-echoes - https://github.com/sipsorcery/webrtc-echoes Github ActionsでCIが回る
41. © NTT Communications Corporation All Rights Reserved. 41 成果 ここまでやってWebRTCがなんとなくわかるようになった
 - 仕組みが分かる
 - 何ができて何ができないかがわかる
 - WebRTC関連のカンファレンスの発表内容を理解できる
 - ex. kranky geek (https://www.youtube.com/c/KrankyGeek) 仕事だと - WebRTC的観点からプロダクトの設計に助言できる - Chrome(libwebrtc)などに新しい機能が実装された時に有効に活用できる
 - 「REDのカスタムエンコーダを作って WebRTC の音声品質の低下を防ぐ」 - https://zenn.dev/shinyoshiaki/articles/opus-red-chrome
42. 最後に
43. © NTT Communications Corporation All Rights Reserved. 43 WebRTCについて詳しくなると
 
 プロトコルレベルでプロダクトの品質改善/競争力向上に取り組める！
 
 知的好奇心を満たしつつ、やり甲斐もある！！

44. © NTT Communications Corporation All Rights Reserved. 44 CPaaSの技術領域はとても広い
 - CPaaSの開発はどんなタイプのSWEも力を発揮できる場所がある
 
 一方で
 WebRTCのような触れる機会の少ない技術をヘヴィーに使っている
 - CPaaSの開発でないと出来ない仕事
 
 自分は楽しめてます！

45. © NTT Communications Corporation All Rights Reserved. 45