Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
仕事で WebRTC

仕事で WebRTC

日時:2019-10-17
作:@voluntas
バージョン:19.10.0
url:https://voluntas.github.io/

この記事は WebRTC SFU SoraWebRTC シグナリングサービス Ayame LiteOpenAyame プロジェクトOpenMomo プロジェクト の宣伝記事です。

もし気になる点があった場合は Twitter にて @voluntas 宛にメンションをいただけると助かります。

概要

WebRTC を調べると、便利なライブラリを使った P2P のサンプルで終わることが多く、実際にビジネスレベルでの運用を考える時の情報が少なすぎるのが問題だと考えています。

また WebRTC はブラウザのアップデートに伴い仕様が変わる場合があり、過去の記事では動かないこともあります。 最近では Chrome と Firefox に加え、 Edge が対応し、そして 2017 年秋には Safari が対応しました。 ちなみに、これら 4 つのブラウザは最悪なことに WebRTC の仕様がそれぞれ動作が異なります。

また、 2020 年には Flash が終了し、 Chrome M76 からはデフォルト無効になっています。 既存の Flash で実現していた機能を WebRTC や HLS/MPEG-DASH に切り替えていく必要がります。

この資料では WebRTC を仕事で利用する場合、何をしたいのか、 やりたいことをするには何をすればいいのかを、選ぶお手伝いができればと考えています。

注意

  • この記事では具体的に JavaScript をどう書くべきかという話などは扱っていません
  • この記事では具体的な WebRTC の仕様については触れていません

判断

ここでは様々な側面から見た WebRTC 需要に対して、どうしたらいいのかをざっくり書いてきます。

趣味で勉強してみたい

これを読む必要はありません。色々試してみましょう。調べてみればいろいろ情報が出てきます。

まず勉強したいのであれば Real time communication with WebRTC を読みながら試していくのがおすすめです。

仕事で使いたい

WebRTC を使う場合、一番最初にはお金を払うか自分たちでがんばるかを決める必要があります。

WebRTC は音声や映像を扱う以上、繋がらないが誰もがわかる技術です。そのため、できる限り繋がる必要があります。ただ、それが繋がらなくてもいい場合だってあります。おまけ的な機能だったらチャットでカバーできたりもしますし、最終的にはメールや Skype でも良い場合だってあります。

まずは会社としてお金を払う用意があるのかどうかを確認しましょう。

仕事として P2P を前提として使っていきたい

1:1 までの会議であれば P2P で問題ないでしょう、 3 人になった時点で SFU を検討するべきです

まずは是非 WebRTC Signaling Server Ayame の利用を検討してみてください。かんたんに利用できます。

仕事として MCU を前提として使っていきたい

MCU が必要ということは会議システムがメインでしょうか。MCU はそもそも会議システムの世界で生まれた技術ですのでそちらの代理店を色々探して見るのが良いです。

MCU は 1 部屋 1 コアを利用するくらいの CPU リソースを持っていくシステムです。その部分を考慮すると良いです。もちろん OSS もあるので、それも検討するのが良いでしょう。

仕事として SFU を前提として使っていきたい

サービスを利用するか、OSS でがんばるか、商用を利用するかの二択をまず選びます。 もちろんどちらかを選択して、辛くなったので切り替えるというのでも構わないと思います。

最初から SFU を選択できるのであればある程度 WebRTC への理解があると思いますので、まずは P2P を検討するもありです。

ブラウザ対応状況

仕事で利用する場合に一番気になるのがブラウザ対応状況です。

Chrome

現時点 WebRTC を安定的に利用するならば、Chrome が一番無難です。

Firefox

Chrome より少し遅れてきています、あまりおすすめできません。

Edge

新しい Chromium ベースの Edge はほぼ Chrome と同じため、推奨ブラウザといって問題ないです。

既存の Edge は仕様がクローズドで、さらにソースがクローズドで、アップデートが不明確なため対応していると言っても現時点では採用はお勧めしません。 さらにデータチャネルに対応していません。

Safari

WebRTC を安定して利用できるブラウザです。

JavaScript クライアント

商用サービスや商用パッケージを利用する場合はクライアントが用意されていることが多いと思いますので、それを利用するのが一番です。 また OSS でもクライアントが用意されている場合があるため、それを使うのが無難です。

