简单剖析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分支,为最新的项目
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。