1

简单剖析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分支,为最新的项目

eason
63 声望1 粉丝

每次选择.都是蜕变


引用和评论

0 条评论