WebRTC API はブラウザごとに仕様が異なります。さらにアップデートされるたびにその状況は変化していっています。まずはそこを意識しましょう。

JavaScript ライブラリ選定

実はこれといったおすすめは特にありません。色々ありますがメンテナンスが終了するタイミングでさてどうしたらいいかとなってしまいます。簡単に使えるライブラリは隠蔽が多く、あなたのやりたいことが阻害されることが多いです。

おすすめは商用サービスのクライアントが OSS で公開されている場合があるので、それを参考にしてみるのが良いと思います。

WebRTC adapter

ブラウザの互換性を一番に考慮することになります。 そのためおすすめなのが既存の便利ライブラリを覚えるのではなく、 adapter というブラウザの互換性を吸収してくれるライブラリを使うことを検討しましょう。

webrtcHacks/adapter: Shim to insulate apps from spec changes and prefix differences. Latest adapter.js release:

adapter は世界中に WebRTC を利用している人たちの苦労が集まっています。 まずはここから始めて、なれてきたら自前で作っていくが良いと思います。

トラブルシューティング

あまりにいろいろな要因があるため、対応が難しく、ノウハウが重要になります。

まず、一番最初にすることは webrtc.org が提供してくれている test.webrtc.org に接続してもらう事です。

https://test.webrtc.org/

ここにアクセスして貰い Start を押して貰いましょう。

すべての調査が終わったら、バグマークをクリックしてアップロードレポートをクリックし、URL を生成して貰いましょう。

その後その URL を貰って、ログを確認してみてください。

ログを貰ってからが勝負です。がんばりましょう。

ブラウザやスマートフォン以外で使いたい

https://webrtc.org/native-code/native-apis/

ネイティブで利用できる仕組みがありますので、ブラウザ以外でも利用可能です。ただ情報はかなり少ないです。 また利用するソースコードのバージョンは 6 週間ごとに上がっていきますので追従は iOS/Android と同様ですのである程度の覚悟が必要です。

ネイティブ API を利用した shiguredo/momo: WebRTC Native Client Momo を OSS として公開しています。是非使ってみてください。

データチャネルを使いたい

データチャネルは WebRTC 上で音声や映像以外にやり取りするための仕組みで、P2P でデータのやり取りをする仕組みとして使われてきました。 P2P でのデータやり取りで使われてきたのはほとんどファイル転送や P2P の仕組みを上手く使った CDN やファイル共有あたりが有名でした。つまり WebRTC のデータチャネルは今まではあまり使いみちがないというのが現実でした。

ただ、最近ではエッジデバイスでの映像解析が可能になったことにより、映像とともに解析データをリアルタイムに送りたいという要望や、 VR で音声とモーションデータを送りたいといったデータだけではなく音声や映像との組み合わせの需要がでてきました。

しかし、音声や映像との動機ができないデータチャネルを使うメリットはほぼありません。あくまで P2P で 1:1 のやり取りで、さらに限定的な場面でのみ利用可能と考えて間違いありません。

お金を払う用意はない (P2P 編)

無償で提供されているサービス、またはオープンソースを使うということなります。その場合はいくつかの課題に立ち向かう必要があります。

  • 繋がらないときにどうするか
  • ブラウザのアップデートへの追従をどうするか
  • シグナリングサーバの運用をどうするか
  • STUN/TURN サーバの運用をどうするか
  • iOS/Android アプリどうするか

主にこの 5 つが課題になります。まずはお金を払わず P2P で運用する場合をまとめてみます。

繋がらないときにどうするか

がんばりましょう、理由は様々です。ノウハウを溜め込みましょう。ネットワーク環境、ブラウザ環境、プラグイン、様々な原因があります。

Stack Overflow で助言を求めましょう。

ブラウザのアップデートへの追従をどうするか

がんばりましょう。適当にライブラリを決めてしまうと追従を止める可能性はあります。もちろん Pull-Request を送ったりするのもとても良いことです。

Chrome と Firefox と Safari のブラウザの変更履歴に目を凝らしましょう。

シグナリングサーバの運用をどうするか

がんばりましょう。シグナリングサーバは WebRTC の仕様は決められていません。どんな実装でも問題ありません。多い実装は Node.js で Socket.io が多いようです。

