# Simple analysis of WEBRTC, combined with easyRTC and COturn (STUN, TURN) service to achieve audio and video chat

  • WebRTC stands for Web real-time Communications

  • Google requires HTTPS or localhost to enable media access. Firefox doesn’t, but it takes a lot of work to make it compatible. Localhost under their own open two web test bar, after will talk about easyRTC

    • Understand the connection/websocket is node. Js the most prosperous areas, socket. IO simple and crude, https://github.com/socketio/socket.io.git
    • Understand weBRTC workflowJuejin. Cn/post / 684490…
      • Stun server function, obtain the IP of both parties to help establish a connection
      • Turn The server forwards audio and video
      • Signaling server function, using socket. IO, is mainly to forward the software and hardware information IP and device information of both sides of audio and video chat, assist direct connection or video forwarding

  • The weBRTC process can be run on the Intranet

    • 1. Obtain the user’s audio and video media. After completing this step, you can see your own camera image
      navigator.mediaDevices.getUserMedia({
    audio: true.video: true,
  }).then((stream) = > {
    let video = document.querySelector('#video')
    video.srcObject = stream  / / mediaDevices getUserMedia access to the audio and video stream bound on the video element
    video.onloadedmetadata = (a)= > video.play() // Play while reading data
  })
Copy the code
    • 2. Peertopeer point-to-point connection
      • 2-1. The createOffer callback can retrieve the homeowner’s information desc, store the audio and video structure hardware and software information locally, and send it to the signaling server to assist forwarding
        let peer = new RTCPeerConnection(servers)
  pc.createOffer(sendOffer, function (error) {
    console.log('Failed to send offer')})function sendOffer (desc) {
    console.log('sendOffer')
    pc.setLocalDescription(desc);
    socket.emit('offer'.JSON.stringify({
    data: {sdp: desc}
      })
    )
  }
Copy the code
      • 2-2. When the homeowner createOffer triggers its own connected Onicecandidate event to get candidate, user address, etc
        pc.onicecandidate = function(event) {
    if(event.candidate ! = =null) {
        socket.emit("_ice_candidate".JSON.stringify({
          type: '_candidate'.data: {
            candidate: event.candidate
          }
        })
      )
    }
  };
Copy the code
      • 2-3. When the other party receives an offer in the socket, it sets it as a remote description, and the offer corresponds to answer. When creating the offer, the onicecandiDate event of the user will be triggered, and the user’s address information can be obtained
        socket.on('offer'.function(e) {
    getUserMedia(function (stream) {
    let vid1 = document.getElementById('vid1')
    vid1.srcObject = stream
    vid1.onloadedmetadata = function(e) {
      vid1.play();
    };
    pc.addStream(stream)
    var json = JSON.parse(e) 
    pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp));
    pc.createAnswer(sendAnswer, function (error) {
      console.log('Failed to create answer')})},function (error) {
      console.log('Camera acquisition failed'.'Failed to answer video'); })})function sendAnswer(desc) {
    pc.setLocalDescription(desc);
    socket.emit('answer'.JSON.stringify({
      type: '_answer'.data: {
        sdp: desc
      }
    }))
  }
Copy the code
      • 2-4. The homeowner sets it as the remote description in the socket event receiving the answer
        socket.on('answer'.async function(e) {
    let data = e.message
    await peer.setRemoteDescription(data)
  })
Copy the code

  • External network to achieve point-to-point audio and video chat ICE(combined with STUN, TURN for penetration to obtain audio and video addresses)

    • STUN parsing
      • However, in reality, a video call cannot be confined to the Intranet. It may be connected behind the firewall, NAT, or point-to-point. We need to check whether the video call can be connected. TCP penetration is supported in the new RFC5389
    • TURN parsing
      • TURN is an extension of STUN. Like STUN, STUN penetrates NAT by modifying private network addresses at the application layer. TURN penetrates NAT through the “middle man” mode of communication between two parties. This is similar to how the server forwards a stream of audio and video, and turns on STUN failure
    • What does NAT do
      • To alleviate the global IP address shortage, NAT can convert private addresses on the Intranet to public addresses on the Internet for Internet access
      • Prevent external hosts from attacking internal hosts
    • Front-end developer is not familiar with these, of course, to read more than RTC blog that Google open-source stun, coturn related service, just need to rely on installation, set can use reference https://www.cnblogs.com/idignew/p/7440048.html account password encryption
    • Configured coturn address after the test, return have relay properties for the server https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/ to prove your success

  • easyRTC

    • After many tests, their RTCdemo compatibility is poor, the current test phase is not handwritten. With easyRTC, it is ok except safari and antique IE. Github.com/priologic/e…

  • Note the use of beta branches for the latest project