What is WebRTC?

In the conventional video communication, people often need to use a third-party server as a transit, such as B and B want to communicate through the video, then they need to establish a channel with the third-party server, A and the server to establish a channel, B, and the server to establish a channel. As a result, both sides of the video fluency will be and third-party server channel bandwidth between the restrictions, when multiplayer video, the communication efficiency will be greatly limited. People want to have a third-party server without a point-to-point direct transmission of video data protocol, so with the WebRTC. WebRTC, an abbreviation derived from web real-time communication, is an API that supports web browsers for real-time voice conversations or video conversations. It was opened on June 1, 2011, and was included in the W3C Recommendation of the World Wide Web Consortium under the auspices of Google, the Mozilla Foundation, and Opera. WebRTC has the following components

1. Video Engine (VideoEngine)
2. Audio Engine (VoiceEngine)
3. Conference Management
4. iSAC: Audio compression
5. VP8: Video codec for Google’s own WebM project
6. APIs (Native C ++ API, Web API)

Explore WebRTC

WebRTC mainly implements three categories of interfaces:

• MediaStream: Through the MediaStream API through the device’s camera and microphone to get video, audio synchronization stream
• RTCPeerConnection: RTCPeerConnection is a component of WebRTC used to build stable and efficient streaming between point-to-point
• RTCDataChannel: RTCDataChannel enables a high-throughput, low-latency channel between browsers (point-to-point) to transfer arbitrary data

These three types of interfaces are responsible for three main directions: – MediaStreamResponsible for obtaining the audio and video streams of the unit – RTCPeerConnectionresponsible for establishing an effective and stable point-to-point connection – RTCDataChannelresponsible for transmitting data

To create a WebRTC connection, you need to complete the above three steps, the following look at the specific implementation steps.

MediaStream

To access the native camera and microphone, you need to get the native MediaStream

var streamToAttach;
navigator.webkitGetUserMedia({ audio: true, video: true }, function (stream) {
video.src = webkitURL.createObjectURL(stream);
streamToAttach = stream;
}, function(error) {
alert(error);
});

Firefox interface name is different:

code code=”javascript”>
var streamToAttach;
navigator.mozGetUserMedia({ audio: true, video: true }, function (stream) {
video.mozSrcObject = stream;
video.play();
streamToAttach = stream;
}, function(error) {
alert(error);
});
</code>

PeerConnection

WebRTC uses the PeerConnection interface to create a point-to-point connection. Let’s start by creating a Peer

var peerConnection = new webkitRTCPeerConnection(
{ “iceServers”: [{ “url”: “stun:stun.l.google.com:19302” }] }
);

We can use Google’s STUN server: stun:stun.l.google.com:19302Firefox use mozRTCPeerConnectionand then set the peer object event handler:

peerConnection.onicecandidate = onicecandidate;
peerConnection.onaddstream = onaddstream;
peerConnection.addStream (streamToAttach);

As a video request originator, issue a video request:

<pre>

peerConnection.createOffer(function (sessionDescription) { peerConnection.setLocalDescription(sessionDescription);</p><pre><code>

}, function(error) { alert(error); }, { ‘mandatory’: { ‘OfferToReceiveAudio’: true, ‘OfferToReceiveVideo’: true } });

As a responder, you need to process the requestor’s SDP and send its own response to SDP:

peerConnection.setRemoteDescription(new RTCSessionDescription(offerSDP));

peerConnection.createAnswer(function (sessionDescription) { peerConnection.setLocalDescription(sessionDescription);

}, function(error) { alert(error); }, { ‘mandatory’: { ‘OfferToReceiveAudio’: true, ‘OfferToReceiveVideo’: true } });

peerConnection.setRemoteDescription(new RTCSessionDescription(answerSDP));
&lt;/pre>&lt;/p>

&lt;p>&lt;p></code></p>

<h3>RTCDataChannel</h3>

<p>RTCDataChannel<code>DataChannel</code><code>PeerConnection</code> You can create a RTCDataChannel with the createDataCHannel method on the peer object</p>

<pre><code code=”javascript”>
channel = pc.createDataCHannel(“someLabel”);