この部分は利用者数を想定する必要があります。基本的に WebRTC を利用する場合はシグナリング用の通信は張りっぱなしにすることが多いです。そのため 1 サーバで同時に張れる量を調べてみるのが良いです。

Golang や Elixir なんでも良いです、好きな言語で作ってもよし。既存のシグナリングサーバ実装を使うもよし。

ただ、無償で提供されているシグナリングサーバはいつ閉じるのかわかりません。ここは注意しましょう。

STUN/TURN サーバの運用をどうするか

がんばりましょう。TURN サーバを建てないと 70% 程度しか繫がらないという調査結果があります。つまり 30% はつながりません。仕事で使う場合はこれは受け入れられないでしょうから、 TURN サーバのノウハウを溜め込んでいきましょう。

ありがたいことに TURN サーバの選択肢は多くありません。まずは coturn というサーバを利用してみてください。

https://github.com/coturn/coturn

TURN サーバを運用するということはトンネルサーバを提供するということになります。転送量を気にしましょう。映像や音声はすぐに最大値を利用してきます。WebRTC であれば 2000kbps とかもザラにつかってきますので、あっというまに転送量が 1G 行きます。また、TURN サーバが落ちている場合は繫がらないのと同等ですので気をつけてください。

TURN サーバは認証が必須です。Username/Credential はワンタイムで利用できるようにしましょう。coturn は RDB や Redis といったデータベースと連携できますので、うまく組み合わせていきましょう。

TURN-TCP と TURN-TLS まで対応させてしまえば、 そのポートが潰されて限りは大丈夫なはずです。たまに MITM やってる FW がありますがそこはまぁあきらめてください。

iOS/Android アプリどうするか

がんばりましょう。まずは https://webrtc.org/ を眺めてみることをお勧めします。

ビルドして、使えるようになるのがまず一番です。忘れていけませんがこのコードもガンガンバージョンは上がっていきます。ブラウザだけではなくこれらのコアライブラリにも追従していく必要があります。 最近は日本語でビルド情報を公開してくれている方も多いのでそちらを参考にしてみるのが良いと思います。

色々妥協できるのであれば React-Native を利用するというのも手です。

oney/react-native-webrtc: A WebRTC module for React Native.

ただ、 React-Native も結局は iOS/Android の知識が必要なので、まぁ悩ましいところではあります。

WebRTC Signaling Server Ayame

これは宣伝です

OpenAyame プロジェクト

Ayame は WebRTC SFU を1から開発している時雨堂が、 そのノウハウをつぎ込みオープンソースとして公開している WebRTC を P2P で利用する際に必要となるシグナリングサーバです。

成果は Apache License 2.0 としてオープンソースで公開しています。

OpenAyame/ayame: WebRTC Signaling Server Ayame

Go で書かれており、 1:1 の利用に限定することでかなりシンプルに作られています。商用にも耐える性能を持っています。

Web SDK や SDK のサンプルもあります。 React を利用したサンプルも用意しています。

ただし 2019 年 10 月現在 iOS SDK はありません。絶賛開発予定です。

WebRTC シグナリングサービス Ayame Lite

これは宣伝です

Ayame Lite は Ayame をサービスとして提供し、 さらにルーム認証や STUN/TURN サーバを提供している 無料 で利用可能なサービスです。

Ayame Lite

Ayame 自体には一切手を入れていません。そのため、最初はサービスを利用していたが、自社で運用するといった切り替えが可能です。

現在オープンベータテスト中ですので、是非利用してみてください。

WebRTC シグナリングサービス Ayame Lite の使い方

お金を払う用意はない (OSS SFU/MCU 編)

お勧めは Janus です。様々な機能を持っていますし、たくさんの場所で利用されています。 今 OSS を選択するのであれば Janus が現実的だと思います。

利用する OSS を定めて、がつがつ使って Pull-Request を送ったり、 SO で解答したりしてみましょう。

お金を払う用意はある (P2P 商用シグナリングサービス利用編)

有償のシグナリングサービスが幾つかあります。

これらは同時に STUN/TURN サービスも提供してくれています。ただ問題の繫がらないを解決するヒントはあまりしてくれません。そんなときはサービスを使うことで情報を可視化してくれます。

Analytics for WebRTC — callstats.io

