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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

高専 → 大学（3年次編入）　2020年入社（学部卒、2年目） Shin Yoshiaki • イノベーションセンター所属 • SkyWayのメジャーアップデート版の開発業務 • 業務で使っている言語 • TypeScript • (Python) • 趣味 • VRゲーム • サバゲー • プログラミング

Slide 3

Slide 3 text

Slide 4

Slide 4 text

CPaasとは

Slide 5

Slide 5 text

CPaaS（Communications Platform as a Service）ビデオ通話、音声通話をかんたんにアプリに実装できる、マルチプラットフォームなSDKを提供しているサービス

Slide 6

Slide 6 text

CPaaSを使えばメディア通信の難しいところ丸投げアプリのUX向上などに注力できる！

Slide 7

Slide 7 text

CPaasを支える技術

Slide 8

Slide 8 text

© NTT Communications Corporation All Rights Reserved. 8 ざっくり分類 - SDK - ブラウザ - javascript - ブラウザAPI - ネイティブ - Android - iOS - C++ - （機械学習系） - 運用・監視 - スケーリング - 障害検知 - ロギング - 統計 - サーバサイド - 一般的なWebサービスに必要なもの - WebRTC系コンポーネント - シグナリングサーバ - TURN - SFU - 録音録画 - その他 - Webフロントエンド - 管理画面 - ランディングページ - サンプルアプリ - ドキュメンテーション

Slide 9

Slide 9 text

© NTT Communications Corporation All Rights Reserved. 9 - SDK - ブラウザ - javascript - ブラウザAPI - ネイティブ - Android - iOS - C++ - (機械学習系) - 運用・監視 - スケーリング - 障害検知 - ロギング - 統計 - サーバサイド - 一般的なWebサービスに必要なもの - メディア通信（WebRTC系） - シグナリングサーバ - TURN - SFU - 録音録画 - その他 - Webフロントエンド - 管理画面 - ランディングページ - サンプルアプリ - ドキュメンテーション

Slide 10

Slide 10 text

自分の業務遍歴

Slide 11

Slide 11 text

Slide 12

Slide 12 text

© NTT Communications Corporation All Rights Reserved. 12 入社当初 - SDK - ブラウザ - javascript - ブラウザAPI - ネイティブ - Android - iOS - C++ - (機械学習系) - 運用・監視 - スケーリング - 障害検知 - ロギング - 統計 - サーバサイド - 一般的なWebサービスに必要なもの - メディア通信（WebRTC系） - シグナリングサーバ - TURN - SFU - 録音録画 - その他 - Webフロントエンド - 管理画面 - ランディングページ - サンプルアプリ - ドキュメンテーション

Slide 13

Slide 13 text

Slide 14

Slide 14 text

© NTT Communications Corporation All Rights Reserved. 14 「オンボーディング〜現行SkyWay」でやったこと - SDK - ブラウザ - javascript - ブラウザAPI - ネイティブ - Android - iOS - C++ - (機械学習系) - 運用・監視 - スケーリング - 障害検知 - ロギング - 統計 - サーバサイド - 一般的なWebサービスに必要なもの - メディア通信（WebRTC系） - シグナリングサーバ - TURN - SFU - 録音録画 - その他 - Webフロントエンド - 管理画面 - ランディングページ - サンプルアプリ - ドキュメンテーション

Slide 15

Slide 15 text

© NTT Communications Corporation All Rights Reserved. 15 主に現行版SkyWayの開発/運用を通して  CPaaSを支える技術についてほとんど一通り触れることができた    あまり触れられていないもの    - ネイティブ - Android - iOS - C++     - サーバサイド - メディア通信（WebRTC系） - TURN - SFU - 録音録画 

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

CPaaSのコア技術「WebRTC」に詳しくなる方法

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

© 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を使ったほうが結果的に簡単だと気付けるかもしれません  

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

© 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を読めば良い   

Slide 25

Slide 25 text

© NTT Communications Corporation All Rights Reserved. 25 ちなみに  ユーザが触るAPIの標準仕様は別の仕様書がある    - WebRTC PC  - https://w3c.github.io/webrtc-pc/ これはIETFじゃなくてW3C配下 - ブラウザAPIやネイティブ向けのライブラリなど殆どのクライアント実装がこれに準拠している - ブラウザでのWebRTCの挙動を正確に知りたければWebRTC PCを読む必要がある

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

© 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

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

© NTT Communications Corporation All Rights Reserved. 33 主な実装 - libwebrtc (C++) - 事実上の標準実装（各種ブラウザが使っている） - コード量が膨大なので全部読むのは辛い - 知りたいところを摘み読み - aiortc (Python) - 読みやすい - DTLS、SRTPなど一部スタックを自前で実装していない - Pion (Go) - 読みやすい - 全スタックを自前で実装している

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

© NTT Communications Corporation All Rights Reserved. 40 個別の下層のプロトコルの相互接続試験は手動でやった      WebRTCのPeerConnectionの相互接続試験ツール    - webrtc-echoes - https://github.com/sipsorcery/webrtc-echoes Github ActionsでCIが回る

Slide 41

Slide 41 text

© 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