1. 開発者向けのウェブ技術
  2. Web API
  3. WebRTC API

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

WebRTC API

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

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

WebRTC の概念と使い方

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

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

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

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

相互運用性

WebRTC は現行のブラウザーでは概ね対応していますが、一部非互換性も残っています。 adapter.js ライブラリーは、これらの非互換性からアプリを保護するための補助的なものです。

WebRTC リファレンス

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

接続の設定と管理

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

インターフェイス

RTCPeerConnection

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

RTCDataChannel

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

RTCDataChannelEvent

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

RTCSessionDescription

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

RTCStatsReport

接続または接続上の個々のトラックの統計情報の詳細を提供します。RTCPeerConnection.getStats() を呼び出すと報告を取得できます。

RTCIceCandidate

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

RTCIceTransport

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

RTCPeerConnectionIceEvent

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

RTCRtpSender

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

RTCRtpReceiver

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

RTCTrackEvent

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

RTCSctpTransport

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

イベント

bufferedamountlow

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

close

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

closing

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

connectionstatechange

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

datachannel

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

error

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

error

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

gatheringstatechange

RTCIceTransport の収集状態が変更されました。

icecandidate

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

icecandidateerror

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

iceconnectionstatechange

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

icegatheringstatechange

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

message

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

negotiationneeded

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

open

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

selectedcandidatepairchange

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

track

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

signalingstatechange

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

statechange

RTCDtlsTransport の状態が変化した。

statechange

RTCIceTransport の状態が変化した。

statechange

RTCSctpTransport の状態が変化した。

rtctransform

エンコードされた動画や音声のフレームは、ワーカーで変換ストリームを使用して処理する準備ができています。

型

RTCSctpTransport.state

RTCSctpTransport インスタンスの状態を示します。

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

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

RTCIdentityProvider

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

RTCIdentityAssertion

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

RTCIdentityProviderRegistrar

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

RTCCertificate

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

電話回線

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

インターフェイス

RTCDTMFSender

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

RTCDTMFToneChangeEvent

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

イベント

tonechange

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

エンコードされた変換

これらのインターフェイスとイベントは、ワーカーで実行する変換ストリームを使用して、入出力されるエンコード方式の動画と音声フレームを処理するために使用します。

インターフェイス

RTCRtpScriptTransform

ワーカーで実行する変換ストリームを RTC パイプラインに挿入するインターフェイスです。

RTCRtpScriptTransformer

メインスレッドからオプションを渡す RTCRtpScriptTransform に対応するワーカーサイドのもので、 TransformStream を通してエンコードされたフレームをパイプするために使用することができる読み取り可能なストリームと書き込み可能なストリームも一緒に渡します。

RTCEncodedVideoFrame

RTC パイプラインで変換されるエンコードされた動画フレームを表します。

RTCEncodedAudioFrame

RTC パイプラインで変換されるエンコードされた音声フレームを表します。

プロパティ

RTCRtpReceiver.transform

エンコードされた映像および音声フレームが受信パイプラインに変換ストリームを挿入するために使用するプロパティです。

RTCRtpSender.transform

エンコードされた映像および音声フレームの送信パイプラインに変換ストリームを挿入するために使用するプロパティです。

イベント

rtctransform

RTC 変換がワーカーで実行する準備ができているか、エンコードされた動画や音声フレームを処理する準備ができています。

ガイド

WebRTC プロトコル入門

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

WebRTC 接続

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

WebRTC セッションのライフタイム

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

接続の確立: 完全なネゴシエーションパターン

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

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

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

WebRTC で用いられるコーデック

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

WebRTC データチャネルを使う

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

WebRTC での DTMF の使用

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

WebRTC エンコード変換

このガイドでは、ワーカーで実行する TransformStream を使用して、ウェブアプリケーションが入出力する WebRTCのエンコードされた映像および音声フレームを変更する方法を示します。

チュートリアル

WebRTC adapter.js を使用した互換性の向上

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

シンプルな RTCDataChannel のサンプル

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

Peer.js によるインターネット接続電話の構築

このチュートリアルは、 Peer.js を使用して電話を構築する方法を段階を追ってガイドします。

仕様書

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

WebRTC-proper プロトコル

関連する補助プロトコル

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

AltStyle によって変換されたページ (->オリジナル) /