ブラウザーコミュニケーション

にほんブログ村

先日、Kollective Technology の ECDN というコンテンツ配信製品を、社内で検討する機会がありました。

Microsoft Teams、Stream、Windows Update を使用した場合、使用する人数が増えるほど、WAN 回線の帯域幅を消費してしまい、回線が逼迫してしまうケースがあります。

Kollective 社の ECDN 製品を使用すると、WAN回線越しに流れてくるデータストリームを少なく（ケースにより1つにする）することができます。

データストリームを受けたブラウザーがそのデータをキャッシュし、同じ場所にいる別の端末に共有します。これにより、WAN 回線を効率的に使用することができる様になります。

この製品で、WebRTC という技術が使われています。

WebRTC は名前が聞いたことはあったのですが、詳細までは知らなかったので、いい機会なので調べてみました。

WebRTC とは？

WebRTC は、Web Real Time Communications の略で、プラグインを追加することなく、ブラウザ上で簡単にリアルタイムコミュニケーションを可能にします。2011年頃に Google によって提唱され、そこから少しずつ技術開発されてます。

HTML5 で新しく策定された API の規格で、P2P通信を利用した端末間の相互接続も行うことができ、P2P 通信によるビデオチャットやファイル共有を、Web ブラウザだけで実現することができます。

Web ブラウザーを使って、簡単に使うことができるのですが、使用できるブラウザーは限定されている様です。その理由は、ブラウザーが WebRTC をサポートしている必要があるからです。

WebRTC 対応ブラウザー

Chrome
Firefox
Opera
Edge
Safari

IE はサポートしてないんですね。今でも IE を使ってる企業はまだまだ多いですが、もう古いブラウザーなので、Edge を使えってことでしょう。

ちなみに、Kollective社の製品では、以下のブラウザーとプラットフォームをサポートしています。

対応ブラウザー

Edge
Chrome
Firefox
Safari

対応モバイル端末

Android
iPad

iPhone は、WebRTC をサポートしてないらしいです。なお、対応ブラウザーが使えない場合、Teams アプリを使用すれば、WebRTC が使えるそうです。

対応 OS	対応ブラウザー
Windows / Mac	Chrome 26以降 Firefox 22以降 Opera 15以降
Android	Chrome 29以降
iOS	開発中

WebRTC で実現できること

WebRTC を実装することで、実現することのできる機能は、以下のものがあります。

端末上のカメラやマイクからのデータの取り込み

Media Capture and Stream

ストリームデータの P2P 通信

WebRTC 1.0: Real-time Communication Between Browsers

テキストデータやバイナリデータの P2P 通信

WebRTC 1.0: Real-time Communication Between Browsers

WebRTC では、クライアントがサーバにデータの要求をするクライアント/サーバモデルでななく、複数端末間での通信です。

つまり、それぞれのPCがデータを保持し、他のPCに対して直接、データの送信・要求を行うPeer to Peerの形をとります。

また、通信プロトコルには基本的に「TCP/IP」の代わりに、「UDP/IP」を用いて通信のリアルタイム性を担保しているのも特徴です。状況によってプロトコルを使い分けるみたいです。

Kollective社の製品では、上記の「WebRTC 1.0: Real-time Communication Between Browsers」を使用しているのですね。

P2P 通信に必要な情報

P2P 通信を行うためには、ブラウザ間で共有しなければならない情報があります。

P2P 通信を開始するには接続先のグローバルアドレス情報が必要になるので、NAT traversal として、STUN（Simple Traversal of UDP through NATs）やICE（Interactive Connectivity Establishment）といった技術がサポートされており、NAT が割り当てたグローバル IP アドレスとポート番号を取得できるようになっています。

Session Description Protocol (SDP)

通信に必要な各ブラウザの情報を示す文字列 (セッションの属性、メディアの形式、IP アドレス、ポート番号、通信帯域など)のことです。
片方の PC が他方 PC に対し SDP を Offer し、それに対して Answer SDP を返すという形で通信を行います。

Interactive Connectivity Establishment (ICE)

通信相手のブラウザに到達する通信経路に関する情報を提供します。
この通信経路を探す際、環境によっては、NAT やファイアウォールなどで直接的に PC 同士の情報を渡せないこともあり得ます。
そのため、STUN サーバや TURN サーバというものを用いて通信経路を検知し、それらの経路候補を ICE Candidate として、ブラウザ間で共有する必要があります。

WebRTC の JavaScript API

WebRTC は、以下の 3つの JavaScript API を提供しています。

getUserMedia

Web ブラウザから端末に取り付けられているカメラやマイクにアクセス
ストリームデータを取得する

RTCPeerConnection

マルチメディアセッションを確立
UDP/IP を使用して Web ブラウザ同士で直接ストリームデータを送受信
コーデック（オーディオおよびビデオの符号化および復号化）、暗号化、帯域管理（帯域幅の変化にストリームを適応させるなど）の各機能も提供

RTCDataChannel

テキストデータやバイナリデータの P2P によるデータ通信のための API
ファイル転送やテキストチャットなどを実現
UDP/IP を使用しているので、TCP/IP とは異なりパケット再送は行わない

メディア系の技術は名前を知っている程度で、触れる機会がなかったのですが、今回は良いチャンスです。これを機会に学んでみようと思います。

追記：

リバーベッドテクノロジーの SaaS Accelerator という製品が、この WebRTC をサポートしたとの話を聞きました。今度、機会のある時に試してみたいと思います。

TypeScriptネットワークプログラミング HTML5／WebSocket／WebRTCによる [ 松田晃一 ]

価格:3,740円
(2020/10/23 12:01時点)
感想(0件)