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

---
title: WebRTC API
slug: Web/API/WebRTC_API
translation_of: Web/API/WebRTC_API
---
<div>{{APIRef("WebRTC")}}</div>

<p><span class="seoSummary"><strong>WebRTC</strong> (<em>Web Real-Time Communications</em>) merupakan teknologi yang memungkinkan situs dan aplikasi berbasis web menangkap dan mengirimkan audio atau video, serta bertukar data antar peramban web tanpa memerlukan adanya perantara.</span> Kumpulan standar di dalam WebRTC membuat pertukaran data dan telekonferensi secara <em>peer-to-peer</em> dapat terjadi tanpa perlu memasang <em>plugins</em> atau aplikasi pihak ketiga.</p>

<p>WebRTC terdiri dari berbagai API dan protokol yang saling terkait sehingga dapat bekerja sebagaimana mestinya. Dokumentasi ini akan membantu anda untuk memahami dasar-dasar WebRTC, bagaimana mengatur dan menggunakan sambungan data dan media, serta hal lainnya.</p>

<h2 id="Konsep_dan_cara_penggunaan_WebRTC">Konsep dan cara penggunaan WebRTC</h2>

<p>WebRTC memiliki beberapa fungsi, begitu halnya juga dengan <em>Media Capture and Streams</em> ({{domxref("MediaDevices")}}) API. Keduanya menghadirkan kemampuan multimedia di dalam web, misalnya audio dan video <em>conferencing</em>, pertukaran <em>file</em>, <em>identity management</em>, serta interaksi pada jaringan telepon dengan cara mengirimkan sinyal {{Glossary("DTMF")}}. Sambungan antar <em>peer</em> dapat terbentuk tanpa <em>plugins</em> tambahan, dan sering kali dapat terbentuk tanpa memerlukan <em>server</em> perantara.</p>

<p>Sambungan antar <em>peer</em> dibuat menggunakan - dan direpresentasikan oleh - {{domxref("RTCPeerConnection")}}. Ketika sebuah sambungan telah terbentuk dan terbuka, <em>stream</em> media ({{domxref("MediaStream")}}) atau <em>channel</em> data ({{domxref("RTCDataChannel")}}) dapat ditambahkan ke dalam sambungan <em>peer</em>.</p>

<p><em>Stream</em> media terdiri dari beberapa <em>track</em> media, yang direpresentasikan oleh sebuah objek {{domxref("MediaStreamTrack")}}, yang berisi salah satu tipe media, yaitu audio, video, dan teks (misalnya <em>subtitle</em> atau nama judul). Umumnya <em>stream</em> terdiri dari setidaknya satu <em>track</em> audio bahkan juga satu <em>track</em> video, dan dapat digunakan untuk mengirim dan menerima media secara <em>live</em> atau dapat berupa rekaman media (misalnya <em>streaming</em> film).</p>

<p>Anda juga dapat menggunakan sambungan antar <em>peer</em> untuk bertukar sembarang data biner menggunakan {{domxref("RTCDataChannel")}}. Sambungan ini dapat digunakan untuk informasi <em>back-channel</em>, <em>metadata</em>, <em>gaming</em>, <em>file transfer</em>, bahkan sebagai jalur utama pertukaran data.</p>

<p><em><strong>artikel ini memerlukan informasi yang lebih lanjut serta tautan untuk panduan dan tutorial yang relevan</strong></em></p>

<h2 id="WebRTC_interfaces">WebRTC interfaces</h2>

<p>Because WebRTC provides interfaces that work together to accomplish a variety of tasks, we have divided up the interfaces in the list below by category. Please see the sidebar for an alphabetical list.</p>

<h3 id="Connection_setup_and_management">Connection setup and management</h3>

<p>These interfaces are used to set up, open, and manage WebRTC connections.</p>

