WEBRTC First Article

1. Introduction

It is well known that the browser itself does not support the direct establishment of communication channels between each other through the server to relay. For example, there are now two clients, A and B, they want to communicate, first need a and server, B and server to establish a channel between. A to send a message to B, a first send the message to the server, the server to a message to relay, sent to B, the reverse is the same. So a message between A and b through two channels, the efficiency of communication is subject to the bandwidth of both channels. At the same time such a channel is not suitable for the transmission of data flow, how to establish a point-to-point transmission between browsers, has plagued the developers. WebRTC was born

Ref: 1190000000436544

A browser opens url:http://localhost/1.html, we call it a client, another browser opens the same URL, we call her a B client.

Now it is necessary for a client to send a message to the B client.

The simplest method is that a client sends a message to the server, and the server relays a message to B. The usual way for the server to send messages to clients is to use websocket technology. The client and the server establish a WebSocket connection, and the server forwards the message to the client.

// websocket Connection        to the signaling server var New WebSocket ("ws://127.0.0.1:3000");

Such a channel is not suitable for transmission of data streams, such as audio and video. WEBRTC mainly resolves a client to send audio and video to the B client.

2. Steps

1) 获取本地音频和视频流， Createoffer get SDP information.

//get local audio and video streamsNavigator.webkitgetusermedia ({"Audio":true,            "Video":true        }, function(stream) {//bind the media stream to the video tag for outputdocument.getElementById (' Localvideo '). src =Url.createobjecturl (stream); //adding a stream to the peerconnection that needs to be sentPc.addstream (stream); //Send an offer letter if it is the initiator            if(Iscaller) {Pc.createoffer (SENDOFFERFN,function(Error) {Console.log (' Failure callback: ' +error);            }); }        }, function(Error) {//Handling Media Stream creation failure ErrorsConsole.log (' Getusermedia error: ' +error); });

2) A client Createoffer obtains the SDP information to the B client via the server. WebSocket is usually used.

3) b Client Createanswer establish a connection to the a client.

// if it is an offer, then you need to reply to a answer                if (Json.event = = = "_offer")                    {function  (error) {                        console.log (' Failure callback: ' + ( error);                    });                }

Similarly to the Ios,android client, a client 获取本地音频和视频流， obtains the SDP information, which is sent to the B client via XMPP,MQTT technology.

About the Ice,stun server I did not mention.

Information:

http://blog.gopersist.com/2014/10/21/webrtc-simple/

1190000000436544

WEBRTC First Article