WebRTC实战 | 快速搭建1对1音视频通话

WebRTC 系列教程分为三篇进行介绍，本篇为第二篇，上一篇WebRTC 这么火 🔥，前端靓仔，请收下这篇入门教程。

通过上一篇文章，各位小伙伴们应该都了解了 WebRTC 相关概念以及通信过程后，趁热打铁，我们来搭建一个 WebRTC 一对一音视频通话项目。

WebRTC 一对一通话分为服务端和客户端，服务端使用 node 实现信令服务，客户端使用 vue 实现逻辑。

服务端实现：使用 Socket.io 搭建信令服务器#

信令服务器主要是处理通信双端进行媒体协商和 ICE 候选（NAT 穿越信息）

按照 Socket.IO 的官网教程很快便能搭建一个聊天应用程序。

安装 socket.io 和 express
Terminal window
```
1
yarn add socket.io express
```

使用 express 初始化 socket 服务

1
let app = express()
2
let http_server = http.createServer(app)
3
http_server.listen(3333)
4
let io = new Server(http_server, {
5
  // 允许跨域访问
6
  cors: {
7
    origin: '*',
8
  },
9
})
10
http_server.on('listening', () => {
11
  let addr = http_server.address()
12
  if (addr) {
13
    let port = typeof addr === 'string' ? addr : addr.port
14
  }
15
})

通过new Server初始化后，返回的io就是一个 socket 实例

监听connection事件，获取客户端参数

使用上一步的 socket 实例监听connection消息，Socket 会加入由其自己的 id 标识的房间，此 id 是一个随机的 20 个字符的标识符；

handshake 对象是 Socket.IO 会话开始时发生的握手的一些详细信息，从这里可以拿到客户端传过来的query参数。
```
1
io.on('connection', (socket) => {
2
  const { query } = socket.handshake
3
  // 获取socket连接参数 username和room
4
  const { username, room } = query
5
  ...
6
})
```

加入房间

当获取到客户端传递的room房间号后，我们就可以开始加入房间，通过join和leave可以加入和离开房间，即socket.join(room)

1
// 房间人数满了 不再加入
2
if (members.length === 2) {
3
  return
4
}
5
// 连接管理
6
let user = { userId: socket.id, username }
7
members.push(user)
8
// 房间管理
9
socket.join(room)
10
// 每次连接向房间发送用户列表
11
io.to(room).emit('userList', members)

向当前房间发送用户信息，房间存在两个人时就可以发起音视频通信了

监听 WebRTC 信令服务所需要监听的事件

1
// 接收到《接收者》发送candidate连接成功消息，转发给《接收者》
2
socket.on('candidate', (room, candidate) => {
3
  socket.to(room).emit('candidate', candidate)
4
})
5
// 接收到《发起者》发送offer，转发给《接收者》
6
socket.on('offer', (room, offer) => {
7
  socket.to(room).emit('offer', offer)
8
})
9
// 接收到《接收者》发送answer，转发给《发起者》
10
socket.on('answer', (room, answer) => {
11
  socket.to(room).emit('answer', answer)
12
})

注册以上三种事件，用于处理 WebRTC 双端进行媒体协商和 ICE 候选的过程

离开房间/断开连接

除了disconnect表示 socket 在断开连接时触发，还有disconnecting也有同样的作用，可以看下官网对这两个特殊事件的说明
```
1
socket.on('disconnect', () => {
2
  members = members.filter((m) => m.username !== user.username)
3
  // 断开连接发送用户列表
4
  io.to(room).emit('userList', members)
5
})
```
当客户端调用socket.disconnect()断开连接时，服务端向房间内推送当前用户信息，客户端做相应处理。

到这里，信令服务器服务端的工作已经完成，接下来我们看下客户端。

客户端实现：搭建 1 对 1 音视频聊天#

客户端使用 vite + vue + antd 搭建，初始化 vue 项目后开始下列操作

采集媒体流#

因为需要同时显示本地和远端视频，所以需要两个<video>标签

1
<template>
2
  <div class="video">
3
    <section class="local-video">
4
      <video ref="localVideoRef"></video>
5
    </section>
6
    <section class="remote-video">
7
      <video ref="remoteVideoRef"></video>
8
    </section>
9
  </div>
10
  ...
11
</template>
12

13
<script setup>
14
import Video from './Video.vue'
15
import { ref, onMounted } from 'vue'
16

17
const emits = defineEmits(['streamSuccess', 'leave'])
18

