使用WebRTC搭建1v1视频聊天室

WebRTC建立通信过程

image

  • 基础设施:必要的信令服务和 NAT 穿越服务
  • clientA 和 clientB 分别创建 RTCPeerConnection 并为输出端添加本地媒体流。如果是视频通话类型,则意味着,两端都需要添加媒体流进行输出。
  • 本地 ICE 候选信息采集完成后,通过信令服务进行交换。
  • 呼叫端(好比 A 给 B 打视频电话,A 为呼叫端)发起 offer 信息,接收端接收并返回一个 answer 信息,呼叫端保存,完成连接。

实现1v1视频聊天

信令服务器

对于上面的额所讲到的信令服务器,我们可以采取搭建websocket服务器实现。更进一步,我们可以采用socketio来实现,因为它自带room管理,可以给我们带来很多便利。

NAT穿透

而NAT穿透,我们知道在WenRTC中是通过STUN/TURN协议实现的,我们可以自己搭建这种服务器,但比较繁琐,可以参考https://webrtc.org.cn/stunturn_quick_guide/。作为测试,我们可以使用一些免费的服务器,可以从中选取。
例如:

{url:'stun:stun01.sipphone.com'},
{url:'stun:stun.ekiga.net'},
{url:'stun:stun.fwdnet.net'},
{url:'stun:stun.ideasip.com'},
{url:'stun:stun.iptel.org'},
{url:'stun:stun.rixtelecom.se'},
{url:'stun:stun.schlund.de'},
{url:'stun:stun.l.google.com:19302'},
{url:'stun:stun1.l.google.com:19302'},
{url:'stun:stun2.l.google.com:19302'},
{url:'stun:stun3.l.google.com:19302'},
{url:'stun:stun4.l.google.com:19302'},
{url:'stun:stunserver.org'},
{url:'stun:stun.softjoys.com'},
{url:'stun:stun.voiparound.com'},
{url:'stun:stun.voipbuster.com'},
{url:'stun:stun.voipstunt.com'},
{url:'stun:stun.voxgratia.org'},
{url:'stun:stun.xten.com'},
{
    url: 'turn:numb.viagenie.ca',
    credential: 'muazkh',
    username: 'webrtc@live.com'
},
{
    url: 'turn:192.158.29.39:3478?transport=udp',
    credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
    username: '28224511:1379330808'
},
{
    url: 'turn:192.158.29.39:3478?transport=tcp',
    credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
    username: '28224511:1379330808'
}

在创建RTCPeerConnection时可以作为选项设置。

https

WebRTC限制远程访问摄像头等媒体设备时,必须使用https做安全访问,本地测试可以使用http。但是由于我们现在是做1v1视频聊天,因此一个https服务器是必须的。
无论采用golang,还是nodejs搭建web服务器,提供https访问是很简单的,如golang使用gin框架提供web服务时:

router.RunTLS(config.WebServerHostTLS, "ssl/server.crt", "ssl/server.key")

主要就是ssl证书的问题。如果你有购买域名,一般的云服务提供商都有生成ssl证书的服务,但是如果没有域名,我们可以使用openssl来创建测试证书。当然这样的证书由于并为被认证,所以使用时浏览器还是会报安全警告,但是这对于我们测试来说足够了。

openssl生成证书的过程可以参考:https://www.cnblogs.com/pzblog/p/9088286.html .

实现效果

image

演示地址: https://134.175.26.82:8082/static/demo/remote_chat.html.

仓库地址:https://github.com/243286065/WebRTCDemo

posted @ 2020-05-04 15:26  星星,风,阳光  阅读(1512)  评论(0编辑  收藏  举报