With the emergence of media giants such as Netflix, Amazon, Spotify, and Disney+, the consumer demand for media streaming services has never been higher. As developers it’s important to be aware of market trends and the innovations that make them possible. It’s in this spirit that we developed ReactRTC as a means to explore the capabilities of WebRTC within the React library. But first, let’s talk about the intricacies of establishing WebRTC.
History of WebRTC
Web real-time communication, or WebRTC for short, was originally released in May of 2011 as an open-source tool for developing live browser-based communication between peers using a collection of APIs.
Before this technology existed, most real time communication over the internet was accomplished through the use of proprietary software and server hardware. Being open-sourced has enabled the wide-spread adoption of WebRTC as a connection tool for establishing peer-to peer connectivity.
How WebRTC works
WebRTC builds on a number of existing standards and protocols to enable real-time communications without the need of additional plugins. This makes the process extremely lightweight compared to its legacy competitors. The initial setup of WebRTC begins with an asynchronous process known as the “handshake”. In order to establish this peer-to-peer connection, a number of native browser APIs like RTCPeerConnection and GetUserMedia are leveraged throughout the connection phase. A high-level overview of this process follows below.
Step 1: Create a RTCPeerconnection
The first step in implementing WebRTC is to create a RTCPeerconnection through the invocation of the RTCPeerconnection( ) constructor. This creates an interface through which local and remote peers can establish each other’s existence and communicate to each other.
Step 2: Establish a local media stream.
In order to access the video and audio capabilities of our local device, we utilize the getUserMedia API as a gateway to the local environment. Invoking getUserMedia( ) will prompt the user for permission to access these devices.
Step 3: Create an SDP offer
After establishing an RTCPeerconnection interface and the local user’s media stream is added, the RTCPeerConnection.addTrack() is invoked. This triggers the handleNegotiationNeededEvent( ), prompting the RTCPeerconnection to begin the Session Description Process(SDP) by calling RTCPeerconnection.createOffer( ). This offer and answer process is necessary to negotiate the communication’s session parameters.
Step 4: Set Local description
After creating the offer, the process of setting the local description begins by calling RTCPeerconection.setLocalDescription( ). This method specifies the necessary connection at the local end, including media properties.
Step 5: Send “video-offer” or IceCandidate
After step 4 is completed a “video-offer” or ice candidate is sent to the peer through your signalling server of choice. (The signalling server is the messaging service of developer choice used to transmit the information contained in the handshake process. For ReactRTC, Websockets were utilized for this purpose).
Step 6: Handling the “answer”
After the peer successfully receives the “video-offer” a response will be generated and sent back through the signaling server known as the “video-answer”. This answer contains important information such as connection specs at the peer end as well as media properties.
When an answer is received, a handleVideoAnswer event is triggered thus prompting the local user’s code to set another session description taking into account the additional information received from the “video-answer”.
Step 7: Set Remote Description
After step 6 has completed the local users environment will invoke RTCPeerconnection.setRemoteDescription( ) which configures the local WebRTC layer to facilitate a connection between the local user and the peer.
If you’re interested in experimenting with WebRTC in React, we created the open sourced library ReactRTC as an open source tool for the developer community.
Checkout our Github, https://github.com/oslabs-beta/ReactRTC for more information!
Contributors:
Diane Wu: https://github.com/dianewudw
Edwin Lin: https://github.com/edwinlin
Joseph Wolensky: https://github.com/excelsiorHorizon
Michael Romero: https://github.com/MichaelSRomero