WebRTC 双向视频通话

一、项目概述

WebRTC（Web Real - Time Communication）是一种支持浏览器之间进行实时通信的技术，它使得在网页上实现音视频通话、文件共享等功能变得更加容易。为了体验这个技术，所以我实现了webrtc - local

二、项目结构

项目主要分为两个主要部分：webrtc - server（服务端）和 webrtc - client（客户端）。

1. 服务端（webrtc - server）

服务端使用 Node.js 搭建，借助 socket.io （也可以是其他）实现信令的一个交换，其实就是一个信息中转的地方。

2. 客户端（webrtc - client）

客户端基于 Vue 3 和 TypeScript 构建，使用 socket.io - client 与服务端进行通信。

三、项目启动步骤

详看 README

四、代码实现分析

1. 服务端（index.js）

服务端使用 https 协议创建服务器，并使用 socket.io 处理实时通信。以下是主要逻辑：

const socket = require('socket.io')
const https = require('https')
const fs = require('fs')
const path = require('path')const server = https.createServer({key: fs.readFileSync(path.join(__dirname, '../cert/key.pem')),cert: fs.readFileSync(path.join(__dirname, '../cert/cert.pem')),
})const io = socket(server, {cors: {origin: '*', // 配置跨域},
})io.on('connection', (sock) => {console.log('连接成功...')sock.emit('connectionSuccess')// 监听客户端进入房间的事件sock.on('joinRoom', (roomId) => {sock.join(roomId)})// 处理各种视频通话相关事件sock.on('callRemote', (roomId) => {io.to(roomId).emit('receiveCall')})sock.on('acceptCall', (roomId) => {io.to(roomId).emit('acceptCall')})// 处理 offer、answer 和 candidate 信息sock.on('sendOffer', ({ roomId, offer }) => {io.to(roomId).emit('sendOffer', offer)})sock.on('sendAnswer', ({ roomId, answer }) => {io.to(roomId).emit('receiveAnswer', answer)})sock.on('sendCandidate', ({ roomId, candidate }) => {io.to(roomId).emit('receiveCandidate', candidate)})sock.on('hangUp', (roomId) => {io.to(roomId).emit('hangUp')})
})server.listen(3001, () => {console.log('服务器启动成功')
})

服务端主要负责监听客户端的连接和各种事件，用来交换不同客户端的信令等数据。

2. 客户端（App.vue）

客户端使用 Vue 3，结合 socket.io - client 和 RTCPeerConnection 实现视频通话。以下是主要逻辑及相关知识解释：

4.2.1 获取本地音视频流

// 获取本地音视频流
const getLocalStream = async () => {// 获取音视频流const stream = await navigator.mediaDevices.getUserMedia({video: true,audio: true,})// 将媒体流设置到 video 标签上播放localVideo.value!.srcObject = stream// 播放音视频流localVideo.value!.play()// 存储本地流localStream.value = streamreturn stream
}

知识解释：
navigator.mediaDevices.getUserMedia 是 WebRTC 提供的一个 API，用于请求访问用户的摄像头和麦克风。它接受一个约束对象作为参数，该对象指定了需要获取的媒体类型（如视频、音频）以及其他可选的配置。当用户允许访问后，该方法会返回一个 Promise，该 Promise 会解析为一个 MediaStream 对象，该对象包含了用户的音视频流。

4.2.2 处理视频请求

// 发起视频请求（发起方）
const callRemote = async () => {if (calling.value || communicating.value) {return}calling.value = true// 获取本地音视频流await getLocalStream()// 向服务器发送发起视频请求的事件caller.value = truesocket.value.emit('callRemote', roomId)
}// 接收视频请求（接受方）
const acceptCall = () => {// 向服务器发送接受视频请求的事件socket.value.emit('acceptCall', roomId)
}

知识解释：
在 WebRTC 视频通话中，发起方首先需要获取本地音视频流，然后通过 socket.io 向服务端发送视频请求。服务端接收到请求后，将其广播给房间内的其他客户端。接收方接收到请求后，可以选择接受或拒绝。如果接受，接收方会向服务端发送接受请求的事件，服务端再将该事件广播给发起方。

4.2.3 交换 offer/answer

// 发送方收到同意视频事件
sock.on('acceptCall', async () => {if (caller.value) {// 发送方// 创建RTCPeerConnection对象peer.value = new RTCPeerConnection()// 添加本地音视频流peer.value.addStream(localStream.value)// 生成offerconst offer = await peer.value.createOffer({offerToReceiveAudio: true,offerToReceiveVideo: true,})// 设置本地描述的offerawait peer.value.setLocalDescription(offer)// 发送offersock.emit('sendOffer', { roomId, offer })}
})// 接收方收到offer
sock.on('sendOffer', async (offer: any) => {if (called.value) {const stream = await getLocalStream()// 接收方创建自己的RTCPeerConnection对象peer.value = new RTCPeerConnection()// 添加本地音视频流peer.value.addStream(stream)// 设置远端描述信息await peer.value.setRemoteDescription(offer)// 生成answerconst answer = await peer.value.createAnswer()// 设置本地描述信息await peer.value.setLocalDescription(answer)// 发送answersock.emit('sendAnswer', { roomId, answer })}
})// 发送方收到接收方的answer
sock.on('receiveAnswer', (answer: any) => {if (caller.value) {// 设置远端描述信息peer.value.setRemoteDescription(answer)}
})

知识解释：

• offer：发起方通过 RTCPeerConnection.createOffer 方法创建一个 offer，该 offer 包含了发起方的会话描述信息，如支持的编解码器、媒体类型等。然后使用 RTCPeerConnection.setLocalDescription 方法将该 offer 设置为本地描述，并通过 socket.io 发送给接收方。
• answer：接收方收到 offer 后，使用 RTCPeerConnection.setRemoteDescription 方法设置远端描述，然后通过 RTCPeerConnection.createAnswer 方法创建一个 answer，该 answer 包含了接收方的会话描述信息。同样，使用 RTCPeerConnection.setLocalDescription 方法将该 answer 设置为本地描述，并通过 socket.io 发送给发起方。
• 会话描述协议（SDP）：offer 和 answer 都是基于会话描述协议（SDP）的，SDP 是一种用于描述多媒体会话的格式，它包含了会话的各种信息，如媒体类型、编解码器、传输地址等。通过交换 offer 和 answer，双方可以协商出一个共同支持的会话配置。

4.2.4 交换 candidate 信息

// 获取candidate信息
peer.value.onicecandidate = (event: any) => {if (event.candidate) {// 向服务器发送candidate信息sock.emit('sendCandidate', { roomId, candidate: event.candidate })}
}// 接收candidate信息
sock.on('receiveCandidate', async (candidate: any) => {await peer.value.addIceCandidate(candidate)
})

知识解释：

• ICE（交互式连接建立）：由于双方可能位于不同的网络环境中，需要通过 ICE 机制来找到双方之间的最佳通信路径。ICE 会收集双方的网络地址信息，这些信息被称为 candidate。
• candidate：candidate 包含了设备的网络地址和端口信息，可能是本地地址、反射地址（通过 NAT 获得）或中继地址（通过 TURN 服务器获得）。当 RTCPeerConnection 对象收集到一个 candidate 时，会触发 onicecandidate 事件，此时可以将该 candidate 通过 socket.io 发送给对方。
• addIceCandidate：对方接收到 candidate 后，使用 RTCPeerConnection.addIceCandidate 方法将其添加到自己的 RTCPeerConnection 对象中，这样双方就可以尝试通过该 candidate 建立连接。

五、总结

webrtc - local 项目通过结合 WebRTC 技术和 socket.io 实现了简单的局域双向视频通话功能，客户端和服务端在同一网络环境下运行。
在实际应用中，可以考虑使用 STUN/TURN 服务器来解决跨网络通信的问题。

仓库

https://github.com/PL-FE/webrtc-local/tree/main