19
const remoteVideoRef = ref(null)
20
const localVideoRef = ref(null)
21

22
onMounted(() => initVideo(localVideoRef.value.$el))
23
// 初始化本地视频
24
const initVideo = async (video) => {
25
  if (!video) return
26
  try {
27
    let config = {
28
      video: true,
29
      audio: true,
30
    }
31
    let stream = await navigator.mediaDevices.getUserMedia(config)
32
    video.srcObject = stream
33
    emits('streamSuccess', { stream, remoteVideoRef })
34
    video.play()
35
  } catch (e) {
36
    console.log(`error: `, e)
37
  }
38
}
39
...
40
</script>

在挂载时，开始初始化本地视频：

使用navigator.mediaDevices.getUserMedia(config)获取到视频流后，通过video.srcObject可以将获取到的视频流在 video 元素上进行播放。

初始化 Socket.io 客户端#

在采集媒体流完成后，回调streamSuccess方法，开始初始化 socket 服务

1
// 等待本地视频初始化完成后发送信令服务
2
const streamSuccess = ({ stream, remoteVideoRef }) => {
3
  const info = { ...userInfo, localStream: stream, remoteVideoRef }
4
  socket = initSocket(info)
5
}

1
// initSocket
2
const initSocket = ({ username, room, remoteVideoRef, localStream }) => {
3
  let localPc
4
  // 连接server 携带username和room
5
  const socket = io('http://localhost:3333', {
6
    path: '/',
7
    query: { username, room },
8
  }).connect()
9

10
  // 当有人加入房间时
11
  socket.on('userList', async (res) => {
12
    // 房间少于两人时 对方掉线 则关闭对方视频
13
    if (res.length < 2) {
14
      let video = remoteVideoRef.value.$el
15
      video.srcObject = null
16
      return
17
    }
18
    if (username === res[0]?.username) sendOffer()
19
  })
20
}

我这里的逻辑是：当有人加入房间时，服务端 Socket 发送房间人数列表，当房间存在两个人时，第一个加入的人作为呼叫方，第二个人作为被叫方，双方开始媒体协商

媒体协商#

上面我们在说到房间存在两人时，呼叫方开始发送 offer，即sendOffer方法，在此方法内部需要做以下事情：

创建 RTCPeerConnection 对象#

我们在上篇文章提到 RTCPeerConnection 对象的作用，还不太清楚的小伙伴可以回头再看一下。

为了让 WebRTC 的相关 api 在各个浏览器中都能够正常的运行，强烈建议使用补充库，例如强大并且被广泛支持的 Adapter.js，引入它可以确保 WebRTC 在各个浏览器中的兼容性。

两种方法引入：

直接引入

在 html 中添加https://webrtc.github.io/adapter/adapter-latest.js

npm 方式

1
yarn add webrtc-adapter

在项目中引入即可

1
// 仅仅只需要引入 adapter 即可
2
import adapter from 'webrtc-adapter'

这里的rtcConfig用于设置新连接的选项：

1
export const rtcConfig = {
2
  iceServers: [
3
    {
4
      urls: ['stun:stun.l.google.com:19302'],
5
    },
6
    {
7
      urls: ['turn:wangxiang.website:3478'],
8
      username: 'admin',
9
      credential: 'admin',
10
    },
11
  ],
12
}

如上所示，我们配置了iceServers，数组内每个对象描述一个可能被 ICE 代理使用的服务器，也就是 STUN 或 TURN 服务器。如果未指定，则将在没有可用的 STUN 或 TURN 服务器的情况下进行连接尝试，就只能使用 host 类型的 candidate 尝试连接，即局域网内 P2P 通讯。

1
const sendOffer = async () => {
2
  // 初始化RTCPeerConnection对象
3
  localPc = new RTCPeerConnection(rtcConfig)
4
  // 添加RTC流
5
  localStream.getTracks().forEach((track) => {
6
    localPc.addTrack(track, localStream)
7
  })
8
  // 创建offer
9

10
  // 收集candidate
11
}

处理 offer#

这里通过createOffer方法创建 offer，通过setLocalDescription存储为本地描述，接着通过信令服务将 offer 传递到被叫方。

1
const sendOffer = async () => {
2
  // 初始化RTCPeerConnection对象
3
  // 添加RTC流
4
  // 处理offer
5
  let offer = await localPc.createOffer()
6
  await localPc.setLocalDescription(offer)
7
  socket.emit('offer', room, offer)
8
}

