WebRTC是HTML5的新特性之一,通过网页浏览器即可进行实时语音对话或视频对话的技术,无需添加任何插件。Web开发者只需搭建简单的“信令服务器”和“stun服务器”,就能够基于浏览器轻易快捷开发出丰富的实时多媒体应用。
WebRTC的数据流是居于浏览器与浏览器(点对点)之间的传输通讯,不用通过服务器转发。但是在浏览器与浏览器建立连接之前需要服务器来交换信令等连接信息。作为一个Web开发者,需要建立一个信令服务器用于交换“会话描述协议(SDP)”和"交互连接候选地址(ICE Candidate)"。stun服务器则是用于穿透NAT建立连接,可以直接使用Google的stun协议测试服务器:“stun:stun.l.google.com:19302”。
一、WebRTC的接口实现
WebRTC实现了三个API,分别是:
* MediaStream:通过MediaStream的API能够通过设备的摄像头及话筒获得视频、音频的同步流
* RTCPeerConnection:RTCPeerConnection是WebRTC用于构建点对点之间稳定、高效的流传输的组件
* RTCDataChannel:RTCDataChannel使得浏览器之间(点对点)建立一个高吞吐量、低延时的信道,用于传输任意数据
这里的MediaStream是前端js用于调用本地摄像头的方法,而RTCPeerConnection是用于浏览器之间建立连接交换视频音频信息的通道。RTCDataChannel用于传输数据,使用node.js前端服务器开发会使用到,我并没有使用,因为个人从事Java Web后台开发,使用的是Ajax来传输数据。
二、WebRTC连接建立时序图
三、WebRTC连接建立过程
连接双方,A方发起Offer,B方接收到Offer后发起Answer,A方接收Answer后建立连接成功。
Offer发起方:
1、getUserMedia 获取本地视频流stream; 2、new RTCPeerConnection(servers)建立连接并写入本地视频流;(peerConnection.addStream(stream)) 3、peerConnection创建Offer,将回调参数(desc.sdp)上传到个人服务器,同时onicecandidate触发,将回调参数(event.candidate)上传到个人服务器;(peer.createOffer(function(desc){...});peerConnection.onicecandidate=function(event){...};) 4、响应Offer接收方的createAnswer方法,从个人服务器中获取SDP设置为远程描述。双方连通。Offer接收方(Answer发起方):
1、getUserMedia 获取本地视频流stream; 2、建立RTCPeerConnection连接并写入本地视频流;(peerConnection.addStream(stream)) 3、从个人服务器中获取Offer发起方的SDP和candidate,设置到本地描述。调用createAnswer方法将回调参数(desc.sdp)上传到个人服务器,同时onicecandidate触发,将回调参数(event.candidate)上传到个人服务器(peerConnection.createAnswer(function(desc{...};peerConnection.onicecandidate=function(event){...};); 4、等待Offer发起方配置远程描述后,双方连通。
四、注意
- 双方建立连接需要先配置“会话描述协议(SDP)“,再配置"交互连接候选地址(ICE Candidate)"。
- 只能一方发起Offer,另一方请求Offer前不能发起Offer,否则视为请求方不能发起Answer。
- 双方Peer连通后,就会触发peerConnection.onaddstream方法,从回调方法中获取视频流。
- RTCPeerConnection需要通过“stun服务器”来穿透NAT建立连接。
- 旧的调用navigator.getUserMedia()已经改为 navigator.mediaDevices.getUserMedia()。
五、相关数据内容
- Google的stun协议测试服务器:stun:stun.l.google.com:19302
- SDP:会话描述协议(Session Description Protocal)
- ICE:交互式连通建立方式(Interactive Connectivity Establishment)
六、信令服务器实例项目
本项目源码(GitHub):
七、参考内容
mozilla WebRTC API:
WebRTC GitHub samples:
WebRTC通讯流程图:
WebRTC进阶-信令、stun、turn、ICE:
WebRTC 实例(node.js):
WebRTC实例(Java+WebSocket):
WebRTC的官方实例: