WebRTCのブラウザ対応状況の調べ方 #JavaScript

こんにちは、最近業務でWebRTCを勉強し始めたものです。

WebRTC使うぞ！となった時にまず気になるのが自分たちが対応したいブラウザでサポートされているのかという話なのですが、WebRTCはそれが単独のAPIで構成されているわけではなく、またコーデックなども関わってくるので、自信を持って大丈夫と言えるようにまとめてみました。

WebRTCのAPI

まず WebRTC と一口に言っても window.webrtc みたいなオブジェクトが生えているわけではなく、ブラウザを介したユーザ間のリアルタイムコミュニケーションを実現するためのAPIの総称が WebRTC です。

それを実現するためには大きく二つあって

通信に使用するメディア(カメラやマイク)へのアクセス
- navigator.mediaDevices.getUserMedia() を使って MediaStreams を取得します。
P2Pでのコネクションの確立
- RTCPeerConnection を使って実現します。

(その他には Audio/Video 以外を通信したい場合は RTCDataChannel が必要だったり、レコーディングや画面共有などの機能を作りたい場合はnavigator.mediaDevices.getDisplayMedia()が必要です)

なので navigator.mediaDevices.getUserMedia() と RTCPeerConnection が実装されているブラウザであればとりあえず実現はできそうです。

主要なところで言うと iOS 10 以下とIEを切ることができれば大丈夫そうですね。

こちらも同様です。

普段Webだけやっている身としては馴染みのない概念ですが、使用するコーデックもブラウザによって対応状況が違うため気をつける必要があります。

MDNに詳しく纏まっているのでこちらをご一読いただけるといいと思いますが、ここでもざっくり解説をします。
https://developer.mozilla.org/en-US/docs/Web/Media/Formats/WebRTC_codecs

記事の本筋から逸れるので詳細は省きますが、ざっくり言うと動画データと音声データを通信する際の圧縮/復元を行うプログラム(アルゴリズム？)をコーデックと呼びます。

我々Webエンジニアも gzip したり brotli したりすると思いますが、アレの動画/音声版ですね。
それで「brotli、IEだと解凍できないから使えません😇」みたいなのがコーデックにもある訳です。

まずブラウザ関係なくWebRTCのRFCを見てみると次のコーデックのサポートが必須となっています。

各ブラウザベンダーの良心を信じればこれらのコーデックを使用していればとりあえずは動きそうです。

まだまだ記事執筆時点では iOS 12.0 以下のシェアも馬鹿にならないのでコーデックを決める際には注意が必要です。またVP9などのコーデックを使用したい場合には個別に調査を頑張りましょう。

こちらの記事が現状整理分かりやすくされていて良かったです。
WebRTC の未来 · GitHub