path: root/files/ja/web/api/webrtc_api/index.html

---
title: WebRTC API
slug: Web/API/WebRTC_API
tags:
  - API
  - Audio
  - Conferencing
  - Landing
  - Media
  - Networking
  - Video
  - WebRTC
  - WebRTC API
  - streaming
  - ストリーミング
  - ネットワーク
translation_of: Web/API/WebRTC_API
---
<div>{{WebRTCSidebar}}</div>

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

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

<h2 id="Interoperability" name="Interoperability">相互運用性</h2>

<p>WebRTC の実装はまだ進化しており、ブラウザごとに<a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">コーデック</a>や WebRTC 機能のサポートレベルが異なるため、コードを書き始める前に Google が提供する <a href="https://github.com/webrtcHacks/adapter">Adapter.js</a> ライブラリを利用することを強く検討する必要があります。</p>

<p>Adapter.js はシム ({{Glossary("Shim")}}) やポリフィル ({{Glossary("polyfill")}}) を使用して、サポートしている環境によって異なる WebRTC 実装の違いを滑らかにします。また、接頭辞やその他の名前の違いも Adapter.js が処理することで、WebRTC の開発プロセス全体がより簡単になり、より広範な互換性のある結果が得られるようになります。このライブラリは <a href="https://www.npmjs.com/package/webrtc-adapter">NPM パッケージ</a>としても提供されています。</p>

<p>Adapter.js の詳細については、<a href="/en-US/docs/Web/API/WebRTC_API/adapter.js">WebRTC adapter.js を使用した互換性の向上</a>を参照してください。</p>

<h2 id="WebRTC_concepts_and_usage" name="WebRTC_concepts_and_usage">WebRTC の概念と使い方</h2>

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

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

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

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

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

<h2 id="WebRTC_reference" name="WebRTC_reference">WebRTC リファレンス</h2>

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

<h3 id="Connection_setup_and_management" name="Connection_setup_and_management">接続の設定と管理</h3>

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

<h4 id="Interfaces" name="Interfaces">インターフェイス</h4>

