webrtc原理及相关api使用逻辑

时间 2019-11-30

标签 webrtc 原理相关 api 使用逻辑繁體版

原文原文链接

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

webRTC全称为Web Real-Time Communications，即web实时通信前端
音视频聊天实现前提，跟直播不同哦~api类型繁多，有的也过期了，见到有不一样的就翻翻MDN，换个方案吧，谷歌须要https或者localhost才能开启媒体权限，火狐则不须要，但作兼容很费工夫。localhost下就本身开两个网页测吧，后面会讲easyrtcnode
- 理解websocket链接/websocket算是node.js最繁华的领域了，socket.io简单粗暴https://github.com/socketio/socket.io.git
- 理解webrtc的工做流程 juejin.im/post/5b3f50…
  - stun服务器做用，获取双方ip协助创建链接
  - turn服务器做用，转发音视频
  - 信令服务器做用,利用socket.io实现，主要就是转发音视频聊天双方的软硬件信息ip,设备信息，协助直连或者视频转发

简化文章内容介绍，webrtc流程,如下在内网中能够运行git

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进行穿透获取音视频双方地址)github
- 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/idignew/p/7440048.html
- 配置完毕coturn后测试地址，返回有relay属性为服务器地址证实成功https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/

easyRTCweb
- 通过屡次测试，本身的RTCdemo兼容性差，目前测试阶段就不手写了。采用了easyRTC，除了safari和古董ie不行，其余方面仍是ok的。github.com/priologic/e…json

注意采用beta分支，为最新的项目