The introduction

In the previous article, WEBRTC implemented basic local 1-to-1 video communication. In this article, weBRTC implements one-to-one video chat in the real world.

The target

thinking

  • The basis for weBRTC to achieve point-to-point communication is to establish a network link between the target and itself, so how to establish a link?
  • Why can the point-to-point video directly realize video communication without exchanging the so-called signaling?

answer

Webrtc’s ability to communicate from one browser to another remote browser relies on a so-called message exchange server

In the last video I was implementing local video communication because I was assigning the information exchanged directly to another variable, but that doesn’t work in remote network links, where a signal from one user has to be sent through a middleman to another user’s browser and then assigned.

Code implementation steps

An overview of the

First of all, communication must meet the basis of communication. I choose to communicate with the target, on the premise that I establish a link between myself and the target through certain conditions, and then give my communication information to the target, and the target will also send their information to me.

Based on the process

  • Select the person for the video call and turn on your own local camera (the purpose is to create a video stream locally, which is to be sent to the other party)

  • Initialize the basic PeerConnection between two parties

  • Start by creating the link foundation information. This step will formally establish the communication foundation with the other party (save an offer locally after creation).

  • The target object receives the offer sent remotely through the server, creates an answer on the target side, saves the answer locally and sends it to the user who originally sent the offer

  • The reply returned to the target is received locally and added to the local remote description

  • Listen for ICE candidates (between sending an offer and creating a reply)

Step code

  • Select the person for the video call and turn on your own local camera (the purpose is to create a video stream locally, which is to be sent to the other party)
async createMedia() {
           const that = this;
           let streamTep = null;
           console.log("start prepare localStream origin")
           if(! navigator.mediaDevices || ! navigator.mediaDevices.getUserMedia ){ that.$message.error("Device not supported")
               console.log('getUserMedia is not support! ')}await navigator.mediaDevices.getUserMedia({audio: true.video: true})
                   .then(function (mediaStream) {
                   console.log("mediaStream",mediaStream)
                       // //eslint-disable-next-line no-debugger
                       // debugger
                   streamTep = mediaStream;
               }).catch(error= >{
                   console.log("Failed to obtain media device",error)
                   that.$message.warning("Failed to obtain media device")})return streamTep;
       },
Copy the code
  • Initializes the basis for a link between two partiesPeerConnection
  // Initialize PeerConnection
      initPeer(){
        const that = this;
        that.pc = new PeerConnection(this.iceServers);
        that.pc.addStream(this.localStream);
        that.pc.onicecandidate = function(event) {
          console.log("Listen for ICE candidate information",event.candidate)
          if (event.candidate) {
		  // Send ICE candidate information to the video call target via the server)
            let params ={username:that.username,target:that.remoteAccount,candidate:event.candidate}
            console.log("info",params)
            that.socket.emit("candidate",params)
          }else{
            console.log("ICE collection is complete")}}; that.pc.onaddstream =(event) = > {
          console.log("Listen for video join onAddStream",event)
		  // Assign the video stream to a video tag (here is the other party's video stream to listen on, that is why the first step is to create a local video stream)
          that.createEleVideo(event.stream,that.remoteAccount)
        };
      },
Copy the code
  • Start to create a link, this step starts to formally establish the communication foundation with the other party (after the creation of a local save a copyoffer)
 async onCreateOffer() {
        const that = this;
        / / create the offer
        let offer_tep = await that.pc.createOffer(this.offerOption);
        console.log("Call end offer",offer_tep)
        // Set the local description
        await that.pc.setLocalDescription(offer_tep)
        // Send to the server remotely
        let params = {username:that.username,target:that.remoteAccount,offer:offer_tep}
        that.socket.emit("offer",params)
      },
Copy the code
  • The target object receives a remote message sent by the serverofferAnd creates a reply on the targetanswer, save locallyThe replySend after send to oneself sendofferThe user
// Listen for remote offers
     async onOffer(data) {
       const that = this;
       await that.pc.setRemoteDescription(data.offer)
       // The receiver creates the answer
       let answer = await that.pc.createAnswer();
       // The receiver sets the local answer description
       await that.pc.setLocalDescription(answer);
       // Send the message to the caller. Answer
       let params = {username:that.username,target:that.remoteAccount,answer:answer}
       that.socket.emit("answer",params)
     },
Copy the code
  • Received locally to the destination returnThe replyAnd add it to the local remote description
  // Listen for remote responses
     async onAnswer(data) {
       const that = this;
       // The sender sets the description of remote answer
       await that.pc.setRemoteDescription(data.answer);
     },
Copy the code
  • Listen for ICE candidate information (between sending an offer and creating a reply), referencing words on the MDN

The ICE candidate described the protocols and routing required for WebRTC to be able to communicate with remote devices. When starting a WebRTC peer connection, multiple candidates are usually suggested at each end of the connection until they agree with each other on the candidate that describes what they think is the best connection. WebRTC then uses the candidate’s details to initiate the connection.

The above code flow in the implementation of the actual demonstration

  • Process of the sender, namely the caller:

  • The target performs the demo

subsequent

  • This article is the second in a series on webrTC’s implementation of group chat

  • Article source public accountDavor suker share