从0搭建一个WebRTC，实现多房间多对多通话，并实现屏幕录制

【NO.4】从0搭建一个WebRTC，实现多房间多对多通话，并实现屏幕录制

---

这篇文章开始会实现一个一对一WebRTC和多对多的WebRTC，以及基于屏幕共享的录制。本篇会实现信令和前端部分，信令使用fastity来搭建，前端部分使用Vue3来实现。

为什么要使用WebRTC

---

WebRTC全称Web Real-Time Communication，是一种实时音视频的技术，它的优势是低延时。

本片文章食用者要求

---

• 了解音视频基础

• 能搭建简单的node服务，docker配置

• vue框架的使用

环境搭建及要求

---

废话不多说，现在开始搭建环境，首先是需要开启socket服务，采用的是fastify来进行搭建。详情可以见文档地址，本例使用的是3.x来启动的。接下来安装fastify-socket.io3.0.0插件，详细配置可以见文档，此处不做详细解释。接下来是搭建Vue3，使用 vite 脚手架搭建简单的demo。

要求：前端服务运行在localhost或者https下。node需要redis进行数据缓存

获取音视频

---

要实现实时音视频第一步当然是要能获取到视频流，在这里我们使用浏览器提供的API,MediaDevices来进行摄像头流的捕获

enumerateDevices

第一个要介绍的API是enumerateDevices，是请求一个可用的媒体输入和输出设备的列表，例如麦克风，摄像机，耳机设备等。直接在控制台执行API，获取的设备如图

我们注意到里面返回的设备ID和label是空的，这是由于浏览器的安全策略限制，必须授权摄像头或麦克风才能允许返回设备ID和设备标签，接下来我们介绍如何请求摄像头和麦克风

getUserMedia

这个API顾名思义，就是去获取用户的Meida的，那我们直接执行这个API来看看效果

ps: 由于掘金的代码片段的iframe没有配置allow="display-capture *;microphone *; camera *"属性，需要手动打开详情查看效果

通过上述例子我们可以获取到本机的音视频画面，并且可以播放在video标签里，那么我们可以在获取了用户的流之后，重新再获取一次设备列表看看发生了什么变化

在获取了音视频之后，获取的设备列表的详细信息已经出现，我们就可以获取指定设备的音视频数据，详情可以见