Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CPaaS「SkyWay」を作るために 必要なスキルの身につけ方
Search
shinyoshiaki
March 08, 2022
Technology
0
1.1k
CPaaS「SkyWay」を作るために 必要なスキルの身につけ方
CAMPHOR - WebRTCとSkyWayを学ぼう 〜リアルタイム通信のこれから〜
shinyoshiaki
March 08, 2022
Tweet
Share
More Decks by shinyoshiaki
See All by shinyoshiaki
TypeScriptとNode.jsでWebRTCを実装してみた
shinyoshiaki
1
3.3k
ANYハッカソン 時間差パズルVRゲーム
shinyoshiaki
0
2k
P2P分散型SNS “D-Twi”
shinyoshiaki
0
2k
サーバレス な マルチユーザVR システム
shinyoshiaki
0
1.9k
Other Decks in Technology
See All in Technology
Goで実践するBFP
hiroyaterui
1
130
商品レコメンドでのexplicit negative feedbackの活用
alpicola
2
470
今から、 今だからこそ始める Terraform で Azure 管理 / Managing Azure with Terraform: The Perfect Time to Start
nnstt1
0
250
タイミーのデータ活用を支えるdbt Cloud導入とこれから
ttccddtoki
2
360
Reactフレームワークプロダクトを モバイルアプリにして、もっと便利に。 ユーザに価値を届けよう。/React Framework with Capacitor
rdlabo
0
150
カップ麺の待ち時間(3分)でわかるPartyRockアップデート
ryutakondo
0
160
embedパッケージを深掘りする / Deep Dive into embed Package in Go
task4233
1
220
DMMブックスへのTipKit導入
ttyi2
1
130
デザインシステムを始めるために取り組んだこと - TechTrain x ゆめみ ここを意識してほしい!リファクタリング勉強会
kajitack
2
250
Oracle Exadata Database Service(Dedicated Infrastructure):サービス概要のご紹介
oracle4engineer
PRO
0
12k
なぜfreeeはハブ・アンド・スポーク型の データメッシュアーキテクチャにチャレンジするのか?
shinichiro_joya
2
750
20250122_FinJAWS
takuyay0ne
2
170
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
250
Statistics for Hackers
jakevdp
797
220k
Fireside Chat
paigeccino
34
3.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Building an army of robots
kneath
302
45k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
4 Signs Your Business is Dying
shpigford
182
22k
Adopting Sorbet at Scale
ufuk
74
9.2k
The Invisible Side of Design
smashingmag
299
50k
Done Done
chrislema
182
16k
Designing for humans not robots
tammielis
250
25k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Transcript
© NTT Communications Corporation All Rights Reserved. CPaaS「SkyWay」を作るために 必要なスキルの身につけ方 イノベーションセンター
SkyWayチーム 沈 嘉秋 (Shin Yoshiaki) NTT Comunications CAMPHOR - WebRTCとSkyWayを学ぼう 〜リアルタイム通信のこれから〜
高専 → 大学(3年次編入) 2020年入社(学部卒、2年目) Shin Yoshiaki • イノベーションセンター所属 • SkyWayのメジャーアップデート版の開発業務 •
業務で使っている言語 • TypeScript • (Python) • 趣味 • VRゲーム • サバゲー • プログラミング
© NTT Communications Corporation All Rights Reserved. 3 目次 -
CPaaSとは - 1分 - CPaaSを支える技術 - 2分半 - 自分の業務遍歴 - 6分 - CPaaSのコア技術「WebRTC」に詳しくなる方法 - 20分 - 最後に - 1分
CPaasとは
CPaaS(Communications Platform as a Service) ビデオ通話、音声通話をかんたんにアプリに実装できる、マルチプラット フォームなSDKを提供しているサービス
CPaaSを使えばメディア通信の難しいところ丸投げ アプリのUX向上などに注力できる!
CPaasを支える技術
© NTT Communications Corporation All Rights Reserved. 8 ざっくり分類 -
SDK - ブラウザ - javascript - ブラウザAPI - ネイティブ - Android - iOS - C++ - (機械学習系) - 運用・監視 - スケーリング - 障害検知 - ロギング - 統計 - サーバサイド - 一般的なWebサービスに必要なもの - WebRTC系コンポーネント - シグナリングサーバ - TURN - SFU - 録音録画 - その他 - Webフロントエンド - 管理画面 - ランディングページ - サンプルアプリ - ドキュメンテーション
© NTT Communications Corporation All Rights Reserved. 9 - SDK
- ブラウザ - javascript - ブラウザAPI - ネイティブ - Android - iOS - C++ - (機械学習系) - 運用・監視 - スケーリング - 障害検知 - ロギング - 統計 - サーバサイド - 一般的なWebサービスに必要なもの - メディア通信(WebRTC系) - シグナリングサーバ - TURN - SFU - 録音録画 - その他 - Webフロントエンド - 管理画面 - ランディングページ - サンプルアプリ - ドキュメンテーション
自分の業務遍歴
© NTT Communications Corporation All Rights Reserved. 11 入社時点のスキルセット -
典型的なフロントエンドエンジニア - 大学の研究でWebRTCを「P2Pで〇〇する」ような文脈で使っていた - ブラウザのWebRTC APIは分かる
© NTT Communications Corporation All Rights Reserved. 12 入社当初 -
SDK - ブラウザ - javascript - ブラウザAPI - ネイティブ - Android - iOS - C++ - (機械学習系) - 運用・監視 - スケーリング - 障害検知 - ロギング - 統計 - サーバサイド - 一般的なWebサービスに必要なもの - メディア通信(WebRTC系) - シグナリングサーバ - TURN - SFU - 録音録画 - その他 - Webフロントエンド - 管理画面 - ランディングページ - サンプルアプリ - ドキュメンテーション
© NTT Communications Corporation All Rights Reserved. 13 業務遍歴 オンボーディング
現行SkyWay 開発運用 次期SkyWay 開発 1ヶ月半 3ヶ月 今に至る 業務を始めるため に必要な最低限の 知識とスキル 実践的な 開発運用スキル 0から作る挑戦
© NTT Communications Corporation All Rights Reserved. 14 「オンボーディング 〜
現行SkyWay」 でやったこと - SDK - ブラウザ - javascript - ブラウザAPI - ネイティブ - Android - iOS - C++ - (機械学習系) - 運用・監視 - スケーリング - 障害検知 - ロギング - 統計 - サーバサイド - 一般的なWebサービスに必要なもの - メディア通信(WebRTC系) - シグナリングサーバ - TURN - SFU - 録音録画 - その他 - Webフロントエンド - 管理画面 - ランディングページ - サンプルアプリ - ドキュメンテーション
© NTT Communications Corporation All Rights Reserved. 15 主に現行版SkyWayの開発/運用を通して CPaaSを支える技術についてほとんど一通り触れることができた
あまり触れられていないもの - ネイティブ - Android - iOS - C++ - サーバサイド - メディア通信(WebRTC系) - TURN - SFU - 録音録画
© NTT Communications Corporation All Rights Reserved. 16 何故触れられていないか -
ネイティブ - モチベーションベースなところがある (キャリアパスやスキルセットなどの関係) - WebRTC系コンポーネント - 特殊な技術体系 - 必要な知識が膨大 - 通常業務だけでマスターするのは困難 もともとWebRTCに興味があって入社した 重点的に強化
CPaaSのコア技術 「WebRTC」に詳しくなる方法
© NTT Communications Corporation All Rights Reserved. 18 CPaaSとWebRTCの関係 WebRTCは全ての主要プラットフォームに対応している低遅延かつ双方向なメディア通信の手段
- Webブラウザ - Android - iOS - PC向けOS - サーバサイドでも動く 全てのCPaaSがWebRTCを使ってメディア通信を実現している言っても過言ではない (ブラウザをサポートしている === WebRTCを使っている)
© NTT Communications Corporation All Rights Reserved. 19 「WebRTC」に詳しくなる方法 -
プロトコルスタックの勉強方法と言い換えられる - quicとか他のプロトコルに興味がある場合も同じ感じで勉強できると思う
© NTT Communications Corporation All Rights Reserved. 20 詳しくなっていくステップ Level
1 APIを 使いこなす Level 2 仕組みを知る Level 3 WebRTC そのものを 実装できる
© 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を使ったほうが結果的に簡単だと気付けるかもしれません
© NTT Communications Corporation All Rights Reserved. 22 レベル2に行く前にもう少し詳しく知りたい -
ハイパフォーマンス ブラウザネットワーキングの18章 - 英語版は無料 - https://www.oreilly.com/library/view/high-performance-browser/9781449344757/ch18.html
© NTT Communications Corporation All Rights Reserved. 23 レベル2 仕組みを知る 今は最強の教科書が存在する
- 好奇心旺盛な人のためのWebRTC - https://webrtcforthecurious.com/ja/ 2021年に出た電子書籍 WebRTCがどういった技術なのかが網羅的に詳しく知れる 自分が勉強し始めた当時にはなかった... いきなりレベル3に行った
© 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を読めば良い
© NTT Communications Corporation All Rights Reserved. 25 ちなみに ユーザが触るAPIの標準仕様は別の仕様書がある
- WebRTC PC - https://w3c.github.io/webrtc-pc/ これはIETFじゃなくてW3C配下 - ブラウザAPIやネイティブ向けのライブラリなど殆どのクライアント実装がこれに準拠している - ブラウザでのWebRTCの挙動を正確に知りたければWebRTC PCを読む必要がある
© NTT Communications Corporation All Rights Reserved. 26 世の中のWebRTCの実装はRFCに基づいて実装されている → 実装間の互換性がある
WebRTCについて最も詳しく知りたいのならRFCを読めば良い RFCが分かればWebRTCを実装できるはず!
© NTT Communications Corporation All Rights Reserved. 27 実装のステップ RFCと
既存実装を読む コードを書く 相互接続 試験
© NTT Communications Corporation All Rights Reserved. 28 RFCを読む WebRTCはモノリシックなプロトコルではない
歴史ある無数の実績のあるプロトコルの集合体 たくさんのRFCに依存している https://webrtcforthecurious.com/ja/
© 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
© NTT Communications Corporation All Rights Reserved. 30 RFCの読み方 英語で書かれている上に長い。集中力が持たない
日本語に機械翻訳して読んでいる
© NTT Communications Corporation All Rights Reserved. 31 超オススメ ツール/サイト https://github.com/tex2e/rfc-translater
https://tex2e.github.io/rfc-translater/html/index.html
© NTT Communications Corporation All Rights Reserved. 32 RFCだけ読んでも、イメージが湧きづらいこともある 既存の実装を読むと理解が深まる
RFCを読みながら既存の実装と照らし合わせる
© NTT Communications Corporation All Rights Reserved. 33 主な実装 -
libwebrtc (C++) - 事実上の標準実装(各種ブラウザが使っている) - コード量が膨大なので全部読むのは辛い - 知りたいところを摘み読み - aiortc (Python) - 読みやすい - DTLS、SRTPなど一部スタックを自前で実装していない - Pion (Go) - 読みやすい - 全スタックを自前で実装している
© NTT Communications Corporation All Rights Reserved. 34 RFCと既存実装を読んだら次は実装
© NTT Communications Corporation All Rights Reserved. 35 実装 できるだけRFCからコードを書き起こす
慣れないと難しい(今も) RFCが何言ってるのかわからない部分は既存の実装を見に行く 既存の実装のユニットテストが参考になる → ある程度テスト駆動風に開発できる
© NTT Communications Corporation All Rights Reserved. 36 どういうプログラムを書くのか 基本的にやることは
・値をパケットに詰めたり、 パケットから値を取り出したり ・パケットを決まった手順でやり取りしたり RTPパケットの例
© NTT Communications Corporation All Rights Reserved. 37 個別のプロトコル毎に一つずつ既存の実装と接続できるか確かめていく
相互接続試験
© NTT Communications Corporation All Rights Reserved. 38 当然すんなりとはいかない 単純に実装ミスなこともある
既存実装によってRFCのどの範囲まで実装しているのか違ったりする - サポートしている暗号の種類 - 拡張仕様 実際に相互接続試験をして問題を洗い出して修正していく
© NTT Communications Corporation All Rights Reserved. 39 下のレイヤのプロダクトを完成させて、 最後にWebRTCのエージェントを書いたら
ブラウザと相互接続試験ができる! 自分の実装がブラウザと つながった時の 達成感はすごいです!!
© NTT Communications Corporation All Rights Reserved. 40 個別の下層のプロトコルの相互接続試験は手動でやった
WebRTCのPeerConnectionの相互接続試験ツール - webrtc-echoes - https://github.com/sipsorcery/webrtc-echoes Github ActionsでCIが回る
© 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
最後に
© NTT Communications Corporation All Rights Reserved. 43 WebRTCについて詳しくなると
プロトコルレベルでプロダクトの品質改善/競争力向上に取り組める! 知的好奇心を満たしつつ、やり甲斐もある!!
© NTT Communications Corporation All Rights Reserved. 44 CPaaSの技術領域はとても広い -
CPaaSの開発はどんなタイプのSWEも力を発揮できる場所がある 一方で WebRTCのような触れる機会の少ない技術をヘヴィーに使っている - CPaaSの開発でないと出来ない仕事 自分は楽しめてます!
© NTT Communications Corporation All Rights Reserved. 45