处理 candidate#

当通过setLocalDescription方法更改本地描述之后，RTCPeerConnection 对象会抛出icecandidate事件。通过监听此事件，可以获取到收集到的 candidate，接着通过信令服务器将 candidate 传递到被叫方。

1
const sendOffer = async () => {
2
  // 初始化RTCPeerConnection对象
3
  // 添加RTC流
4
  // 创建offer
5
  // 处理 candidate
6
  localPc.onicecandidate = (event) => {
7
    console.log('localPc:', event.candidate, event)
8
    if (event.candidate)
9
      socket.emit(SOCKET_ON_RTC.CANDIDATE, room, {
10
        pc: 'local',
11
        candidate: event.candidate,
12
      })
13
  }

呼叫方 offer 发送完毕，等待被叫方传回 answer。

被叫方处理#

被叫方首先通过信令服务器获取到 offer：

1
socket.on('offer', async (offer) => {
2
  console.log(`接收到offer`, offer)
3
  // 存储offer 发送answer
4
  sendAnswer(offer)
5
})

接着在sendAnswer方法中执行与呼叫方同样的操作，即创建 RTCPeerConnection 对象、处理 answer、处理 candidate 等

1
const sendAnswer = offer => {
2
  localPc = new RTCPeerConnection(rtcConfig)
3
  // 添加RTC流
4
  localStream.getTracks().forEach((track) => {
5
    localPc.addTrack(track, localStream)
6
  })
7
  // 处理answer
8
  await localPc.setRemoteDescription(offer)
9
  const answer = await localPc.createAnswer()
10
  await localPc.setLocalDescription(answer)
11
  socket.emit('answer', room, answer)
12
  // 处理candidate
13
  localPc.onicecandidate = (event) => {
14
    console.log('localPc:', event.candidate, event)
15
    if (event.candidate)
16
      socket.emit('candidate', room, {
17
        pc: 'remote',
18
        candidate: event.candidate
19
      })
20
  }
21
}

呼叫方接收 answer#

1
// 接收answer
2
socket.on('answer', async (answer) => {
3
  console.log(`接收到answer`, answer)
4
  // 完善本地remote描述
5
  await localPc.setRemoteDescription(answer)
6
})

媒体协商过程结束。

建立连接#

icecandidate 收集后，通过信令服务器发送到对端，双端交换 candidate 信息，建立连接。

1
localPc.addIceCandidate(candidate)

处理音视频数据#

初始化 RTCPeerConnection 对象完成后，即localPc，我们调用了addTrack()方法可以将本地视频流localStream的每个轨道添加到localPc对象的一组轨道上。

当建立连接完成后，这些 tracks 会源源不断的传输给对端，也就是我们称的推流。

当对端收到 tracks 推送时，通过回调函数localPc.ontrack，就可以拿到远程推送的流媒体对象：

1
let video = remoteVideoRef.value.$el
2
localPc.ontrack = (e) => {
3
  video.srcObject = e.streams[0]
4
  video.oncanplay = () => video.play()
5
}

当互相拿到对方的流媒体对象时，将流媒体通过video.srcObject赋给<video />标签，此时音视频数据就展现在页面上了 🎉。

更多#

通过 RTCDataChannel 传输文本、文件等#

RTCDataChannel 接口是 WebRTC API 的一个功能，可以为通信双方打开一个通道，通过该通道发送和接收任意数据，如：文本、文件等

1
dataChannel = RTCPeerConnection.createDataChannel(label[, options]);

通过 RTCPeerConnection 提供的createDataChannel方法来创建 RTCDataChannel，当通道连接成功后，触发回调函数onopen，这时候就可以通过dataChannel.send(message)发送消息了。

1
let dataChannel
2
const sendMessage = (username) => {
3
  const button = document.querySelector('.data-channel__button')
4
  const input = document.querySelector('.data-channel__input')
5
  button.disabled = false
6
  button.onclick = () => {
7
    if (!input.value) return
8
    const message = `${username}: ${input.value}`
9
    dataChannel.send(message)
10
    input.value = ''
11
    receiveMessage(message)
12
  }
13
}
14
const receiveMessage = (message) => {
15
  const output = document.querySelector('.data-channel__output')
16
  output.scrollTop = output.scrollHeight //窗口总是显示最后的内容
17
  output.value = output.value + message + '\r'
18
}
19
const openDataChannel = (localPc, username) => {
20
  // 创建datachannel通道
21
  dataChannel = localPc.createDataChannel('test')
22
  // datachannel通道打开 开始发送消息
23
  dataChannel.onopen = () => sendMessage(username)
24
  localPc.ondatachannel = (event) => {
25
    // 成功拿到 RTCDataChannel
26
    const dataChannel = event.channel
27
    dataChannel.onmessage = (event) => receiveMessage(event.data)
28
  }
29
}
30

31
export default openDataChannel

通过监听ondatachannel事件，获取到对端的RTCDataChannel，接着监听onmessage事件，即可拿到对端传输的消息。

中继方式：搭建 TURN 服务器#

我们上面搭建的音视频通信只能在同一网络中进行，如果不同网络连接就会失败，这时候就需要 TURN 服务器来解决这个问题。

TURN 服务有两个作用：一是提供 STUN 服务，客户端通过 STUN 服务获取自己的公网地址；二是提供数据中继服务（当数据通信双方无法通过 P2P 传输时，就需要通过中继的方式让通信双方的数据可以互通）。

下载源码

目前最著名的 TURN 服务器是由 Google 发起的开源项目 coturn，coturn 服务器完整的实现了 STUN/TURN/ICE 协议，支持 P2P 穿透防火墙。
Terminal window
```
1
git clone https://github.com/coturn/coturn
```
生成 Markfile
Terminal window
```
1
cd coturn
2
./configure --prefix=/usr/local/coturn
```
需要安装 libevent 库，不然会报错

coturn-make-error.png
安装 libevent

如果已经安装过，则忽略这一步

首先安装运行 coturn 需要依赖的环境
Terminal window
```
1
yum install openssl openssl-libs libevent2 libevent-devel
```
如果 libevent2 安装失败，手动安装下载地址：http://libevent.org/
Terminal window
```
1
# 解压
2
tar -xf libevent-2.0.22-stable.tar.gz
3
cd ibevent-2.0.22-stable
4
# 生成Markfile
5
 ./configure --prefix=/usr
6
# 执行make编译libevent
7
make
8
# 安装
9
make install
```
完成后，测试是否安装成功
Terminal window
```
1
ls -a /usr/lib |grep libevent
```
libevent-success.png
继续安装 coturn
Terminal window
```
1
./configure
2
make
3
make install
```
验证 coturn 服务是否安装成功
/usr/local/bin/turnserver
```
1
which turnserver
```

生成签名

1
cd /usr/local/etc/
2

3
openssl req -x509 -newkey rsa:2048 -keyout /usr/local/etc/turn_server_pkey.pem -out /usr/local/etc/turn_server_cert.pem -days 99999 -nodes

一路回车即可，完成后在/use/local/etc 目录下就有了turn_server_pkey.pem和turn_server_cert.pem两个文件。

修改配置文件

1
cp turnserver.conf.default turnserver.conf
2
vim turnserver.conf

1
# 网卡
2
listening-device=eth0
3
# 监听的端口
4
listening-port=3478
5
# 绑定的公网地址
6
external-ip=43.140.xxx.xx
7
# 用户名和密码
8
user=admin:123456
9
# 名称
10
realm=admin

启动 turnserver
Terminal window
```
1
./turnserver ../etc/turnserver.conf
```
查看是否启动成功
Terminal window
```
1
ps -ef|grep turnserver
```
检测

在线检测 ICE 穿透的地址：https://webrtc.github.io…

上面这个地址用于检测 turn 服务是否可用，注意查看服务器端口是否已开启3478`

coturn-server-success.png

如果你测试一个 STUN 服务器，你能收集到一个类型为“srflx”的候选者，它就可以工作。如果你测试一个 TURN 服务器，你能收集到一个类型为“relay”的候选人，它就会工作。
搭建完成后，将可以将此链接复制，作为 RTCPeerConnection 连接时的 iceServers 配置。完成后，在不同网络之间，也能实现音视频通话了。

总结#

本篇文章是在之前原理的基础上，从 0 到 1 实现一对一的音视频通话，接下来还有 WebRTC 多人通信的架构，以及如何使用 LiveKit 快速搭建多人音视频通话。

👉🏻 在线体验地址 👉🏻 完整代码地址

以上就是本文的全部内容，希望这篇文章对你有所帮助，欢迎点赞和收藏 🙏，如果发现有什么错误或者更好的解决方案及建议，欢迎随时联系。

音乐

音乐