時雨堂VさんによるWebRTC初学者向け連続ツイート

V @voluntas

WebRTC を今から勉強する人向けの話を雑に書いていく。

V @voluntas

まず、WebRTC を学ぶ理由としては「趣味」「仕事」のどちらかだと思うが、趣味についてはここでは書かない。仕事で利用する場合について書いていく。

V @voluntas

仕事で使う場合は自前か製品(OSS を含む)を利用するかのどちらかになる。まず規模がどうなるかに依存するが、自前でできるのは WebRTC P2P までだろう。WebRTC SFU を開発するというのはコスト面からいって現実的ではない。Discord 目指してるなら別。

V @voluntas

Discord 目指してる人はそもそも WebRTC の専門家だろうから、ここでは割愛する。ということでまずは WebRTC P2P での利用について書いていくことにする。

V @voluntas

WebRTC P2P の場合は、最小限に必要な知識はシグナリングサーバと TURN サーバ、WebRTC API の知識。シグナリングは Firebase やら Socket.io やらなんでもいいので、そんなに難しくない。P2P であれば大規模接続もほぼないだろうから自作可能な範囲と考えて良い。

V @voluntas

シグナリングサーバを作る事自体は問題ない。次は TURN サーバ、これも coturn 使えば難しくも何にもない。枯れているサーバということもあり運用も難しくないと考えていい。

V @voluntas

問題は WebRTC を利用するクライアントがブラウザなのかモバイルなのか、デスクトップなのかということになる。ブラウザであればまぁ難しいことは考えなくて良い。モバイルはめちゃくちゃ怠いので自力は諦めた方がいい。デスクトップは Electron が使えるなら楽、それ以外は地獄。

V @voluntas

モバイル以外であれば、W3C と MDN の WebRTC API を読みさえすれば困ることはない。仕組み的にもたいしたことない。offer/answer/candidate の 3 つをやりとりするだけでいい。ブラウザの WebRTC API について詳しくなればいい。

V @voluntas

「WebRTC 難しい」とか言ってる人のほとんどが W3C/MDN の WebRTC ドキュメントを読んでいないだけなので、無視した方がいい。ブラウザの WebRTC は恐ろしくシンプルに作られているし、W3C には状態遷移についても細かくまとめられている。

V @voluntas

WebRTC API (P2P) 利用だけであれば、ある程度プログラミング経験があれば、フレームワークなどは用いず、１から作っても 1-2 ヶ月真面目に勉強するだけで十分仕事で使えるレベルの知識は得られる。一通りの知識が必要になるのでむしろ勉強としても良い。

V @voluntas

いろいろなフレームワークはめんどくさい事が隠蔽されているので勉強には全く向いていないのでやめたほうがいい。１から試行錯誤していくのをお勧めしたい。WebRTC は「はまったとき」がすごい大変なので、試行錯誤の経験があるほうが良い。

V @voluntas

TURN サーバがなぜ必要なのか、どんな仕組みで動いているのかは理解できそうならした方がいい。ただ TURN の情報はとても少ないのが難点。ここだけは自力で学ぶのが難しいので、大変かもしれない。セミナーがあれば、お金で解決するのも良い。

V @voluntas

WebRTC P2P についての難所は「TURN サーバの理解」だけで、後ははまりどころはない。1 から書いてみて、動かせたらどんなフレームワークを使っても困らないので安心して欲しい。

V @voluntas

次に WebRTC P2P ではない選択、つまり WebRTC SFU という選択肢になる。クライアント・サーバモデル。現在の主流の方針。こちらを勉強するのは一つのパターンだけで、特定の製品に絞って詳しくなるというもの。

V @voluntas

自力で WebRTC SFU を作るメリットはそもそもない、できた物はほぼ既存製品の劣化版になるからだ。メンテコストや機能追加が高い劣化版を作り上げるくらいなら、既存製品を利用していくのが良い。

V @voluntas

WebRTC SFU を触るのであれば今のところ 4 つオススメの方法がある。1 つは mediasoup で、これは C++/JavaScript で書かれている。ロジック部分を JS で書けるというところが良いところ。実績も多くある、ただし SFU 特化型なので便利な機能はない。

V @voluntas

2 つ目は Janus Gateway で、機能が盛りだくさんでやりたいことのほとんどができる。何か複雑な仕組みを作りたければ Janus を検討してみると良い。ロジック部分が Lua でかけるのもポイントが高い。こちらも実績が多くあるので安心して使える。

V @voluntas

3 つ目は Jitsi で、元々会議サービス用に作られたこともあり会議系の実装を作り込める。ただし Java と JNI なので、覚悟は必要。会議用の便利機能もたくさん積んである。会議サービスを実現したいのなら Jtisi がお勧め。

V @voluntas

4 つ目は Pion で、Go で書かれた WebRTC スタック。WebRTC SFU をしっかりスケールするところまで作り込んでる。まだ積極的に開発中ではあるが世界中の多くの開発者がコントリビューションしているので、勉強するのにも向いている。

V @voluntas

mediasoup / Janus Gateway / Jitsi / Pion のどれかをじっくり触れば WebRTC SFU の仕組み自体はある程度理解できると思う。どれを触るかはどのような仕組みを実現したいかによるので、いろいろ検討するのがお勧め。どれも実績がある SFU なので、勉強にはもってこい。

V @voluntas

P2P / SFU の次はトラブル解析系の勉強をどうするかという話をしていく。WebRTC 問題は「繋がらない」「聞こえない」「映らない」のどれかがほとんど。まずは繋がらない問題について書いていく。

V @voluntas

繋がらない問題は、まず TURN を利用していない事が多い。TURN を UDP/TCP/TLS で用意して、TCP/TLS のポートを 443 に設定すれば、基本的には繋がる。ただこれで繋がらない場合は「あきらめ」が必要になる。ほとんどの場合 TURN-TCP/TURN-TLS を利用しておらず繋がらないというパターン。

V @voluntas

そのため、coturn の設定で TURN-TCP / TURN-TLS までしっかりやることをお勧めしたい。ちなみに Safari の TURN-TLS は Let's Encrypt の証明書をはじくので、要注意。

V @voluntas

次に「聞こえない」これはデバイス周りの設定問題が多い。ただモバイルだとほとんど問題はないのだが、ブラウザだとかなり問題が出たりする。USB で繋がっている問題があったりとか、JavaScript 側で頑張る以外の選択はない。Google meet なんかはいろいろ頑張ってるので、参考にしてみると良い。