- Getting Started with WebRTC
- Rob Manson
- 686字
- 2021-08-04 10:05:19
RTCPeerConnection API
The RTCPeerConnection API is the heart of the peer-to-peer connection between each of the WebRTC enabled browsers or peers. To create an RTCPeerConnection object, you use the var peerconnection = RTCPeerConnection(configuration); constructor. The configuration variable contains at least one key named iceServers, which is an array of URL objects that contain information about STUN, and possibly TURN servers, used during the finding candidates phase.
The peerconnection object is then used in slightly different ways on each client, depending upon whether you are the caller or the callee.
The caller's flow
Here's a summary of the caller's flow after the peerconnection object is created:
- Register the
onicecandidatehandler - Register the
onaddstreamhandler - Register the
messagehandler - Use getUserMedia to access the local camera
- The JSEP offer/answer process
Register the onicecandidate handler
First, you register an onicecandidate handler that sends any ICE candidates to the other peer, as they are received using one of the signaling channels described previously.
Register the onaddstream handler
Then, you register an onaddstream handler that displays the video stream once it is received from the remote peer.
Register the message handler
Your signaling channel should also have a handler registered that responds to messages received from the other peer. If the message contains an RTCIceCandidate object, it should add those to the peerconnection object using the addIceCandidate() method. And if the message contains an RTCSessionDescription object, it should add those to the peerconnection object using the setRemoteDescription() method.
Use getUserMedia to access the local camera
Then, you can utilize getUserMedia() to set up your local media stream and display that on your local page, and also add it to the peerconnection object using the addStream() method.
The JSEP offer/answer process
Now, you are ready to start the negotiation using the createOffer() method and registering a callback handler that receives an RTCSessionDescription object. This callback handler should then add this RTCSessionDescription to your peerconnection object using setLocalDescription(). And then finally, it should also send this RTCSessionDescription to the remote peer through your signaling channel.
The callee's flow
The following is a summary of the callee's flow, which is very similar in a lot of ways to the caller's flow, except that it responds to the offer with an answer:
- Register the
onicecandidatehandler - Register the
onaddstreamhandler - Register the
messagehandler - Use getUserMedia to access the local camera
- The JSEP offer/answer process
Register the onicecandidate handler
Just like the caller, you start by registering an onicecandidate handler that sends any ICE candidates to the other peer as they are received, using one of the signaling channels described previously.
Register the onaddstream handler
Then, like the caller, you register an onaddstream handler that displays the video stream once it is received from the remote peer.
Register the message handler
Like the caller, your signaling channel should also have a handler registered that responds to messages received from the other peer. If the message contains an RTCIceCandidate object, it should add those to the peerconnection object using the addIceCandidate() method. And if the message contains an RTCSessionDescription object, it should add those to the peerconnection object using the setRemoteDescription() method.
Use getUserMedia to access the local camera
Then, like the caller, you can utilize getUserMedia() to set up your local media stream and display that on your local page, and also add it to the peerconnection object using the addStream() method.
The JSEP offer/answer process
Here you differ from the caller and you play your part in the negotiation by passing remoteDescription to the createAnswer() method and registering a callback handler that receives an RTCSessionDescription object. This callback handler should then add this RTCSessionDescription to your peerconnection object using setLocalDescription() . And then finally, it should also send this RTCSessionDescription to the remote peer through your signaling channel. It is also important to note that this callee flow is all initiated after the offer is received from the caller.
Where does RTCPeerConnection sit?
The following diagram shows the overall WebRTC architecture from the www.WebRTC.org site. It shows you the level of complexity that is hidden below the RTCPeerConnection API.
Overall architecture diagram from www.WebRTC.org