WebRTC is a point-to-point communication mechanism. After two clients establish an RTCPeerConnection connection, they communicate, and can send audio and video streams, and can also send messages, such as text and so on.
The process of sending streams is not complicated, the point is that the process of establishing a connection needs to be thoroughly understood. Generally, a signaling server is required for relay, which is equivalent to a background server. Multiple WebRTC clients use the signaling server as relay to establish point-to-point communication. Server is equivalent to the role of middleman.
Suppose there are client A, client B, and intermediary Server
The basic steps are as follows
A logs in to the Server, the login is successful, and A creates yourConn locally
B logs in to the Server, the login is successful, and B creates yourConn locally
A initiates a request to B, and generally needs to send an offer request first, which needs to contain B’s username information, and then send the signaling to the server
var callToUsername = callToUsernameInput.value;
if (callToUsername.length > 0) {
connectedUser = callToUsername;
// create an offer
yourConn.createOffer(function (offer) {
send({
type: "offer",
offer: offer
});
yourConn.setLocalDescription(offer);
}, function (error) {
alert("Error when creating an offer");
});
} The server detects whether B is online, and forwards the offer request to B when it is online
Client B receives the offer and answers A agrees to establish a connection
function handleOffer(offer, name) {
connectedUser = name;
yourConn.setRemoteDescription(new RTCSessionDescription(offer));
//create an answer to an offer
yourConn.createAnswer(function (answer) {
yourConn.setLocalDescription(answer);
send({
type: "answer",
answer: answer
});
}, function (error) {
alert("Error when creating an answer");
});
};It's easy to understand here, similar to making a phone call and answering. The key point is when to start a call. After another iceCandidate is processed between the users, both parties confirm that the other party is their own communication partner before starting to establish communication. Candidate information in WebRTC.
That is, when client A receives the onicecandidate signal, it sends a candidate request to client B through the server, and B remembers A's candidate information.
When client B receives the onicecandidate signal, it sends a candidate request to client A through the server, and A also remembers that B is the candidate information.
yourConn.onicecandidate = function (event) {
if (event.candidate) {
send({
type: "candidate",
candidate: event.candidate
});
}
};
}, function (error) {
console.log(error);
}); In layman's terms, each other regards themselves as candidates, tells each other, and the two parties exchange candidate information. After completing this step, the P2P connection is completed.
When I first read it, I didn't understand when to exchange candidate information. After searching and viewing the article, in fact, the onicecandidate signal is automatically triggered after B responds and A initiates an ICE Request
So the whole process is equivalent to this:
A initiates an offer request and informs B that I am your candidate
B receives the offer request, and then replies to A. After replying, he also informs A that I am the candidate.
After the two parties exchange candidate information, a connection is established. From the perspective of the Web, this is the case. If you go deep into the C++ level, it will be very complicated. Since two machines on the intranet are point-to-point, it is necessary to perform NAT penetration and query the other party's IP through the intermediate signaling server.
So far, RTCSessionDescription will automatically complete the work of sending audio and video streams.
Bind the callback of the received stream and display the original stream.
In WebRTC, both the sender and the receiver use raw stream information.
The bottom layer automatically completes the work of encoding and decoding. So it is very suitable for point-to-point communication, and it is also suitable for many-to-many.
A many-to-many call is equivalent to establishing a P2P between any two people, that is, each person has an RTCSessionDescription connection with everyone else.
Assuming that there are N people, each person will have N-1 RTCSessionDescription connections.
After a successful login, a connection is created. If it is many-to-many, every time someone joins in, other people need to create a link and establish a ygie connection with the newly joined person.
yourConn = new webkitRTCPeerConnection(configuration);
// setup stream listening
yourConn.addStream(stream);
//when a remote user adds stream to the peer connection, we display it
yourConn.onaddstream = function (e) {
remoteVideo.src = window.URL.createObjectURL(e.stream);
};For details, please refer to this series of articles. WebRTC actually has multiple versions, and it can also be interconnected between different versions.
For example, the Web side uses WebRTC to connect with the C++ desktop client.
For other explanations, please refer to:
For Web version implementation, please refer to: WebRTC Video Demonstration
OpenWebRTC- Cross-platform WebRTC client framework - Programmer Sought
WebRTC from one-to-one to many-to-many_LuckyTHP's blog-CSDN blog_webrtc many-to-many