<dl>
 <dt>{{DOMxRef("RTCPeerConnection")}}</dt>
 <dd>ローカルコンピュータとリモートピア間の WebRTC 接続を表します。これは、2つのピア間のデータの効率的なストリーミングを処理するために使用されます。</dd>
 <dt>{{DOMxRef("RTCDataChannel")}}</dt>
 <dd>接続の2つのピア間の双方向データチャネルを表します。</dd>
 <dt>{{DOMxRef("RTCDataChannelEvent")}}</dt>
 <dd>{{DOMxRef("RTCPeerConnection")}} に {{DOMxRef("RTCDataChannel")}} をアタッチしている間に発生するイベントを表します。このインタフェースで送信されるイベントは、データチャネル {{event("datachannel")}} のみです。</dd>
 <dt>{{DOMxRef("RTCSessionDescription")}}</dt>
 <dd>セッションのパラメータを表します。各 <code>RTCSessionDescription</code> は、オファー/アンサーネゴシエーションプロセスの、どの部分を記述するかを示す記述型 ({{DOMxRef("RTCSessionDescription.type", "type")}}) と、セッションの {{Glossary("SDP")}} 記述子で構成されます。</dd>
 <dt>{{DOMxRef("RTCStatsReport")}}</dt>
 <dd>接続または接続上の個々のトラックの統計情報の詳細を提供します。{{DOMxRef("RTCPeerConnection.getStats()")}} を呼び出すと報告を取得できます。    WebRTC 統計情報の使用に関する詳細は、 <a href="/ja/docs/Web/API/WebRTC_Statistics_API">WebRTC 統計 API</a> を参照してください。</dd>
 <dt>{{DOMxRef("RTCIceCandidate")}}</dt>
 <dd>{{DOMxRef("RTCPeerConnection")}} を確立するための {{Glossary("ICE")}}(インタラクティブ接続確立) サーバの候補を表します。</dd>
 <dt>{{DOMxRef("RTCIceTransport")}}</dt>
 <dd>{{Glossary("ICE")}} トランスポートに関する情報を表します。</dd>
 <dt>{{DOMxRef("RTCPeerConnectionIceEvent")}}</dt>
 <dd>ターゲットとの {{Glossary("ICE")}} 候補(通常は {{DOMxRef("RTCPeerConnection")}} )に関連して発生するイベントを表します。このタイプのイベントは {{event("icecandidate")}} 1つだけです。</dd>
 <dt>{{DOMxRef("RTCRtpSender")}}</dt>
 <dd>{{DOMxRef("RTCPeerConnection")}} 上の {{DOMxRef("MediaStreamTrack")}} のデータのエンコードと送信を管理します。</dd>
 <dt>{{DOMxRef("RTCRtpReceiver")}}</dt>
 <dd>{{DOMxRef("RTCPeerConnection")}} 上の {{DOMxRef("MediaStreamTrack")}} のデータの受信とデコードを管理します。</dd>
 <dt>{{DOMxRef("RTCTrackEvent")}}</dt>
 <dd>このインターフェイスは {{domxref("RTCPeerConnection.track_event", "track")}} イベントを表すもので、 {{DOMxRef("RTCRtpReceiver")}} オブジェクトが {{DOMxRef("RTCPeerConnection")}} オブジェクトに追加されたことを示すトラックイベントを表現するために使用されるインターフェースで、新しい着信 (incoming) {{DOMxRef("MediaStreamTrack")}} が生成され、<code>RTCPeerConnection</code> に追加されたことを示します。</dd>
 <dt>{{DOMxRef("RTCSctpTransport")}}</dt>
 <dd>Stream Control Transmission Protocol (<strong>{{Glossary("SCTP")}}</strong>) トランスポートを説明する情報を提供し、 {{DOMxRef("RTCPeerConnection")}} のすべての<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection" title="The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed."><code>RTCPeerConnection</code></a> のデータチャネルの SCTP パケットが送受信される Datagram Transport Layer Security (<strong>{{Glossary("DTLS")}}</strong>) トランスポートにアクセスする方法も提供します。</dd>
 <dt>
 <h4 id="Dictionaries" name="Dictionaries">辞書</h4>
 </dt>
 <dt>{{DOMxRef("RTCConfiguration")}}</dt>
 <dd><a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection" title="The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed."><code>RTCPeerConnection</code></a> の {{DOMxRef("RTCPeerConnection")}} の構成オプションを提供するために使用します。</dd>
 <dt>{{DOMxRef("RTCIceServer")}}</dt>
 <dd>({{Glossary("STUN")}} や {{Glossary("TURN")}} サーバのような) 単一の {{Glossary("ICE")}} サーバーを定義します。</dd>
 <dt>{{DOMxRef("RTCRtpContributingSource")}}</dt>
 <dd>ソース貢献されているパケットが再生された直近の時刻を含む、特定の貢献ソース (contributing source; CSRC)に関する情報が含まれています。</dd>
 <dt>
 <h4 id="Types" name="Types">型</h4>
 </dt>
 <dt>{{DOMxRef("RTCSctpTransportState")}}</dt>
 <dd>{{DOMxRef("RTCSctpTransport")}} インスタンスの状態を示します。</dd>
 <dt>{{DOMxRef("RTCSessionDescriptionCallback")}}</dt>
 <dd><code>RTCSessionDescriptionCallback</code> は、オファーやアンサーの作成を要求する際に {{DOMxRef("RTCPeerConnection")}} オブジェクトに渡されます。</dd>
</dl>

<h3 id="Identity_and_security" name="Identity_and_security">アイデンティティとセキュリティ</h3>

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

<dl>
 <dt>{{DOMxRef("RTCIdentityProvider")}}</dt>
 <dd>ユーザー・エージェントが ID アサーションの生成または検証を要求できるようにします。</dd>
 <dt>{{DOMxRef("RTCIdentityAssertion")}}</dt>
 <dd>現在の接続のリモートピアの ID を表します。まだピアが設定されておらず、検証されていない場合、このインターフェイスは <code>null</code> を返します。一度設定すると変更することはできません。</dd>
 <dt>{{DOMxRef("RTCIdentityProviderRegistrar")}}</dt>
 <dd>ID プロバイダ(idP)を登録します。</dd>
 <dt>{{DOMxRef("RTCIdentityEvent")}}</dt>
 <dd>ID プロバイダ (idP) によって生成された ID アサーションを表します。これは通常、{{DOMxRef("RTCPeerConnection")}} に対して行われます。このタイプで送信されるイベントは {{event("identityresult")}} のみです。</dd>
 <dt>{{DOMxRef("RTCIdentityErrorEvent")}}</dt>
 <dd>ID プロバイダ (idP) に関連するエラーを表します。これは通常、 {{DOMxRef("RTCPeerConnection")}} に対して行われます。このタイプでは、 {{event("idpassertionerror")}} と {{event("idpvalidationerror")}} の 2 つのイベントが送信されます。</dd>
 <dt>{{DOMxRef("RTCCertificate")}}</dt>
 <dd>{{DOMxRef("RTCPeerConnection")}} が認証に使用する証明書を表します。</dd>
</dl>

<h3 id="Telephony" name="Telephony">電話通信</h3>

<p>以下のインターフェイスは、公衆電話網 (public-switched telephone networks; PTSNs) と通信するために利用します。</p>

