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.2k
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.4k
ANYハッカソン 時間差パズルVRゲーム
shinyoshiaki
0
2.1k
P2P分散型SNS “D-Twi”
shinyoshiaki
0
2.1k
サーバレス な マルチユーザVR システム
shinyoshiaki
0
2k
Other Decks in Technology
See All in Technology
BEYOND THE RAG🚀 ~とりあえずRAG?を超えていけ! 本当に使えるAIエージェント&生成AIプロダクトを目指して~ / BEYOND-THE-RAG-Toward Practical-GenerativeAI-Products-AOAI-DevDay-2025
jnymyk
4
230
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
550
スプリントゴール未達症候群に送る処方箋
kakehashi
PRO
1
190
MCP とマネージド PaaS で実現する大規模 AI アプリケーションの高速開発
nahokoxxx
1
1.4k
OTel 公式ドキュメント翻訳 PJ から始めるコミュニティ活動/Community activities starting with the OTel official document translation project
msksgm
0
240
経理出身PdMがAIプロダクト開発を_ハンズオンで学んだ話.pdf
shunsukenarita
1
110
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
6
1k
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
helosshi
1
210
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.5k
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
160
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
550
Data Engineering Study#30 LT資料
tetsuroito
1
560
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Into the Great Unknown - MozCon
thekraken
40
1.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
BBQ
matthewcrist
89
9.7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Become a Pro
speakerdeck
PRO
29
5.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Producing Creativity
orderedlist
PRO
346
40k
How GitHub (no longer) Works
holman
314
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Agile that works and the tools we love
rasmusluckow
329
21k
Thoughts on Productivity
jonyablonski
69
4.7k
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