基于WebRTC实现音视频通话

最新推荐文章于 2025-03-18 11:50:42 发布

音视频开发老马

最新推荐文章于 2025-03-18 11:50:42 发布

阅读量1.4k

点赞数 1

文章标签： webrtc 音视频

本文链接：https://blog.csdn.net/yinshipin007/article/details/131988337

版权

随着互联网的发展，实时音视频通话功能已经成为远程办公、社交娱乐和在线教育等领域中不可或缺的一项重要功能。WebRTC作为一种开放标准的实时通信协议，能轻松实现浏览器之间的实时音视频通信。

本次主要分享基于WebRTC的音视频通话技术，讲解WebRTC原理和音视频传输等关键概念，

通过案例实践，带大家掌握如何搭建一个音视频通话应用。

背景

随着互联网技术的飞速发展，实时音视频通话已经成为在线教育、远程办公、社交媒体等领域的核心且常用的功能。WebRTC（Web Real-Time Communication）作为一项开放的实时通信标准，为开发者提供了快速构建实时音视频通话系统的能力。在本课程中，我们将从0到1使用 WebRTC 构建一个基于 P2P 架构的音视频通话的应用案例。

应用场景

点对点视频聊天：如微信视频等实时视频通话应用。
多人视频会议：企业级多人视频会议系统，如飞书、钉钉、腾讯会议等。
在线教育：如腾讯课堂、网易云课堂等。
直播：游戏直播、课程直播等。

P2P通信原理

P2P 通信即点对点通信。

要实现两个客户端的实时音视频通信，并且这两个客户端可能处于不同网络环境，使用不同的设备，都需要解决哪些问题？

主要是下面这 3 个问题：

如何发现对方？
不同的音视频编解码能力如何沟通？
如何联系上对方？

下面我们将逐个讨论这 3 个问题。

如何发现对方？

在 P2P 通信的过程中，双方需要交换一些元数据比如媒体信息、网络数据等等信息,我们通常称这一过程叫做“信令(signaling)”。

对应的服务器即“信令服务器 (signaling server)”，通常也有人将之称为“房间服务器”，因为它不仅可以交换彼此的媒体信息和网络信息，同样也可以管理房间信息。

比如：

1）通知彼此 who 加入了房间；2）who 离开了房间 3）告诉第三方房间人数是否已满是否可以加入房间。

为了避免出现冗余，并最大限度地提高与已有技术的兼容性，WebRTC 标准并没有规定信令方法和协议。在本课程中会使用websocket来搭建一个信令服务器

不同的音视频编解码能力如何沟通？

不同浏览器对于音视频的编解码能力是不同的。

比如: 以日常生活中的例子来讲，小李会讲汉语和英语，而小王会讲汉语和法语。为了保证双方都可以正确的理解对方的意思，最简单的办法即取他们都会的语言，也就是汉语来沟通。

在 WebRTC 中：有一个专门的协议，称为 Session Description Protocol(SDP)，可以用于描述上述这类信息。

因此：参与音视频通讯的双方想要了解对方支持的媒体格式，必须要交换 SDP 信息。而交换 SDP 的过程，通常称之为媒体协商。

如何联系上对方？

其实就是网络协商的过程，即参与音视频实时通信的双方要了解彼此的网络情况，这样才有可能找到一条相互通讯的链路。

理想的网络情况是每个客户端都有自己的私有公网 IP 地址，这样的话就可以直接进行点对点连接。实际上呢，出于网络安全和其他原因的考虑，大多数客户端之间都是在某个局域网内，需要网络地址转换（NAT）。

在 WebRTC 中我们使用 ICE 机制建立网络连接。ICE 协议通过一系列的技术（如 STUN、TURN 服务器）帮助通信双方发现和协商可用的公共网络地址，从而实现 NAT 穿越。

ICE 的工作原理如下：

首先，通信双方收集本地网络地址（包括私有地址和公共地址）以及通过 STUN 和 TURN 服务器获取的候选地址。
接下来，双方通过信令服务器交换这些候选地址。
通信双方使用这些候选地址进行连接测试，确定最佳的可用地址。
一旦找到可用的地址，通信双方就可以开始实时音视频通话。

在 WebRTC 中网络信息通常用candidate来描述

针对上面三个问题的总结：就是通过 WebRTC 提供的 API 获取各端的媒体信息 SDP 以及网络信息 candidate ，并通过信令服务器交换，进而建立了两端的连接通道完成实时视频语音通话。

常用的API

音视频采集getUserMedia

// 获取本地音视频流
const getLocalStream = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ // 获取音视频流
    audio: true,
    video: true
  })

  localVideo.value!.srcObject = stream
  localVideo.value!.play()

  return stream
}

核心对象 RTCPeerConnection

RTCPeerConnection 作为创建点对点连接的 API,是我们实现音视频实时通信的关键。