webrtc原理及相关api使用逻辑

简单剖析webrtc，并结合easyrtc与coturn(stun,turn)服务实现音视频聊天

• webRTC全称为Web Real-Time Communications，即web实时通讯

• 音视频聊天实现前提，跟直播不一样哦~api类型繁多，有的也过时了，见到有不同的就翻翻MDN，换个方案吧，谷歌需要https或者localhost才能开启媒体权限，火狐则不需要，但做兼容很费工夫。localhost下就自己开两个网页测吧，后面会讲easyrtc

  • 理解websocket连接/websocket算是node.js最繁华的领域了，socket.io简单粗暴https://github.com/socketio/s...

  • 理解webrtc的工作流程 https://juejin.im/post/5b3f50...

    • stun服务器作用，获取双方ip协助建立连接
    • turn服务器作用，转发音视频
    • 信令服务器作用,利用socket.io实现，主要就是转发音视频聊天双方的软硬件信息ip,设备信息，协助直连或者视频转发

• 简化文章内容介绍，webrtc流程,以下在内网中可以运行

  • 1.获取用户音视频媒体，完成这步，即可看到自己的摄像头影像

    navigator.mediaDevices.getUserMedia({
      audio: true,
      video: true,
    }).then((stream) => {
      let video = document.querySelector('#video')
      video.srcObject = stream  // mediaDevices.getUserMedia获取到的音视频流捆绑在video标签上
      video.onloadedmetadata = () => video.play() // 读取数据时进行播放
    })

  • 2.进行peertopeer点对点连接，

    • 2-1.房主createOffer回调中能取到房主的信息desc,音视频结构软硬件信息，储存本地，并且发送到信令服务器，协助转发

      let peer = new RTCPeerConnection(servers)
      pc.createOffer(sendOffer, function (error) {
        console.log('发送 offer 失败')
      })
      function sendOffer (desc) {
        console.log('sendOffer')
        pc.setLocalDescription(desc);
        socket.emit('offer', JSON.stringify({
        data: {sdp: desc}
          })
        )
      }

    • 2-2.房主createOffer时会触发自身连接的onicecandidate事件,获取candidate，用户地址等

      pc.onicecandidate = function(event) {
        if (event.candidate !== null) {
            socket.emit("_ice_candidate",JSON.stringify({
              type: '_candidate',
              data: {
                candidate: event.candidate
              }
            })
          )
        }
      };

    • 2-3.对方在socket中收到offer时，将其设置为远端描述，offer对应的为answer,创建时会触发该用户的onicecandidate事件，能获得到其用户地址信息,此时将描述发给房主

      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('创建answer失败')
        })
        }, function (error) {
          console.log('摄像头获取失败', '接听视频失败');
        })
      })
      function sendAnswer(desc) {
        pc.setLocalDescription(desc);
        socket.emit('answer', JSON.stringify({
          type: '_answer',
          data: {
            sdp: desc
          }
        }))
      }

    • 2-4.房主在接收answer的socket事件中将其设置为远端描述

      socket.on('answer', async function(e) {
        let data = e.message
        await peer.setRemoteDescription(data)
      })

• 外网实现点对点音视频聊天 ICE(结合stun,turn进行穿透获取音视频双方地址)

  • STUN解析

    • 但现实中我们的视频通话,不可能局限在内网，可能会在防火墙，NAT之后，点对点连接之前，我们需要检测是否能进行，该技术称为NAT穿透，通常基于UDP协议，如RFC3489。在新的RFC5389中支持了TCP穿透

  • TURN解析

    • TURN使用中继穿透NAT:STUN的扩展，跟STUN一样都是通过修改应用层中的私网地址达到NAT穿透的效果，异同点是TURN是通过两方通讯的“中间人”方式实现穿透。就有点像服务器转发音视频流的意思，在STUN失败时会走TURN

  • NAT作用是啥

    • 为了缓解全球ip不足，NAT可以将内网的私有地址转为外网的共有地址，从而可以进行internet访问
    • 防止外部主机攻击内部主机
  • 当然前端开发是不熟悉这些的，阅读多篇RTC博客得知谷歌开源了stun,coturn相关的服务，只需要将依赖安装，账号密码加密设置即可使用参考文献https://www.cnblogs.com/idign...
  • 配置完毕coturn后测试地址，返回有relay属性为服务器地址证明成功https://webrtc.github.io/samp...
  • 

• easyRTC

  • 经过多次测试，自己的RTCdemo兼容性差，目前测试阶段就不手写了。采用了easyRTC，除了safari和古董ie不行，其他方面还是ok的。https://github.com/priologic/...
  • 
  • 注意采用beta分支，为最新的项目