<dl>
 <dt>{{domxref("RTCPeerConnection")}}</dt>
 <dd>Represents a WebRTC connection between the local computer and a remote peer. It is used to handle efficient streaming of data between the two peers.</dd>
 <dt>{{domxref("RTCDataChannel")}}</dt>
 <dd>Represents a bi-directional data channel between two peers of a connection.</dd>
 <dt>{{domxref("RTCDataChannelEvent")}}</dt>
 <dd>Represents events that occur while attaching a {{domxref("RTCDataChannel")}} to a {{domxref("RTCPeerConnection")}}. The only event sent with this interface is {{event("datachannel")}}.</dd>
 <dt>{{domxref("RTCSessionDescription")}}</dt>
 <dd>Represents the parameters of a session. Each <code>RTCSessionDescription</code> consists of a description <a href="/en-US/docs/Web/API/RTCSessionDescription/type" title="The property RTCSessionDescription.type is an enum of type RTCSdpType describing the description's type."><code>type</code></a> indicating which part of the offer/answer negotiation process it describes and of the <a href="/en-US/docs/Glossary/SDP" title="SDP: SDP (Session Description Protocol) is the standard describing a peer-to-peer connection. SDP contains the codec, source address, and timing information of audio and video.">SDP</a> descriptor of the session.</dd>
 <dt>{{domxref("RTCStatsReport")}}</dt>
 <dd>Provides information detailing statistics for a connection or for an individual track on the connection; the report can be obtained by calling {{domxref("RTCPeerConnection.getStats()")}}.</dd>
 <dt>{{domxref("RTCIceCandidate")}}</dt>
 <dd>Represents a candidate internet connectivity establishment (ICE) server for establishing an {{domxref("RTCPeerConnection")}}.</dd>
 <dt>{{domxref("RTCIceTransport")}}</dt>
 <dd>Represents information about an internet connectivity establishment (ICE) transport.</dd>
 <dt>{{domxref("RTCPeerConnectionIceEvent")}}</dt>
 <dd>Represents events that occurs in relation to ICE candidates with the target, usually an {{domxref("RTCPeerConnection")}}. Only one event is of this type: {{event("icecandidate")}}.</dd>
 <dt>{{domxref("RTCRtpSender")}}</dt>
 <dd>Manages the encoding and transmission of data for a {{domxref("MediaStreamTrack")}} on an {{domxref("RTCPeerConnection")}}.</dd>
 <dt>{{domxref("RTCRtpReceiver")}}</dt>
 <dd>Manages the reception and decoding of data for a {{domxref("MediaStreamTrack")}} on an {{domxref("RTCPeerConnection")}}.</dd>
 <dt>{{domxref("RTCTrackEvent")}}</dt>
 <dd>Indicates that a new incoming {{domxref("MediaStreamTrack")}} was created and an associated {{domxref("RTCRtpReceiver")}} object was added to the {{domxref("RTCPeerConnection")}} object.</dd>
</dl>

<h3 id="Identity_and_security">Identity and security</h3>

<p>The WebRTC API includes a number of interfaces to manage security and identity.</p>

<dl>
 <dt>{{domxref("RTCIdentityProvider")}}</dt>
 <dd>Enables a user agent is able to request that an identity assertion be generated or validated.</dd>
 <dt>{{domxref("RTCIdentityAssertion")}}</dt>
 <dd>Represents the identity of the a remote peer of the current connection. If no peer has yet been set and verified this interface returns <code>null</code>. Once set it can't be changed.</dd>
 <dt>{{domxref("RTCIdentityProviderRegistrar")}}</dt>
 <dd>Registers an  identity provider (idP).</dd>
 <dt>{{domxref("RTCIdentityEvent")}}</dt>
 <dd>Represents an identity assertion generated by an identity provider (idP). This is usually for an {{domxref("RTCPeerConnection")}}. The only event sent with this type is {{event("identityresult")}}.</dd>
 <dt>{{domxref("RTCIdentityErrorEvent")}}</dt>
 <dd>Represents an error associated with the identity provider (idP). This is usually for an {{domxref("RTCPeerConnection")}}. Two events are sent with this type: {{event("idpassertionerror")}} and {{event("idpvalidationerror")}}.</dd>
 <dt>{{domxref("RTCCertificate")}}</dt>
 <dd>Represents a certificate that an {{domxref("RTCPeerConnection")}} uses to authenticate.</dd>
</dl>

<h3 id="Telephony">Telephony</h3>

<p>These interfaces are related to interactivity with public-switched telephone networks (PTSNs).</p>

<dl>
 <dt>{{domxref("RTCDTMFSender")}}</dt>
 <dd>Manages the encoding and transmission of dual-tone multi-frequency (DTMF) signaling for an {{domxref("RTCPeerConnection")}}.</dd>
 <dt>{{domxref("RTCDTMFToneChangeEvent")}}</dt>
 <dd>Indicates an occurrence of a of dual-tone multi-frequency (DTMF). This event does not bubble (except where otherwise stated) and is not cancelable (except where otherwise stated).</dd>
</dl>

<h2 id="Guides">Guides</h2>