<dl>
 <dt>{{DOMxRef("RTCDTMFSender")}}</dt>
 <dd>{{DOMxRef("RTCPeerConnection")}} のデュアルトーン多周波 (DTMF) シグナリングのエンコーディングと送信を管理します。</dd>
 <dt>{{DOMxRef("RTCDTMFToneChangeEvent")}}</dt>
 <dd>DTMF トーンが開始または終了したことを示すために{{domxref("RTCDTMFSender.tonechange_event", "tonechange")}} イベントで使用されます。このイベントは（別段の記載がある場合を除き）泡立たず (bubble) 、（別段の記載がある場合を除き）キャンセルできません。</dd>
</dl>

<h2 id="Guides" name="Guides">ガイド</h2>

<dl>
 <dt><a href="/ja/docs/Web/API/WebRTC_API/Protocols">WebRTC プロトコル入門</a></dt>
 <dd>この記事では、WebRTC API の基礎となっているプロトコルについて説明しています。</dd>
 <dt><a href="/ja/docs/Web/API/WebRTC_API/Connectivity">WebRTC 接続</a></dt>
 <dd>WebRTC 接続がどのように動くかを説明するガイド。どのように様々なプロトコルとインターフェースが協調して用いられることで強力なコミュニケーションアプリを構築することができるかについて説明しています。</dd>
 <dt><a href="/ja/docs/Web/API/WebRTC_API/Session_lifetime">WebRTC セッションのライフタイム</a></dt>
 <dd>WebRTCは任意のデータ、音声、映像またはそれらの組み合わせをやりとりするピアツーピア通信をブラウザアプリケーション上に構築することができます。この記事では、接続の確立から不要となり閉じられるまでのWebRTCのライフタイムについて見ていきます。</dd>
</dl>

<dl>
 <dt><a href="/ja/docs/Web/API/WebRTC_API/Perfect_negotiation">接続の確立: 完全なネゴシエーションパターン</a></dt>
 <dd><strong>完全なネゴシエーション</strong>はシグナリングプロセスが従うべき推奨されるデザインパターンです。二者を区別するためにたくさんのコーディングを必要とせずに、双方をオファー側とアンサー側のどちらにもなれることを可能にするネゴシエーションにおける透過性を提供します。</dd>
</dl>

<dl>
 <dt><a href="/ja/docs/Web/API/WebRTC_API/Signaling_and_video_calling">シグナリングと双方向ビデオ通話</a></dt>
 <dd>以前の例で作成したウェブソケットベースのチャットシステムに参加者同士のビデオ通話機能を追加するチュートリアルと例。チャットサーバのウェブソケット接続は WebRTC のシグナリングとして用いられます。</dd>
 <dt><a href="/ja/docs/Web/Media/Formats/WebRTC_codecs">WebRTC で用いられるコーデック</a></dt>
 <dd>WebRTC を用いる上でブラウザがサポートしているべきコーデックと様々なポピュラーなブラウザでサポートされている追加的なコーデックについてのガイド。必要に応じたベストなコーデックの選び方についてのガイドも含みます。</dd>
 <dt><a href="/ja/docs/Web/API/WebRTC_API/Using_data_channels">WebRTC データチャネルを使う</a></dt>
 <dd>このガイドでは、ピア接続と関連する {{DOMxRef("RTCDataChannel")}} を使用して、2 つのピア間で任意のデータを交換する方法について説明します。</dd>
 <dt><a href="/ja/docs/Web/API/WebRTC_API/Using_DTMF">DTMFをWebRTCと共に用いる</a></dt>
 <dd>{{DOMxRef("RTCDTMFSender")}}インターフェースを用いたDTMFトーン送信サポートを含む、旧式の電話システムとのゲートウェイとやりとりを行うためのWebRTCサポートについて、このガイドでは、その方法を説明します。</dd>
</dl>

<h2 id="Tutorials" name="Tutorials">チュートリアル</h2>

<dl>
 <dt><a href="/ja/docs/Web/API/WebRTC_API/adapter.js">Improving compatibility using WebRTC adapter.js</a></dt>
 <dd>WebRTC 組織は、異なるブラウザの WebRTC 実装における互換性の問題を回避するため <a href="https://github.com/webrtc/adapter/">adapter.js</a> を提供しています。このアダプタは JavaScript のはシム ({{Glossary("Shim")}}) で、あなたのコードを仕様に合わせて記述することで、WebRTC をサポートしているすべてのブラウザで「ただ動く (just work) 」ようにしてくれます。</dd>
 <dt><a href="/ja/docs/Web/API/WebRTC_API/Taking_still_photos">WebRTC で静止画を撮る</a></dt>
 <dd>この記事では、WebRTC に対応したパソコンや携帯電話でWebRTCを使ってカメラにアクセスして写真を撮る方法を紹介しています。</dd>
 <dt><a href="/ja/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">シンプルな RTCDataChannel のサンプル</a></dt>
 <dd>{{DOMxRef("RTCDataChannel")}} インターフェイスは、2つのピア間で任意のデータを送受信するためのチャネルを開くことができる機能です。このAPIは意図的に <a href="/ja/docs/Web/API/WebSocket_API">WebSocket API</a> に似せているので、それぞれに同じプログラミングモデルを使用することができます。</dd>
