preface

  • This article begins by introducing some of the basic concepts in WebrTC and steps through sample code to make a simple local video analog call without transferring it over the network.
  • The sample code is extremely important and is a partial introduction to the basic concepts of the complete practice.
  • Please understand each paragraph carefully and I will introduce the basic concepts as briefly as possible.
  • Make sure your computer has a webcam. if you don’t have a webcam on your desktop, an external one will do

Media devices

When developing the Web, the WebRTC standard provides apis for accessing cameras and microphones connected to a computer or smartphone. These devices, often referred to as MediaDevices, can be accessed using JavaScript through navigator.mediadevices objects that implement the MediaDevices interface. With this object, we can enumerate all connected devices, listen for device changes (when connected or disconnected), and open devices to retrieve media streams

A call to getUserMedia() triggers a permission request. If the user accepts the license, the commitment is resolved through MediaStream, which contains a video and an audio track. If permission is denied, PermissionDeniedError is raised. If no matching device is connected, NotFoundError is raised.

  • Gets sample media stream code

 // createMedia
 async createMedia() {
        let streamTep = null;
        // Save the local stream to global
        streamTep = await navigator.mediaDevices.getUserMedia({audio: true.video: true})
        console.log("streamTep",streamTep)
        return streamTep;
 },
Copy the code

Focus:navigator.mediaDevices.getUserMedia()function

  • Play media streams locally
 <div style="float: left">
      <video id="sucA"></video>
  </div>
Copy the code
  // The local camera is enabled
async nativeMedia(){
        const that = this;
        that.localStream = await this.createMedia()
        let video = document.querySelector('#sucA');
        // Older browsers may not have srcObject
        if ("srcObject" in video) {
          video.srcObject = that.localStream;
        } else {
          video.src = window.URL.createObjectURL(that.localStream);
        }
        // eslint-disable-next-line no-unused-vars
        video.onloadedmetadata = function(e) {
          video.play();
        };
        that.initPeer(); // After obtaining the media stream, call the function to initialize RTCPeerConnection
},

Copy the code

Focus: Broadcast local media stream is essentially the media stream that will be taken on the previous stepThe assignmentTo the corresponding media label component, in this case tovideoThe label

  • Media device constraints
// Set the scope of the video window
{
    "video": {
        "width": {
            "min": 640."max": 1024
        },
        "height": {
            "min": 480."max": 768}}}// Obtain the front-facing camera of the mobile phone
{ audio: true.video: { facingMode: "user"}}// Rear camera
{ audio: true.video: { facingMode: { exact: "environment"}}}// WebRTC transmissions with bandwidth constraints may require a lower frame rate
{ video: { frameRate: { ideal: 10.max: 15}}}Copy the code

Emphasis: In layman’s terms, this is a constraint on audio or video. The constraint parameter entry is the function used in the above example to get the media streamgetUserMedia({audio: true, video: true})

Nouns: ICE,STUN,NAT,TURN,SDP explanation

Interactive Connection Establishment (ICE) is a framework that allows your Web browser to connect to peers. The basis for point-to-point communication between clients A and B is to establish communication. However, in many cases, there is no public IP between the two devices and firewalls block data transmission. In this case, STUN is required to provide you with A unique address and TURN server relay data.

Please see for more detailsMDN, the details will not be introduced

RTCPeerConnection

The RTCPeerConnection interface represents a WebRTC connection between a local computer and a remote peer. It provides ways to connect to remote peers, maintain and monitor connections, and close connections when they are no longer needed.

How to establish a peerConnection between rTCPeer Connections

  • Local stream capture (explained above)
  • Global parameter initialization
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the global initialization PeerConnection -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -var PeerConnection = window.RTCPeerConnection ||
         window.mozRTCPeerConnection ||
         window.webkitRTCPeerConnection; -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- iceServers stun and turn the server configuration -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --var iceServers = {
         iceServers: [{url: "stun:stun.l.google.com:19302"},// Google public services
   		{
           url: 'turn:numb.viagenie.ca'.credential: 'muazkh'.username: '[email protected]'}};Copy the code
  • Initialize two emulated clients
      Pc2 -> PC2 -> PC2 -> PC2
       const that = this;
       that.pc = new PeerConnection(iceServers);
       that.pc2 = new PeerConnection(iceServers);
       // Assign the global video stream to the PC link service
       that.pc.addStream(this.localStream);
        // Listen for ICE candidate information, as described below
       that.pc.onicecandidate = function(event) {
         console.log("pc onicecandidate",event)
         if (event.candidate) {
   	  // Normally this place is sent to another client through a third party (the socket behind the network endpoint point), but now the local demo sends candidate information directly to the PC2 link servicethat.pc2.addIceCandidate(event.candidate.toJSON()); }};// Listening for remote video the PC acts as the caller, so it only needs to listen for video streaming information coming in from PC2
       that.pc2.onaddstream = (event) = > {
         console.log("onaddstream",event)
   	  // Assign the video stream to another video tag after listening on the stream
         let video = document.querySelector('#sucB');
         video.srcObject = event.stream;
         video.onloadedmetadata = function(e) {
           console.log(e)
           video.play();
         };
       };
Copy the code

onicecandidate: The ICE candidate describes the protocols and routes required for WebRTC to communicate with remote devices. When starting a WebRTC peer connection, multiple candidates are typically suggested at each end of the connection until they mutually agree on the candidate that describes what they think is the best connection.

  • Caller-side analog call (PC acting as caller)
/ / create the offer
 async createOffer() {
        const that = this;
        / / create the offer
        let offer_tep = await that.pc.createOffer(this.offerOption);
        console.log("offer_tep",offer_tep)
        // Set the local description
        await that.pc.setLocalDescription(offer_tep)
        // The receiver sets the remote offer description
        await that.pc2.setRemoteDescription(offer_tep)
        // The receiver creates the answer
        let answer = await that.pc2.createAnswer();
        // The receiver sets the local answer description
        await that.pc2.setLocalDescription(answer);
        // The sender sets the description of remote answer
        await that.pc.setRemoteDescription(answer);
      },

      / / call
      async callA() {
        const that = this;
        // Create the offer and save the local description
        await that.createOffer()
      },
Copy the code

Why does a call have such a cumbersome step? And that’s where it comes inWebrtc sessionsLook at the next one

Webrtc sessions

“When a user (said PC) makes a WebRTC call to another user (said PC2), a special description is created, called an offer. This description includes all information about the caller’s suggested configuration for the call. The receiver then responds with an answer, which is their description of the end of the call. In this way, the two devices share with each other the information needed to exchange media data. This exchange is handled using interactive Connection Establishment (ICE), a protocol that allows two devices to exchange offers and replies using an intermediary, even though both devices are separated by network address translation (NAT). Each peer then retains two descriptions: local (describing itself) and remote (describing the other end of the call).”

In simple terms, A calls B, A creates an offer, holds the offer locally, and then sends it to B. B creates an answer, holds the answer locally, and then sends the should to A. After A gets it, B sets the should to the local remote description.

  • graphic

subsequent

  • This article is the first in a series of ongoing webrTC group chat implementation articles
  • Article source public accountDavor suker share