The introduction

The previous articles covered usagewebrtcImplement local analog video chat, real network 1 to 1 video chat and screen sharing and chat at any time switch article, next down actual combat how to use WeBRTC to achieve multi-crowd video call, meeting

  • Webrtc implement group chat series article (1) local analog video call
  • Webrtc video group chat series article (two) to achieve one-to-one video chat in the network
  • Webrtc creates group video chat series with video chat and screen sharing at will

Train of thought

  1. Because WeBRTC is point-to-point, we have also achieved the corresponding effect through the previous article, but the implementation idea of many-to-many is also based on this, the condition is: maintain one PeerConnection one-to-one, and maintain n peerconnections many-to-many

  2. To put it simply, each client maintains the PeerConnection of its own and other conference room owners in the conference room.

  3. When someone in the conference room joins, the joining party notifies the server that it is joining, and the server sends a notification to other people already in the conference room

  4. After the PeerConnection is initialized for each client, the last user to join sends an offer to each member

  5. Each member listens to the offer and responds to the answer

  6. Implement multi-terminal ICE candidate through Onicecandidate, and finally detect that each client video is added to the local video tag and name the element ID with each user name

  7. The process is basically the same as point-to-point, but with a few more operations on the Web side, instead of one sending and one receiving response, now one sending and multiple listening responses

demo

The source address

  • The backend:https://github.com/wangsrGit119/suc-chat-bandend
  • The front:https://github.com/wangsrGit119/suc-love-chat
  • Demo address is not put in the article, want to be able to leave a message directly, deploy their own or encounter problems can ask me oh

Concrete code implementation

  • Initialize peerConnect on each client. This operation is triggered when each user initializes a meeting or accepts an invitation

// Initialize PeerConnection
initPeer(peerName,e){
    const that = this;
    console.log(peerName+"Initialize PeerConnection")
    let peer_tep = new PeerConnection(this.iceServers);
    peer_tep.addStream(that.localStream);
    peer_tep.onicecandidate = function(event) {
        console.log("Listen for ICE candidate information",event.candidate)
        if (event.candidate) {
            let candidate_data = {userId:that.userInfo.userId,username:that.userInfo.username,candidate:event.candidate}
            let params = {userId:that.userInfo.userId,targetId:e.userId,targetName:e.username,targetType:2.data:candidate_data}
            that.socket.emit("candidate",params)
        }else{
            console.log("ICE collection is complete")}}; peer_tep.onaddstream =(event) = > {
        console.log("Listen to video join join user",e.username)
        that.createEleVideo(event.stream,e.username)
    };
    that.userPeerList[peerName] = peer_tep;
},

Copy the code
  • Each newly added user creates an offer and sends it to other clients

// Create a connection
async onCreateOffer() {
    const that = this;
    console.log("Start creating offer")
    for(const ele of that.groupUserList){
        let peerName = that.userInfo.username+"-"+ele.username;
        if(that.userInfo.username ! == ele.username){/ / create the offer
            let offer = await that.userPeerList[peerName].createOffer(that.offerOption);
            // Set the local description
            await that.userPeerList[peerName].setLocalDescription(offer)
            // Send to the server remotely and forward to other clients
            let data = {offer:offer,userId:that.userInfo.userId,username:that.userInfo.username,info:"Send offer"}
            let params = {userId:that.userInfo.userId,targetId:ele.userId,targetName:ele.username,targetType:2.data:data}
            that.socket.emit("offer",params)
        }
    }
},
Copy the code
  • Listen for responses from other clients

// Listen for Ice candidates
async onIceCandidate(data) {
    const that = this;
    let peerName = that.userInfo.username+"-"+data.data.username;
    await that.userPeerList[peerName].addIceCandidate(data.data.candidate)
},
// Listen for remote offers
async onOffer(data) {
    const that = this;
    let peerName = that.userInfo.username+"-"+data.data.username;
    await that.userPeerList[peerName].setRemoteDescription(data.data.offer)
    // The receiver creates the answer
    let answer = await that.userPeerList[peerName].createAnswer();
    // The receiver sets the local answer description
    await that.userPeerList[peerName].setLocalDescription(answer);
    // Send the message to the caller. Answer
    let answer_data = {userId:that.userInfo.userId,username:that.userInfo.username,answer:answer}
    let params = {userId:that.userInfo.userId,targetId:data.data.userId,targetName:data.data.username,targetType:data.targetType,data:answer_data}
    that.socket.emit("answer",params)
},
// Listen for remote responses
async onAnswer(data) {
    const that = this;
    let peerName = that.userInfo.username+"-"+data.data.username;
    // The sender sets the description of remote answer
    await that.userPeerList[peerName].setRemoteDescription(data.data.answer);
},

Copy the code
  • Create a media display when listening on a media stream. Note that the monitored media has the user name as the DOM element ID, so that removal or gagging can be applied to a specific user
// Append video
createEleVideo(stream,id){
    console.log("createEleVideo",stream);
    let ele = document.getElementById("ManyToManyVideo");
    let old = document.getElementById(id);

    if(old){
        old.srcObject = stream;
    }else{
        let video = document.createElement('video');
        video.controls = true;
        video.autoplay = true;
        video.width = 230;
        video.height = 200;
        video.volume = 0.1; video.id = id; video.srcObject = stream; ele.append(video); }},Copy the code

The last

  • Ask for a thumbs up. Leave a comment if you have any questions
  • Article source public accountDavor suker share