webrtc之mediasoup使用

1,143 阅读2分钟

上一篇介绍了使用peerjs库来实现音视频通话,相当的简单。但是,当需要考虑更加复杂的场景时,比如多人音视频通话时,需要考虑到不同的网络状况,这时用peerjs库就显得比较鸡肋了。看了一圈文档,没有介绍说如何使用SFU模式,也就是说你得自己去实现SFU,这就有点为难我胖虎了。有一说一,还是比较难的,那还是去拥抱mediasoup吧。几个月前,研究了一下mediasoup,看不懂完全看不懂,当时就直接放弃了。现在又得捡回来了0.0

这小节就只是介绍如何启动mediasoup,以及从将mediasoupreact移植到vuewebsocket如何连接的问题,其他的等我深入使用了再来记录一下。

启动mediasoup-demo

光是本地运行mediasoup-demo就容易遇到问题,像我就花了好久时间才知道了如何启动(我太菜了T_T)。可以参考这篇文档

具体过程如下:

  1. 拉代码 :git clone git@github.com:versatica/mediasoup-demo.git
  2. 进入server目录下,将server中的config.example.js改名为 config.js
  3. 使用openssl创建新的证书,然后替换掉config.js证书的地址
  4. (windows下)查看本机ip地址,在cmd中运行ipconfig,然后将server目录下的package.json中的start命令改成set INTERACTIVE=true MEDIASOUP_ANNOUNCED_IP=你的ip地址 && node server.js
  5. 然后在server目录下执行npm install --legacy-peer-deps
  6. 再回到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连接。后续还会持续记录遇到的问题,冲!!!