1日でWebRTCを使った素朴なビデオチャットを作ってみた時にひっかき集めたリンク集

WebRTCっていう技術を使うと、ビデオチャットや音声通話をWebの技術で作ることができます。
そんなWebRTC、「ちょっと試してみてよ」ってことになったので色々調べてみました。

「これもリンクに加えてよ！」って記事があればコメントください。
特にSaaSのサービスのリンクとか強化したいですね。

参考図書

• WebRTC初心者でも簡単にできる！Node.jsで仲介（シグナリング）を作ってみよう | HTML5Experts.jp

この記事をそのまま作るとステップバイステップでネットワーク越しのWebRTCが作れますね！
SEO弱いんだよこの記事！　なんでもっと上に上がってこないの！

しかし、この記事のWebRTC実装ではNAT越え（ルーターから先との通信）ができません。
NAT越えをするためにはSTUNサーバーやTURNサーバーを用意、維持する必要があります。

そのためにどんなサーバー（とコード）が必要かについても連載にコード付きで乗っています。

• 連載 | WebRTCを使ってみよう！ | HTML5Experts.jp

自前でシグナリングサーバーやSTUNサーバー、TURNサーバーを作りたいわけではない

• 自分でVPSとかにホストする

  • OpenAyame プロジェクト
  • OpenAyame/ayame: WebRTC Signaling Server Ayame
    • 株式会社時雨堂がOSSでWebRTCのシグナリングサーバーのソースを公開しています
    • AyameはP2Pにしか対応していません
    • Ayameは1ルーム最大2名までしか対応していません

• SaaSでいい

  • WebRTC SFU Sora
    • 株式会社時雨堂のサービス。同時接続数によるが結構かかる
  • SkyWay | アプリやWebサービスに、ビデオ・音声通話をかんたんに導入・実装できるSDK
    • 接続回数50万回/月まで、サーバ通信量500GB/月までタダで使えるSaaS。越えると１０万円〜

御託はいい！ 早くビデオチャットが作れればいいんだ！

• Ayame Lite
  • WebRTCの公開TURNサーバー。Ayame を無料で利用できる無保証のサービス。
  • 1 ルームは最大 2 名に制限
  • Ayame Lite は転送量制限はアカウントごとなどはありませんが、 サーバの転送量が決まっているためそれを超えると全員が利用できなくなります
• OpenAyame/ayame-web-sdk: Ayame Web SDK
  • 上述のAyameやAyame Liteに接続するWebのサンプル
• OpenAyame/ayame-react-sample: Ayame React サンプル
  • ReactNativeのサンプル。チェックアウトしてyarn serveすれば動くよ
• 前述のSkyWayとかもいいみたいですよ。（TwiCallがSkyWayを採用して開発されたなど）

WebRTCとは？ を知りたい

• WebRTC コトハジメ