The RTCPeerConnection
interface represents a WebRTC connection and handles efficient streaming of data between two peers.
var PeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; var SessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription; var GET_USER_MEDIA = navigator.getUserMedia ? "getUserMedia" : navigator.mozGetUserMedia ? "mozGetUserMedia" : navigator.webkitGetUserMedia ? "webkitGetUserMedia" : "getUserMedia"; var v = document.createElement("video"); var SRC_OBJECT = 'srcObject' in v ? "srcObject" : 'mozSrcObject' in v ? "mozSrcObject" : 'webkitSrcObject' in v ? "webkitSrcObject" : "srcObject";
Basic RTCPeerConnection usage involves negotiating a connection between your local machine and a remote one by generating Session Description Protocol to exchange between the two. i.e. The caller sends an offer. The called party responds with an answer. Both parties, the caller and the called party, need to set up their own RTCPeerConnection objects initially:
var pc = new RTCPeerConnection(); pc.onaddstream = function(obj) { var vid = document.createElement("video"); document.appendChild(vid); vid.srcObject = obj.stream; } // Helper functions function endCall() { var videos = document.getElementsByTagName("video"); for (var i = 0; i < videos.length; i++) { videos[i].pause(); } pc.close(); } function error(err) { endCall(); }
If you are the one initiating the initial connection you would call:
// Get a list of friends from a server // User selects a friend to start a peer connection with navigator.getUserMedia({video: true}, function(stream) { pc.onaddstream({stream: stream}); // Adding a local stream won't trigger the onaddstream callback pc.addStream(stream); pc.createOffer(function(offer) { pc.setLocalDescription(new RTCSessionDescription(offer), function() { // send the offer to a server to be forwarded to the friend you're calling. }, error); }, error); }
On the opposite end, the friend will receive the offer from the server.
var offer = getOfferFromFriend(); navigator.getUserMedia({video: true}, function(stream) { pc.onaddstream({stream: stream}); pc.addStream(stream); pc.setRemoteDescription(new RTCSessionDescription(offer), function() { pc.createAnswer(function(answer) { pc.setLocalDescription(new RTCSessionDescription(answer), function() { // send the answer to a server to be forwarded back to the caller (you) }, error); }, error); }, error); }
Back on the original machine, you'll receive the response, and set it as the remote connection
// pc was set up earlier when we made the original offer var offer = getResponseFromFriend(); pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error);
This interface inherits properties from its parent element, EventTarget
.
RTCPeerConnection.iceConnectionState
Read only
RTCIceConnectionState
that describes the ICE connection state for the connection. When this value changes, a
iceconnectionstatechange
event is fired on the object. The possible values are:
"new"
: the ICE agent is gathering addresses or waiting for remote candidates (or both)."checking"
: the ICE agent has remote candidates, on at least one component, and is check them, though it has not found a connection yet. At the same time, it may still be gathering candidates."connected"
: the ICE agent has found a usable connection for each component, but is still testing more remote candidates for a better connection. At the same time, it may still be gathering candidates."completed"
: the ICE agent has found a usable connection for each component, and is no more testing remote candidates."failed"
: the ICE agent has checked all the remote candidates and didn't find a match for at least one component. Connections may have been found for some components."disconnected"
: liveness check has failed for at least one component. This may be a transient state, e. g. on a flaky network, that can recover by itself."closed"
: the ICE agent has shutdown and is not answering to requests.RTCPeerConnection.iceGatheringState
Read only
RTCIceGatheringState
that describes the ICE gathering state for the connection. The possible values are:
"new"
: the object was just created, and no networking has occurred yet."gathering"
: the ICE engine is in the process of gathering candidates for this connection."complete"
: the ICE engine has completed gathering. Events such as adding a new interface or a new TURN server will cause the state to go back to gathering.RTCPeerConnection.localDescription
Read only
RTCSessionDescription
describing the session for the local end of the connection. If it has not yet been set, it can be
null
.
RTCPeerConnection.peerIdentity
Read only
RTCIdentityAssertion
, that is a couple of a domain name (
idp
) and a name (
name
) representing the identity of the remote peer of this connection, once set and verified. If no peer has yet been set and verified, this property will return
null
. Once set, via the appropriate method, it can't be changed.
RTCPeerConnection.remoteDescription
Read only
RTCSessionDescription
describing the session for the remote end of the connection. If it has not yet been set, it can be
null
.
RTCPeerConnection.signalingState
Read only
RTCSignalingState
that describes the signaling state of the local connection. This state describes the SDP offer, that defines the configuration of the connections like the description of the locally associated objects of type
MediaStream
, the codec/RTP/RTCP options, the candidates gathered by the ICE Agent. When this value changes, a
signalingstatechange
event is fired on the object. The possible values are:
"stable"
: there is no SDP offer/answer exchange in progress. This is also the initial state of the connection."have-local-offer"
: the local end of the connection has locally applied a SDP offer."have-remote-offer"
: the remote end of the connection has locally applied a SDP offer."have-local-pranswer"
: a remote SDP offer has been applied, and a SDP pranswer applied locally."have-remote-pranswer":
a local SDP offer has been applied, and a SDP pranswer applied remotely."closed"
: the connection is closed.RTCPeerConnection.onaddstream
addstream
event is received. Such an event is sent when a
MediaStream
is added to this connection by the remote peer. The event is sent immediately after the call
RTCPeerConnection.setRemoteDescription()
and doesn't wait for the result of the SDP negotiation.
RTCPeerConnection.ondatachannel
datachannel
event is received. Such an event is sent when a
RTCDataChannel
is added to this connection.
RTCPeerConnection.onicecandidate
icecandidate
event is received. Such an event is sent when a
RTCICECandidate
object is added to the script.
RTCPeerConnection.oniceconnectionstatechange
iceconnectionstatechange
event is received. Such an event is sent when the value of
iceConnectionState
changes.
RTCPeerConnection.onidentityresult
identityresult
event is received. Such an event is sent when an identity assertion is generated, via
getIdentityAssertion()
, or during the creation of an offer or an answer.
RTCPeerConnection.onidpassertionerror
idpassertionerror
event is received. Such an event is sent when the associated identity provider (IdP) encounters an error while generating an identity assertion.
RTCPeerConnection.onidpvalidationerror
idpvalidationerror
event is received. Such an event is sent when the associated identity provider (IdP) encounters an error while validating an identity assertion.
RTCPeerConnection.onnegotiationneeded
negotiationneeded
event, sent by the browser to inform that negotiation will be required at some point in the future, is received.
RTCPeerConnection.onpeeridentity
peeridentity
event, sent when a peer identity has been set and verified on this connection, is received.
RTCPeerConnection.onremovestream
removestream
event, sent when a
MediaStream
is removed from this connection, is received.
RTCPeerConnection.onsignalingstatechange
signalingstatechange
event, sent when the value of
signalingState
changes, is received.
RTCPeerConnection()
RTCPeerConnection.createOffer()
RTCPeerConnection.createAnswer()
RTCPeerConnection.setLocalDescription()
RTCSessionDescription
object to set, and two callbacks, one called if the change of description succeeds, another called if it failed.
RTCPeerConnection.setRemoteDescription()
RTCSessionDescription
object to set, and two callbacks, one called if the change of description succeeds, another called if it failed.
RTCPeerConnection.updateIce()
RTCPeerConnection.addIceCandidate()
RTCPeerConnection.getConfiguration()
RTCPeerConnection.getLocalStreams()
MediaStream
associated with the local end of the connection. The array may be empty.
RTCPeerConnection.getRemoteStreams()
MediaStream
associated with the remote end of the connection. The array may be empty.
RTCPeerConnection.getStreamById()
MediaStream
with the given id that is associated with local or remote end of the connection. If no stream matches, it returns
null
.
RTCPeerConnection.addStream()
MediaStream
as a local source of audio or video. If the negotiation already happened, a new one will be needed for the remote peer to be able to use it.
RTCPeerConnection.removeStream()
MediaStream
as a local source of audio or video. If the negotiation already happened, a new one will be needed for the remote peer to stop using it.
RTCPeerConnection.close()
RTCPeerConnection.createDataChannel()
RTCDataChannel
associated with this connection. The method takes a dictionary as parameter, with the configuration required for the underlying data channel, like its reliability.
RTCPeerConnection.createDTMFSender()
RTCDTMFSender
, associated to a specific
MediaStreamTrack
, that will be able to send DTMF phone signaling over the connection.
RTCPeerConnection.getStats()
RTCStatsReport
that contains and allows access to statistics regarding the connection.
RTCPeerConnection.setIdentityProvider()
RTCPeerConnection.getIdentityAssertion()
signalingState
is not
"closed"
. It is not expected for the application dealing with the
RTCPeerConnection
: this is automatically done; an explicit call only allows to anticipate the need.
new RTCPeerConnection(RTCConfiguration configuration, optional MediaConstraints constraints);
Note: While the PeerConnection specification reads like passing an RTCConfiguration object is required, Firefox will supply a default if you don't.
void createOffer(
RTCSessionDescriptionCallback
successCallback,RTCPeerConnectionErrorCallback
failureCallback, optional MediaConstraints
constraints);
Create offer generates a blob of description data to facilitate a PeerConnection to the local machine. Use this when you've got a remote Peer connection and you want to set up the local one.
var pc = new PeerConnection(); pc.addStream(video); pc.createOffer(function(desc){ pc.setLocalDescription(desc, function() { // send the offer to a server that can negotiate with a remote client }); }
RTCSessionDescriptionCallback
which will be passed a single
RTCSessionDescription
object
RTCPeerConnectionErrorCallback
which will be passed a single
DOMError
object
MediaConstraints
object.
void createAnswer(
RTCSessionDescriptionCallback
successCallback,RTCPeerConnectionErrorCallback
failureCallback, optional MediaConstraints
constraints)")
Respond to an offer sent from a remote connection.
var pc = new PeerConnection(); pc.setRemoteDescription(new RTCSessionDescription(offer), function() { pc.createAnswer(function(answer) { pc.setLocalDescription(answer, function() { // send the answer to the remote connection }) }) });
RTCSessionDescriptionCallback
which will be passed a single
RTCSessionDescription
object
RTCPeerConnectionErrorCallback
which will be passed a single
DOMError
object
MediaConstraints
object.
updateIce(optional RTCConfiguration
configuration, optional MediaConstraints
constraints)
The updateIce method updates the ICE Agent process of gathering local candidates and pinging remote candidates. If there is a mandatory constraint called "IceTransports" it will control how the ICE engine can act. This can be used to limit the use to TURN candidates by a callee to avoid leaking location information prior to the call being accepted. This call may result in a change to the state of the ICE Agent, and may result in a change to media state if it results in connectivity being established.
addIceCandidate (RTCIceCandidate
candidate, Function
successCallback,RTCPeerConnectionErrorCallback
failureCallback);
The addIceCandidate() method provides a remote candidate to the ICE Agent. In addition to being added to the remote description, connectivity checks will be sent to the new candidates as long as the "IceTransports" constraint is not set to "none". This call will result in a change to the connection state of the ICE Agent, and may result in a change to media state if it results in different connectivity being established.
pc.addIceCandidate(new RTCIceCandidate(candidate));
RTCDataChannel
createDataChannel (DOMString
label, optional RTCDataChannelInit
dataChannelDict);
Creates a data channel for sending non video or audio data across the peer connection
var pc = new PeerConnection(); var channel = pc.createDataChannel("Mydata"); channel.onopen = function(event) { channel.send('sending a message'); } channel.onmessage = function(event) { console.log(event.data); }