先上效果图吧
1.WebRTC需要通过长链接查找到通信双方,然后通过P2P( peer to peer )的方式传输音频数据。(即WebRTC需要一个信令服务器,也就是一个socket链接用来发起音视频通信,发送WebRTC中的offer和回复answer,这里使用node.js搭建webSocket信令服务器。)
var WebSocketServer = require('ws').Server;//添加依赖
var wss = new WebSocketServer({port: 8888});//端口配置
2.WebRTC需要打洞服务器(一个stun,一个turn)来穿透防火墙等,我们需要配置打洞服务器。
var configuration = {
//配置打洞服务器
"iceServers": [{
"urls": ["stun:stun.1.google.com:19302","stun:stun.services.mozilla.com"]
},{
"urls" : ["turn:numb.viagenie.ca"],
"username" : "webrtc@live.com",
"credential" : "muazkh"
}],
sdpSemantics:'plan-b'
};
3.WebRTC中最重要的就是PeerConnection对象,每个音视频会话都会有唯一的PeerConnection对象,WebRTC通过这个PeerConnection对象进行视频的发起、传输、接收和挂断等操作。
selfConnection = new RTCPeerConnection(configuration);//创建PeerConnection的对象(创建时需要传入打洞服务器的配置信息,如果不传入打洞服务器的配置信息,则只可以在内网中使用实时音视频通讯。)
4.1向2发起通信请求过程:
- 1链接webSocket信令服务器;
- 1向2发出视频请求,如果2在线服务端向2转发1的请求,如果2不在线,服务端向1返回错误提示信息;
- 如果2在线,2未响应1的请求,1可以取消请求,如果2响应1的请求,服务端向1转发2的响应。
- 如果2同意,1开始获取音视频数据;
- 1创建一个Ice Candidate打洞服务;
- 1通过Ice Candidate打洞服务创建一个PeerConnection对象;
- 1创建一个offer,offer中包含了视频设置sdp,将创建好的offer设置为PeerConnection对象的localDescription本地描述信息;
- 1同时将创建的offer和Ice Candidate通过webSocket信令服务器发送给2;
- 将1获取到的音视频数据存入PeerConnection对象;
- 如果2先接收到1发过来的offer,那么先将offer存起来,等到接收到1发过来的Ice Candidate打洞服务后通过Ice Candidate打洞服务创建一个PeerConnection对象,再将保存好的offer设置为PeerConnection对象的remoteDescription对方的描述信息。
- 如果2先接收到1发过来的Ice Candidate打洞服务,那么通过1发过来的Ice Candidate打洞服务创建一个PeerConnection对象,然后等待接收到1发过来的offer,再将1发过来的offer设置为PeerConnection对象的remoteDescription对方的描述信息;
- 2接收到1发过来的offer后要创建一个answer,将answer设置为PeerConnection对象的localDescription本地描述信息。并且将创建的answer通过webSocket信令服务器返回给1。
- 1开始获取音频数据,将音频数据存入PeerConnection对象中,WebRTC便会自动将音频数据发送给1。
- 1接收到2返回的answer,将2返回的answer设置为PeerConnection对象的remoteDescription对方的描述信息。
- 这个时候WebRTC会将音频数据自动发送给2,1和2就创建起了实时音视频通信。
- 通信过程中任一主动挂断都会通过服务器给对方发送提示消息,如果通信中服务中断,双方都将受到异常错误提示。
说明:本地测试用例
- web_RTC_demo1为html+css+js的简单示例
- web_RTC_demo2为基于vue-cli的简单示例
- web_RTC_server为node.js搭建webSocket信令服务
很久没有弄这个玩意了,可能已经过时不可用了,仅供参考(https://github.com/zhao8045/web-rtc.git)