WebRTC API

WebRTC (Web Real-Time Communication、ウェブリアルタイムコミュニケーション) は、ウェブアプリケーションやウェブサイトにて、仲介を必要とせずにブラウザー間で直接、任意のデータの交換や、キャプチャした音声／映像ストリームの送受信を可能にする技術です。 WebRTC に関する一連の標準規格は、ユーザーがプラグインやサードパーティ製ソフトウェアをインストールすることなく、ピアーツーピアーにて、データ共有や遠隔会議を実現することを可能にします。

WebRTC は、相互に関連したいくつかの API とプロトコルで構成されており、これらが連携してこれを実現しています。ここで紹介するドキュメントでは、WebRTC の基礎知識、データ接続とメディア接続、両方の設定方法と、使用方法などを理解するのに役立ちます。

相互運用性

WebRTC の実装はまだ進化しており、ブラウザーごとにコーデック (en-US)や WebRTC 機能の対応レベルが異なるため、コードを書き始める前に Google が提供する Adapter.js ライブラリー を利用することを強く検討する必要があります。

Adapter.js はシムやポリフィルを使用して、サポートしている環境によって異なる WebRTC 実装の違いを滑らかにします。また、接頭辞やその他の名前の違いも Adapter.js が処理することで、WebRTC の開発プロセス全体がより簡単になり、より広範な互換性のある結果が得られるようになります。このライブラリーは NPM パッケージとしても提供されています。

Adapter.js の詳細については、WebRTC adapter.js を使用した互換性の向上 (en-US)を参照してください。

WebRTC の概念と使い方

WebRTC は複数の目的に対応しています。メディアキャプチャとストリーム API と一緒に使用することで、音声・ビデオ会議、ファイル交換、画面共有、ID 管理、DTMF (タッチトーンダイヤル信号) の送信サポートを含む旧来の電話システムとのインターフェイスなど、強力なマルチメディア機能をウェブに提供します。ピアー間の接続は、特別なドライバーやプラグインを必要とせずに行うことができ、多くの場合、中間サーバーを介さずに行うことができます。

2 つのピアー間の接続は RTCPeerConnection インターフェイスで表現されます。接続が確立され、RTCPeerConnection を使用して開かれると、メディアストリーム (MediaStream) やデータチャンネル (RTCDataChannel) を接続に追加することができます。

メディアストリームは、メディア情報の任意の数のトラックで構成することができます。トラックは、MediaStreamTrack インターフェイスに基づいたオブジェクトで表され、音声、映像、テキスト（字幕やチャプター名など）を含むメディアデータのいくつかの型のうちの 1 つを含むことができます。ほとんどのストリームは少なくとも 1 つの音声トラックと映像トラックで構成されており、ライブメディアや保存されたメディア情報（ストリーミングされた動画など）の送受信に使用することができます。

また、2 つのピアー間の接続を使用して、RTCDataChannel インターフェイスを使用して任意のバイナリーデータを交換することもできます。これは、バックチャンネル情報、メタデータ交換、ゲームステータスパケット、ファイル転送、あるいはデータ転送のためのプライマリーチャンネルとして使用することができます。

より多くの詳細と関連するガイドやチュートリアルへのリンクが必要ですね…。

WebRTC リファレンス

WebRTC は、様々なタスクを達成するために連携して動作する複数のインターフェイスを提供しているため、以下のリストのインターフェイスをカテゴリー別に分けています。アルファベット順のリストはサイドバーをご覧ください。

接続の設定と管理

以下のインターフェイス、辞書、型は、WebRTC 接続のセットアップ、オープン、管理に使用します。これには、ピアーメディア接続、データチャネルおよび、それぞれのピアーが双方向メディア接続のために最適な設定を選択する機能に関する情報をやりとりするためのインターフェイスが含まれています。

インターフェイス

RTCPeerConnection

ローカルコンピュータとリモートピアー間の WebRTC 接続を表します。これは、 2 つのピアー間のデータの効率的なストリーミングを処理するために使用されます。

RTCDataChannel

接続の 2 つのピアー間の双方向データチャネルを表します。

RTCDataChannelEvent

RTCDataChannel を RTCPeerConnection に装着している間に発生するイベントを表します。このインターフェイスで送信されるイベントは、データチャネル datachannel (en-US) のみです。

RTCSessionDescription

セッションの引数を表します。各 RTCSessionDescription は、オファー/アンサーネゴシエーションプロセスの、どの部分を記述するかを示す記述型 (type (en-US)) と、セッションの SDP (en-US) 記述子で構成されます。

RTCStatsReport (en-US)

接続または接続上の個々のトラックの統計情報の詳細を提供します。RTCPeerConnection.getStats() (en-US) を呼び出すと報告を取得できます。 WebRTC 統計情報の使用に関する詳細は、 WebRTC 統計 API (en-US) を参照してください。

RTCIceCandidate (en-US)

RTCPeerConnection を確立するための ICE(インタラクティブ接続確立) サーバーの候補を表します。

RTCIceTransport (en-US)

ICE トランスポートに関する情報を表します。

RTCPeerConnectionIceEvent

ターゲットとの ICE 候補 (通常は RTCPeerConnection) に関連して発生するイベントを表します。この型のイベントは icecandidate (en-US) 1 つだけです。

RTCRtpSender (en-US)

RTCPeerConnection 上の MediaStreamTrack のデータのエンコードと送信を管理します。

RTCRtpReceiver (en-US)

RTCPeerConnection 上の MediaStreamTrack のデータの受信とデコードを管理します。

RTCTrackEvent (en-US)

このインターフェイスは track (en-US) イベントを表すもので、 RTCRtpReceiver (en-US) オブジェクトが RTCPeerConnection オブジェクトに追加されたことを示すトラックイベントを表現するために使用されるインターフェイスで、新しい着信 (incoming) MediaStreamTrack が生成され、 RTCPeerConnection に追加されたことを示します。

RTCSctpTransport (en-US)

Stream Control Transmission Protocol (SCTP (en-US)) トランスポートを説明する情報を提供し、 RTCPeerConnection のすべてのRTCPeerConnection のデータチャネルの SCTP パケットが送受信される Datagram Transport Layer Security (DTLS) トランスポートにアクセスする方法も提供します。

辞書

RTCIceServer (en-US)

(STUN や TURN サーバーのような) 単一の ICE サーバーを定義します。

RTCRtpContributingSource (en-US)

ソース貢献されているパケットが再生された直近の時刻を含む、特定の貢献ソース (contributing source; CSRC) に関する情報が含まれています。

イベント

bufferedamountlow (en-US)

データチャネルの bufferedAmount (en-US) プロパティで示される、現在バッファリングされているデータ量が、 bufferedAmountLowThreshold (en-US) で指定されたチャンネルの最小バッファリングデータサイズ以下に減少したときに発行されます。

close (en-US)

データチャネルを閉じる処理が完了し、現在 closed の状態です。この点で、基礎となるデータトランスポートは完全に閉じられています。 closing イベントを監視することで、閉じる処理が完了する前に通知を受けることができます。

closing (en-US)

RTCDataChannel が closing 状態に遷移し、まもなく閉じられることが示された。 close イベントを監視することで、閉じる処理の完了を検出することができます。

connectionstatechange (en-US)

connectionState (en-US) でアクセスできる接続の状態が変更された。

datachannel (en-US)

リモートピアーが新しいデータチャネルを開いた後、新しい RTCDataChannel が利用可能です。このイベント型は RTCDataChannel です。

error (en-US)

RTCErrorEvent (en-US) で、データチャネルでエラーが発生したことを示します。

error (en-US)

RTCErrorEvent (en-US) で、 RTCDtlsTransport (en-US) においてエラーが発生したことを示します。このエラーは dtls-failure または fingerprint-failure のどちらかになります。

gatheringstatechange (en-US)

RTCIceTransport (en-US) の収集状態が変更されました。

icecandidate (en-US)

RTCPeerConnectionIceEvent は、ローカルデバイスがローカルピアーに追加する必要がある新しい ICE 候補を特定したときに、 setLocalDescription() (en-US)を呼び出して送信されるものです。

icecandidateerror (en-US)

ICE 候補の収集中にエラーが発生したことを示すRTCPeerConnectionIceErrorEvent (en-US)。

iceconnectionstatechange (en-US)

ICE 接続の状態（iceconnectionstate (en-US) プロパティで得られる）が変化したときに RTCPeerConnection に送られます。

icegatheringstatechange (en-US)

ICEの収集状態（icegatheringstate (en-US) プロパティで得られる）が変化したときに RTCPeerConnection に送られます。

message (en-US)

データチャネルでメッセージを受信した。このイベントの型は MessageEvent です。

negotiationneeded (en-US)

domxref("RTCPeerConnection.createOffer", "createOffer()")}} に続いて setLocalDescription() (en-US) を呼び出し、RTCPeerConnectionにセッション交渉を行う必要があることを通知します。

open (en-US)

RTCDataChannel の基礎となるデータトランスポートが正常にオープンまたは再オープンされました。

selectedcandidatepairchange (en-US)

イベントが発行された RTCIceTransport において、現在選択されている ICE 候補のペアが変更されました。

track (en-US)

track イベントは RTCTrackevent (en-US) の型で、メディアのストリーミングの交渉が成功した後に新しいトラックが接続に追加されると RTCPeerConnection に送信されます。

signalingstatechange (en-US)

ピアー接続の signalingstate (en-US) が変更されたときに送信されます。これは setLocalDescription() (en-US) または setRemoteDescription() (en-US) のいずれかが呼び出された結果発生するものです。

statechange

RTCDtlsTransport の状態が変化した。

statechange (en-US)

RTCIceTransport の状態が変化した。