<dl>
 <dt><a href="/en-US/docs/Web/API/WebRTC_API/Protocols">Introduction to WebRTC protocols</a></dt>
 <dd>This article introduces the protocols on top of which the WebRTC API is built.</dd>
 <dt><a href="/en-US/docs/Web/API/WebRTC_API/Connectivity">WebRTC connectivity</a></dt>
 <dd>A guide to how WebRTC connections work and how the various protocols and interfaces can be used together to build powerful communication apps.</dd>
 <dt><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></dt>
 <dd>WebRTC lets you build peer-to-peer communication of arbitrary data, audio, or video—or any combination thereof—into a browser application. In this article, we'll look at the lifetime of a WebRTC session, from establishing the connection all the way through closing the connection when it's no longer needed.</dd>
 <dt><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and two-way video calling</a></dt>
 <dd>A tutorial and example which turbs a WebSocket-based chat system created for a previous example and adds support for opening video calls among participants. The chat server's WebSocket connection is used for WebRTC signaling.</dd>
 <dt><a href="/en-US/docs/Web/API/WebRTC_API/Using_data_channels">Using WebRTC data channels</a></dt>
 <dd>This guide covers how you can use a peer connection and an associated {{domxref("RTCDataChannel")}} to exchange arbitrary data between two peers.</dd>
 <dt><a href="/en-US/docs/Web/API/WebRTC_API/Using_DTMF">Using DTMF with WebRTC</a></dt>
 <dd>WebRTC's support for interacting with gateways that link to old-school telephone systems includes support for sending DTMF tones using the {{domxref("RTCDTMFSender")}} interface. This guide shows how to do so.</dd>
</dl>

<h2 id="Tutorials">Tutorials</h2>

<dl>
 <dt><a href="/en-US/docs/Web/API/WebRTC_API/adapter.js">Improving compatibility using WebRTC adapter.js</a></dt>
 <dd>The WebRTC organization <a href="https://github.com/webrtc/adapter/">provides on GitHub the WebRTC adapter</a> to work around compatibility issues in different browsers' WebRTC implementations. The adapter is a JavaScript shim which lets your code to be written to the specification so that it will "just work" in all browsers with WebRTC support.</dd>
 <dt><a href="/en-US/docs/Web/API/WebRTC_API/Taking_still_photos">Taking still photos with WebRTC</a></dt>
 <dd>This article shows how to use WebRTC to access the camera on a computer or mobile phone with WebRTC support and take a photo with it.</dd>
 <dt><a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">A simple RTCDataChannel sample</a></dt>
 <dd>The {{domxref("RTCDataChannel")}} interface is a feature which lets you open a channel between two peers over which you may send and receive arbitrary data. The API is intentionally similar to the <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a>, so that the same programming model can be used for each.</dd>
</dl>

<h2 id="Resources">Resources</h2>

<h3 id="Protocols">Protocols</h3>

<h4 id="WebRTC-proper_protocols">WebRTC-proper protocols</h4>

<ul>
 <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/"><cite>Application Layer Protocol Negotiation for Web Real-Time Communications</cite></a></li>
 <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/"><cite>WebRTC Audio Codec and Processing Requirements</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>Web Real-Time Communication (WebRTC): Media Transport and Use of RTP</cite></a></li>
 <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/"><cite>WebRTC Security Architecture</cite></a></li>
 <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/"><cite>Transports for RTCWEB</cite></a></li>
</ul>

<h4 id="Related_supporting_protocols">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></li>
</ul>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('WebRTC 1.0')}}</td>
   <td>{{Spec2('WebRTC 1.0')}}</td>
   <td>The initial definition of the API of WebRTC.</td>
  </tr>
  <tr>
   <td>{{SpecName('Media Capture')}}</td>
   <td>{{Spec2('Media Capture')}}</td>
   <td>The initial definition of the object conveying the stream of media content.</td>
  </tr>
  <tr>
   <td>{{SpecName('Media Capture DOM Elements')}}</td>
   <td>{{Spec2('Media Capture DOM Elements')}}</td>
   <td>The initial definition on how to obtain stream of content from DOM Elements</td>
  </tr>
 </tbody>
</table>

<p>In additions to these specifications defining the API needed to use WebRTC, there are several protocols, listed under <a href="#Protocols">resources</a>.</p>

<h2 class="Related_Topics" id="See_also">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/">Peering Through the WebRTC Fog with SocketPeer</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: Building a Web App with Multiple Live Video Streams + Interactive Graphics</a></li>
</ul>