> WebRTC 系列教程分为三篇进行介绍，本篇为第二篇，上一篇[WebRTC 这么火 🔥，前端靓仔，请收下这篇入门教程](https://juejin.cn/post/7266417942182608955)。通过上一篇文章，各位小伙伴们应该都了解了 WebRTC 相关概念以及通信过程后，趁热打铁，我们来动手搭建一个 WebRTC 一对一音视频通话项目。 ![hot.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0801dc69301847fcaf061c0feee9db7c~tplv-k3u1fbpfcp-watermark.image?) WebRTC 一对一通话分为服务端和客户端，服务端使用 node 实现信令服务，客户端使用 vue 实现页面逻辑。 ## 服务端实现：使用 Socket.io 搭建信令服务器信令服务器主要是处理通信双端进行**媒体协商和 ICE 候选**。按照 Socket.IO 的[官网教程](https://socket.io/zh-CN/get-started/chat)很快便能搭建一个聊天应用程序。 1. 安装 socket.io 和 express ```bash yarn add socket.io express ``` 2. 使用 express 初始化 socket 服务 ```js let app = express() let http_server = http.createServer(app) http_server.listen(3333) let io = new Server(http_server, { // 允许跨域访问 cors: { origin: '*', }, }) http_server.on('listening', () => { let addr = http_server.address() if (addr) { let port = typeof addr === 'string' ? addr : addr.port } }) ``` 通过`new Server`初始化后，返回的`io`就是一个 socket 实例 3. 监听`connection`事件，获取客户端参数使用上一步的 socket 实例监听`connection`消息，Socket 会加入由其自己的 id 标识的房间，此 id 是一个随机的 20 个字符的标识符； `handshake` 对象是 Socket.IO 会话开始时发生的握手的一些详细信息，从这里可以拿到客户端传过来的`query`参数。 ```js io.on('connection', (socket) => { const { query } = socket.handshake // 获取socket连接参数 username和room const { username, room } = query ... }) ``` 4. 加入房间当获取到客户端传递的`room`房间号后，我们就可以开始加入房间，通过`join`和`leave`可以加入和离开房间，即`socket.join(room)` ```js // 房间人数满了不再加入 if (members.length === 2) { return } // 连接管理 let user = { userId: socket.id, username } members.push(user) // 房间管理 socket.join(room) // 每次连接向房间发送用户列表 io.to(room).emit('userList', members) ``` 向当前房间发送用户信息，房间存在两个人时就可以发起音视频通信了 5. 监听 WebRTC 信令服务所需要监听的事件 ```js // 接收到《接收者》发送candidate连接成功消息，转发给《接收者》 socket.on('candidate', (room, candidate) => { socket.to(room).emit('candidate', candidate) }) // 接收到《发起者》发送offer，转发给《接收者》 socket.on('offer', (room, offer) => { socket.to(room).emit('offer', offer) }) // 接收到《接收者》发送answer，转发给《发起者》 socket.on('answer', (room, answer) => { socket.to(room).emit('answer', answer) }) ``` 注册以上三种事件，用于处理 WebRTC 双端进行媒体协商和 ICE 候选的过程。 6. 离开房间/断开连接除了`disconnect`表示 socket 在断开连接时触发，还有`disconnecting`也有同样的作用，可以看下官网对这两个特殊事件的[说明](https://socket.io/zh-CN/docs/v4/server-socket-instance/#events)。 ```js socket.on('disconnect', () => { members = members.filter((m) => m.username !== user.username) // 断开连接发送用户列表 io.to(room).emit('userList', members) }) ``` 当客户端调用`socket.disconnect()`断开连接时，服务端向房间内推送当前用户信息，客户端做相应处理。到这里，信令服务器服务端的工作已经完成，接下来我们看下客户端。 ## 客户端实现：搭建 1 对 1 音视频聊天客户端使用 vite + vue + antd 搭建，初始化 vue 项目后开始下列操作: ### 采集媒体流因为需要同时显示本地和远端视频，所以需要两个`