さて、ここで少し気づいて貰う必要があります。 お金を払おうがお金を払わまいが WebRTC の知識は必要になるということです。結局勉強する必要があります。

お金を払う用意はある (商用サービス利用編)

商用サービスは接続時間での従量課金制がほとんどです。

TokBox

OpenTok | WebRTC Platform for Video, Voice and Messaging from TokBox

一通りの機能は揃っていますが、とても高額なのとサーバが日本にはありません。この辺りは要注意です。サポートもすべて英語になります。

Twilio

Announcing Programmable Video Group Rooms: More Participants, Video Recording, and Pricing for Scale

日本だと KDDI が提供したが、日本法人ができたもようです。

Twilio for KDDI Web Communications | コミュニケーションAPI

Agora.io

Agora.io Real-Time Voice and Video Engagement - Agora.io

マルキャス

マルキャス - WebRTCを利用したライブ配信システム -

バックエンドは OSS の SFU である mediasoup です。

SkyWay

SkyWay - Enterprise Cloud WebRTC Platform

バックエンドは OSS の SFU である Jitsi です。

お金を払う用意はある (商用 MCU 利用編)

大規模なうえに MCU が必須で自社運用を考えるのであれば、自分が知っている範囲であれば今のところ一つです。ちなみに SFU 機能も持っています。まずは代理店を探してみると良いでしょう。価格と機能を確認し、それで納得できそうであれば検討をすると良いです。

お金を払う用意はある (商用コールセンター編)

WebRTC とコールセンターで検索するといくつか出てきます。大規模すぎて自前で何かという世界ではありません。 WebRTC 1% それ以外 99% の世界ですので、まずはこの記事を読む前にもっと調べることがあるはずです。

コールセンターの仕組みは複雑です、それを踏まえてください。

お金を払う用意はある (商用 SFU 利用編)

これは宣伝記事です

WebRTC SFU Sora

商用の WebRTC SFU です。価格は同時 100 接続で年間利用料ライセンス 60 万円です。毎年かかります。製品のサポート料金込みです。200 接続だと年間 120 万円です。

複数人数での会議や、 数百人への配信、一対一の面談など様々な用途に利用可能です。

パッケージで提供しますので、自社で運用が可能です。 AWS だろうが GCP だろうが、オンプレだろうがなんでも好きな環境で動かすことができます。

サーバさえあれば起動までは 10 分です。デモ機能が内蔵しているので動かすまで 15 分です。

  • 大変多くのお客様に採用いただいております
  • とにかく 落ちないこと を目的に作っています
  • とにかく 繋がること を目的に作っています
  • とにかく 手間がかからないこと を目的に作っています
  • 最新ブラウザのアップデートに追従しています
  • シグナリングサーバ内蔵ですので別途立てる必要はありません
  • TURN サーバ内蔵ですので別途立てる必要ありません
  • 日本語によるサポート対応しています
  • フルスクラッチ自前実装なのですべて把握しています
  • 1:1 の双方向に対応しています
  • 1:1000 の片方向に対応しています
  • 3:1000 といった配信者が複数の片方向にも対応しています
  • スポットライトという機能を利用することで 50 人以上の会議に対応しています
  • 録画機能があります
  • Chrome / Firefox / Edge / Safari といった主要ブラウザ全てに対応しています
  • Apache 2.0 ライセンスで JavaScript と iOS と Android のクライアント SDK を公開しています
  • Apache 2.0 ライセンスで React Native 向け WebRTC ライブラリを公開しています
  • 既存システムとの連携を重視しており、Web フック機能を利用して簡単に連携が可能です
    • 認証や、クライアントの接続切断などもすべて HTTP での通知を既存のシステムに送ることができます

WebRTC が苦手としている場面、例えば視聴する画質の選択や数百人レベルの会議などにも対応しています。

興味のある方はお気軽に sora at shiguredo.jp までお問い合わせください。

紹介や検討資料も公開しております。

WebRTC を単体のアプリとして利用したい

shiguredo/momo: WebRTC Native Client Momo

WebRTC クライアントをラズベリーパイゼロなどで動かせるようにした製品をオープンソースとして公開しています。

おまけ

世界の WebRTC プラットフォーム一覧。おそらく世界で一番詳しい資料です。

WebRTC Platforms

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.