</dl>

<h2 id="Resource" name="Resource">リソース</h2>

<h3 id="Protocols" name="Protocols">プロトコル</h3>

<h4 id="WebRTC-proper_protocols" name="WebRTC-proper_protocols">WebRTC-proper プロトコル</h4>

<ul>
 <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/"><cite>WebRTC のためのアプリケーションレイヤプロトコルネゴシエーション</cite></a></li>
 <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/"><cite>WebRTC オーディオコーデックと処理要件</cite></a></li>
 <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/"><cite>RTCWeb Data Channels</cite></a></li>
 <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/"><cite>RTCWeb Data Channel Protocol</cite></a></li>
 <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/"><cite>ウェブリアルタイム通信 (WebRTC): メディアトランスポートとRTPの利用</cite></a></li>
 <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/"><cite>WebRTC セキュリティアーキテクチャ</cite></a></li>
 <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/"><cite>RTCWEB用トランスポート</cite></a></li>
</ul>

<h4 id="Related_supporting_protocols" name="Related_supporting_protocols">関連する補助プロトコル</h4>

<ul>
 <li><a href="https://tools.ietf.org/html/rfc5245">Interactive Connectivity Establishment (ICE): A Protocol for Network Address Translator (NAT) Traversal for Offer/Answer Protocol</a></li>
 <li><a href="https://tools.ietf.org/html/rfc5389"><cite>Session Traversal Utilities for NAT (STUN)</cite></a></li>
 <li><a href="https://tools.ietf.org/html/rfc7064"><cite>URI Scheme for the Session Traversal Utilities for NAT (STUN) Protocol</cite></a></li>
 <li><a href="https://tools.ietf.org/html/rfc7065"><cite>Traversal Using Relays around NAT (TURN) Uniform Resource Identifiers</cite></a></li>
 <li><a href="https://tools.ietf.org/html/rfc3264"><cite>An Offer/Answer Model with Session Description Protocol (SDP)</cite></a></li>
 <li><a href="https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/"><cite>Session Traversal Utilities for NAT (STUN) Extension for Third Party Authorization</cite></a><br>
   </li>
</ul>

<h4 id="WebRTC_statistics" name="WebRTC_statistics">WebRTC 統計情報</h4>

<ul>
 <li><a href="/ja/docs/Web/API/WebRTC_Statistics_API">WebRTC 統計 API</a></li>
</ul>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('WebRTC 1.0')}}</td>
   <td>{{Spec2('WebRTC 1.0')}}</td>
   <td>WebRTC API の初期定義。</td>
  </tr>
  <tr>
   <td>{{SpecName('Media Capture')}}</td>
   <td>{{Spec2('Media Capture')}}</td>
   <td>メディアコンテンツのストリームを伝達するオブジェクトの初期定義。</td>
  </tr>
  <tr>
   <td>{{SpecName('Media Capture DOM Elements')}}</td>
   <td>{{Spec2('Media Capture DOM Elements')}}</td>
   <td>DOM 要素からコンテンツのストリームを取得する方法の初期定義。</td>
  </tr>
 </tbody>
</table>

<p>これらの API 仕様に加えて、Web RTC は <a href="#Protocols">リソース</a> に示されているさまざまなプロトコルを用いる必要があります。</p>

<h2 id="See_also" name="See_also">関連項目</h2>

<ul>
 <li>{{DOMxRef("MediaDevices")}}</li>
 <li>{{DOMxRef("MediaStreamEvent")}}</li>
 <li>{{DOMxRef("MediaStreamConstraints")}}</li>
 <li>{{DOMxRef("MediaStreamTrack")}}</li>
 <li>{{DOMxRef("MessageEvent")}}</li>
 <li>{{DOMxRef("MediaStream")}}</li>
 <li><a href="https://hacks.mozilla.org/2015/06/firefox-multistream-and-renegotiation-for-jitsi-videobridge/">Firefox multistream and renegotiation for Jitsi Videobridge</a></li>
 <li><a href="https://hacks.mozilla.org/2015/04/peering-through-the-webrtc-fog-with-socketpeer/">SocketPeer を使った WebRTC Fog の中のピアリング</a></li>
 <li><a href="https://hacks.mozilla.org/2014/04/inside-the-party-bus-building-a-web-app-with-multiple-live-video-streams-interactive-graphics/">Inside the Party Bus: 複数のライブビデオストリーム＋インタラクティブグラフィックスを使ったWebアプリの構築</a></li>
</ul>