阅读 2569

WebRTC >RTCPeerConnection-建立连接的全过程

WebRTC到底是什么

前言

  • WebRTC可能对于大多数前端开发人员来说是陌生的,在日常的开发工作中一般不会有交集。但是如今火爆的C2C远程教学、云游戏等,都少不了WebRTC的影子。
  • WebRTC (Web Real-Time Communication) 是一个可以用在视频聊天,音频聊天或P2P文件分享等Web App中的 API -摘抄自MDN[developer.mozilla.org/zh-CN/docs/…]
  • 我的理解:建立一个端对端音视频通信通道,两端通过建立的通道进行数据通讯。

webRTC三部曲

WebRTC主要由3个部分组成:

  • getUserMedia:获取设备上可用媒体权限(视频、音频),需要用户授权。
  • RTCPeerConnection:建立通讯通道用于传输视频、音频。
  • RTCDataChannel:建立通讯的两端,通过RTCDataChannel对象进行数据交换。

RTCPeerConnection建立连接的过程

  • 在上图中,RTCPeerConnection建立连接的过程由发起端、Stun服务器、信令服务器、应答端组成,Stun服务器、信令服务器需要根据自己的业务场景去实现,不过Stun服务器有一些公开的服务,比如:google提供的(stun:stun.l.google.com:19302)服务。
  • 1、let rtcPeerConnection = new RTCPeerConnection({ "iceServers": [ { "url": 'stun:stun.l.google.com:19302 } ] }); 创建一个RTCPeerConnection对象
  • 2、连接信令服务器获取自己Id及连上信令服务器的其他端(这里可以看成有很多成员都在一个房间内,我们要知道这个房间中所有成员的名单)
  • 3、添加视频轨道,该轨道会传达到另一端(非连接的必要因素)
  • 4、创建一个offer,这个offer包含SDP对象,SDP对象中包含当前音视频的相关参数
  • 5、setLocalDescription 保存SDP对象
  • 6、将包含SDP信息的参数发送到信令服务器
  • 7、应答端收到发起端的SDP信息后会调用setRemoteDescription保存SDP信息,并且创建一个应答的answer(SDP对象)发送给发起端
  • 8、发起端收到answer后通过setRemoteDescription保存answer中SDP信息
  • 9、发起端与应答端根据SDP信息创建好了相对应的音视频channel,开启icecandidate的数据收集。(icecandidate可以理解为是获取对等端的IP地址、公网IP地址),发起端通过onicecandidate收到candidate信息。
  • 10、发送端将收到的candidate信息通过信令服务器发送给应答端。
  • 11、应答端通过addicecandidate将candidate保存起来
  • 12、同10,应答端将candidate信息发送给发起端
  • 13、发起端将收到的candidate(该描述描述了连接的远程端的状态)通过addIceCandidate传递给浏览器的ICE代理
  • 这样发起端与应答端就建立起了P2P音视频通道,发起端通过onaddstream回调接口接收应答端发送过来的视频流。

结语

  • 以上是在工作中实践理解的RTCPeerConnection建立连接的全过程,后续我会不定期地更新RTCPeerConnection如何进行数据交互以及相关实践场景等内容。webRTC也是工作中第一次接触,在探索的过程中不断总结,如果有不恰当的地方,欢迎留言交流!

-更新内容:连接流程不是唯一的,此流程也可以反过来连接,由服务端创建一个offer发起连接 ,可以解决一些特定场景的需求,比如兼容ios safari不兼容的特性,来完成safari webRtc的链接会话等。

文章分类
前端
文章标签