WebRTC 双向视频通话

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 处理实时通信。以下是主要逻辑:

javascript 复制代码
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 - clientRTCPeerConnection 实现视频通话。以下是主要逻辑及相关知识解释:

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

  return stream
}

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

4.2.2 处理视频请求
typescript 复制代码
// 发起视频请求(发起方)
const callRemote = async () => {
  if (calling.value || communicating.value) {
    return
  }
  calling.value = true
  // 获取本地音视频流
  await getLocalStream()

  // 向服务器发送发起视频请求的事件
  caller.value = true
  socket.value.emit('callRemote', roomId)
}

// 接收视频请求(接受方)
const acceptCall = () => {
  // 向服务器发送接受视频请求的事件
  socket.value.emit('acceptCall', roomId)
}

知识解释

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

4.2.3 交换 offer/answer
typescript 复制代码
// 发送方收到同意视频事件
sock.on('acceptCall', async () => {
  if (caller.value) {
    // 发送方
    // 创建RTCPeerConnection对象
    peer.value = new RTCPeerConnection()
    // 添加本地音视频流
    peer.value.addStream(localStream.value)

    // 生成offer
    const offer = await peer.value.createOffer({
      offerToReceiveAudio: true,
      offerToReceiveVideo: true,
    })
    // 设置本地描述的offer
    await peer.value.setLocalDescription(offer)
    // 发送offer
    sock.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)

    // 生成answer
    const answer = await peer.value.createAnswer()
    // 设置本地描述信息
    await peer.value.setLocalDescription(answer)
    // 发送answer
    sock.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)offeranswer 都是基于会话描述协议(SDP)的,SDP 是一种用于描述多媒体会话的格式,它包含了会话的各种信息,如媒体类型、编解码器、传输地址等。通过交换 offeranswer,双方可以协商出一个共同支持的会话配置。
4.2.4 交换 candidate 信息
typescript 复制代码
// 获取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
  • candidatecandidate 包含了设备的网络地址和端口信息,可能是本地地址、反射地址(通过 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

相关推荐
hjjdebug2 小时前
ffplay6 播放器关键技术点分析 1/2
c++·ffmpeg·音视频
2501_915374354 小时前
WebRTC与RTMP
webrtc
开开心心_Every5 小时前
全能视频处理工具介绍说明
开发语言·人工智能·django·pdf·flask·c#·音视频
沐尘而生10 小时前
【AI智能体】智能音视频-硬件设备基于 WebSocket 实现语音交互
大数据·人工智能·websocket·机器学习·ai作画·音视频·娱乐
nightunderblackcat13 小时前
进阶向:Python音频录制与分析系统详解,从原理到实践
开发语言·python·音视频
~央千澈~1 天前
优雅草蜻蜓R实时音视频会议系统云原生私有化部署方案深度解析-优雅草卓伊凡|贝贝|clam|麻子|夜辰
webrtc·实时音视频
Antonio9151 天前
【音视频】HLS简介与服务器搭建
运维·服务器·音视频
开发者工具分享1 天前
文本音频违规识别工具排行榜(12选)
人工智能·音视频
开开心心_Every1 天前
便捷的Office批量转PDF工具
开发语言·人工智能·r语言·pdf·c#·音视频·symfony