上一篇介绍了使用peerjs库来实现音视频通话,相当的简单。但是,当需要考虑更加复杂的场景时,比如多人音视频通话时,需要考虑到不同的网络状况,这时用peerjs库就显得比较鸡肋了。看了一圈文档,没有介绍说如何使用
SFU模式,也就是说你得自己去实现SFU,这就有点为难我胖虎了。有一说一,还是比较难的,那还是去拥抱mediasoup吧。几个月前,研究了一下mediasoup,看不懂完全看不懂,当时就直接放弃了。现在又得捡回来了0.0
这小节就只是介绍如何启动mediasoup,以及从将mediasoup从react移植到vue中websocket如何连接的问题,其他的等我深入使用了再来记录一下。
启动mediasoup-demo
光是本地运行mediasoup-demo就容易遇到问题,像我就花了好久时间才知道了如何启动(我太菜了T_T)。可以参考这篇文档
具体过程如下:
- 拉代码 :
git clone git@github.com:versatica/mediasoup-demo.git - 进入server目录下,将server中的
config.example.js改名为config.js - 使用openssl创建新的证书,然后替换掉
config.js证书的地址 - (windows下)查看本机ip地址,在
cmd中运行ipconfig,然后将server目录下的package.json中的start命令改成set INTERACTIVE=true MEDIASOUP_ANNOUNCED_IP=你的ip地址 && node server.js - 然后在server目录下执行
npm install --legacy-peer-deps - 再回到app目录下,也执行
npm install --legacy-peer-deps就行了
关于使用openssl生成证书,可以参考这两篇文章,安装使用和生成证书。
如果还不行,升级下node版本。
websocket连接
我把这个mediasoup-demo移植到了vue3中,准备2开。但是,移植过来后发现websokcet一直连不上后端的。关键是直接启动mediasoup又可以运行,这就奇了怪了。难不成vue中使用websocket有问题??
然后我将证书换了,之前是使用vite-plugin-mkcert这个插件来生成证书使用。现在去掉这个插件,直接使用mkcert来生成证书就能连上了。花了我一天时间,我去!!!
这个mkcert的使用方法可以参考这篇文档,按照这个文档的步骤来,安装好后,生成一个本地ip的证书使用。然后替换掉前后端的用openssl生成的证书就行了,非常简单!!
小节
本小节记录了使用mediasoup中遇到的问题,分别是如何启动mediasoup-demo和移植到vue3中如何建立websocket连接。后续还会持续记录遇到的问题,冲!!!