网页视频对讲方案实现QAQ

244 阅读1分钟

哈喽哈,我是小王子,本次介绍一下我们实际项目中所应用的最新版本的视频对讲方案实现的dom,此dom为 vue2+node实现

1.node服务的建立

因为手写一个node服务相对复杂,这里我们使用现有的插件进行建立,"websocket": "^1.0.29"+"webrtc-adapter": "^1.4.0",这两个插件的使用方法不在这里细讲,有兴趣的自己去github翻看资料或者去npm查看使用方法

image.png

这里提供一张截图给大家参考具体代码会放在文章末尾

2.用户的加入

image.png

在登录自己的用户名时点击登录,首先会建议一个与服务的ws连接,然后将自己的用户名通过ws的send方法发送给服务器,服务器接受到username的code就会将当前用户信息保存到服务器并且返回一个用户列表给到当前用户,告知有哪些人在线可以进行视频通话

image.png

image.png

image.png

image.png

点击登录后的效果---

image.png

此时我们复制当前网址,再重新打开一个页面

image.png

因为是ws实时链接,所以用户列表会同步进行更新

3.webrtc的建立

当我身为用户111的时候,点击用户列表里的222进行视频通话,这时要建立一个webretc,通过ws进行信令的交换,让双方建立连接,createPeerConnection()这个方法是创建一个webrtc的连接的方法

image.png

createPeerConnection()方法的相关代码,首先创建一个RTPeerConnection,这个是必须的,然后创建一个自己的ice服务器信息,其次利用rtc的事件进行绑定

image.png

写困了,下一期在更新