statechange (en-US)

RTCSctpTransport の状態が変化した。

型

RTCSctpTransport.state (en-US)

RTCSctpTransport (en-US) インスタンスの状態を示します。

アイデンティティとセキュリティ

これらの API は、セキュリティとアイデンティティを管理し、ユーザーの接続を認証するために使われます。

RTCIdentityProvider

ユーザーエージェントが ID アサーションの生成または検証を要求できるようにします。

RTCIdentityAssertion (en-US)

現在の接続のリモートピアーの ID を表します。まだピアーが設定されておらず、検証されていない場合、このインターフェイスは null を返します。一度設定すると変更することはできません。

RTCIdentityProviderRegistrar

ID プロバイダー (idP) を登録します。

RTCCertificate (en-US)

RTCPeerConnection が認証に使用する証明書を表します。

電話回線

これらのインターフェイスとイベントは、公衆交換電話網 (PTSN) との相互作用に関連するものです。これらは主に、トーンダイヤルの音、またはその音を表すパケットをネットワーク経由でリモートピアーに送信するために使用されます。

インターフェイス

RTCDTMFSender (en-US)

RTCPeerConnection のデュアルトーン多周波 (DTMF) シグナリングのエンコーディングと送信を管理します。

RTCDTMFToneChangeEvent (en-US)

DTMF トーンの開始または終了を示すために tonechange (en-US) イベントで使用されます。このイベントは（特に明記されている場合を除き）バブリングせず、（特に明記されている場合を除き）キャンセルもできません。

イベント

tonechange (en-US)

新しい DTMF トーンが接続上で再生され始めたか、 RTCDTMFSender の toneBuffer (en-US) にある最後のトーンが送信されてバッファが空になったか、どちらかです。このイベントの型は RTCDTMFToneChangeEvent (en-US) です。

ガイド

WebRTC プロトコル入門

この記事では、WebRTC API の基礎となっているプロトコルについて説明しています。

WebRTC 接続

WebRTC 接続がどのように動くかを説明するガイド。どのように様々なプロトコルとインターフェイスが協調して用いられることで強力なコミュニケーションアプリを構築することができるかについて説明しています。

WebRTC セッションのライフタイム (en-US)

WebRTCは任意のデータ、音声、映像またはそれらの組み合わせをやりとりするピアーツーピアー通信をブラウザーアプリケーション上に構築することができます。この記事では、接続の確立から不要となり閉じられるまでの WebRTC のライフタイムについて見ていきます。

接続の確立: 完全なネゴシエーションパターン (en-US)

完全なネゴシエーションはシグナリングプロセスが従うべき推奨されるデザインパターンです。二者を区別するためにたくさんのコーディングを必要とせずに、双方をオファー側とアンサー側のどちらにもなれることを可能にするネゴシエーションにおける透過性を提供します。

シグナリングと双方向映像通話

以前の例で作成したウェブソケットベースのチャットシステムに参加者同士の映像通話機能を追加するチュートリアルと例。チャットサーバーのウェブソケット接続は WebRTC のシグナリングとして用いられます。

WebRTC で用いられるコーデック (en-US)

WebRTC を用いる上でブラウザーが対応すべきコーデックと様々な有名なブラウザーで対応されている追加的なコーデックについてのガイド。必要に応じたベストなコーデックの選び方についてのガイドも含みます。

WebRTC データチャネルを使う (en-US)

このガイドでは、ピアー接続と関連する RTCDataChannel を使用して、2 つのピアー間で任意のデータを交換する方法について説明します。

WebRTC での DTMF の使用 (en-US)

RTCDTMFSender (en-US) インターフェイスを用いた DTMF トーン送信サポートを含む、旧式の電話システムとのゲートウェイとやりとりを行うための WebRTC 対応について、このガイドでは、その方法を説明します。

チュートリアル

Improving compatibility using WebRTC adapter.js (en-US)

WebRTC 組織は、異なるブラウザーの WebRTC 実装における互換性の問題を回避するため adapter.js を提供しています。このアダプタは JavaScript のはシム (Shim) で、あなたのコードを仕様に合わせて記述することで、WebRTC をサポートしているすべてのブラウザーで「ただ動く (just work) 」ようにしてくれます。

WebRTC で静止画を撮る (en-US)

この記事では、WebRTC に対応したパソコンや携帯電話でWebRTCを使ってカメラにアクセスして写真を撮る方法を紹介しています。

シンプルな RTCDataChannel のサンプル (en-US)

RTCDataChannel インターフェイスは、2つのピアー間で任意のデータを送受信するためのチャネルを開くことができる機能です。このAPIは意図的に WebSocket API (en-US) に似せているので、それぞれに同じプログラミングモデルを使用することができます。

仕様書

Specification
WebRTC: Real-Time Communication in Browsers
Media Capture and Streams
Media Capture from DOM Elements

WebRTC-proper プロトコル

関連する補助プロトコル

関連情報