WebRTC – Walk through RTCPeerConnection API

This is one of the another post in WebRTC technology series . If your new to this technology , please  go through the previous post about introduction of webRTC in modern browser and getusermeda( ) API of WebRTC .

RTCPeerconnection is one of the another WebRTC components that helps to communicate between the peer users .The creation of RTCPeerconnection is defined by

Var peerobj = new RTCPeerConnection(config) 

Where config parameter contains IceServers . What is IceServer ? IceServer is a array which contains the Information about STUN and TURN Server . These STUN and TURN server are used to find the ICE candidate in WebRTC . You can get the list of Google Public STUN and TURN server .

Basic Steps of WebRTC RTCPeerConnection

Now let’s explain the basic flow of PeerConnection with a simple example . Lets consider there are two user User 1 and User 2 . User 1 is acting as local stream of the connection ( Caller ) and User 2 is acting as remote stream of the connection ( Callee ) . ie:) User 1 is trying to call User 2 .

Now as per WebRTC standard we can write the basic steps of both Caller and Callee as

Caller

• Caller will create a new RTCPeerconnection object and add his local stream using getUserMedia( ) API .
• Next we need to create an offer request and set it as a local description of User 1 . This local description of the User 1 is act as the remote description of User 2 ( Callee ) . This is very important step in WebRTC . We will achieve this step through signaling process .

Callee

• Callee will create his RTCPeerconnection object in another end and wait for the caller stream (remote Stream) . When the stream from caller ( local stream of User 1 ) is arrived , then it displays in the the video element of callee web page.

Complete user flow of the WebRTC Peer connection

These are main steps in WebRTC Peer Connection process .

• Send the ICECandidate to the peer with onicecandidate handler .
• Display the video stream in web page with onaddstream handler when the remote stream available .
• Using message handler you need to differentiate each messages. If the message contain RTCSessionDescription object , it should add to the RTCPeerConnection object with setRemoteDescription( ) method . If the message contain RTCIceCandidate object , it should be added to the RTCPeerconnection object with addIceCandidate( ) method .
• Using getuserMedia( ) API add the local stream to the RTCPeerconnection object with addStream( ) method .
• Process offer/answer request . Caller register a callback for RTCSessionDescription with createoffer( ) method . This callback add the RTCSessionDescription of  RTCPeerConnnection object with SetLocalDescription( ) method . On other hand callee register same callback in createAnswer( ) method . This is initiated after the offer received from caller only.

If you are interested and you want to test with writing webRTC application from scratch , Just go though our posts ,  Write a WebRTC Application – Programming from scratch 

• Part 1 – How to Create a Simple App Like A Pro 
• Part 2 – Create a server with Node.js for the App
• Part 3 – Design your first WebRTC App

Conclusion

I think you got a complete overview of WebRTC architecture and it’s RTCPeerConnection API from this post . In Coming post , i will write about the RTC Peer functions and handlers with a simple Program .

If you have any feedback or tips , We are really happy to hear them . See you again !!

Recommended Posts

Introduction of WebRTC technology in Modern browsers WebRTC – Access user media with getUserMedia API

About the Author

Vinay KP is the founder of Engineering Semester blog . He is currently working as a software engineer . He is a very passionate blogger with Interest in research oriented technical articles .

You can contact via