基于WebRTC实现音视频通话功能

　　目录

　　随着互联网的发展，实时音视频通话功能已经成为远程办公、社交娱乐和在线教育等领域中不可或缺的一项重要功能。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 的工作原理如下：

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

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

　　常用的API

　　音视频采集

　　// 获取本地音视频流

　　const getLocalStream = async () => {

　　const stream = await navigator.mediaDevices.getUserMedia({ // 获取音视频流

　　audio: true,

　　video: true

　　})

　　localVideo.value!.srcObject = stream

　　localVideo.value!.play()

　　return stream

　　}

　　核心对象

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

　　const peer = new RTCPeerConnection({

　　// iceServers: [

　　// { url: "stun:stun.l.google.com:19302" }, // 谷歌的公共服务

　　// {

　　// urls: "turn:***",

　　// credential: "***",

　　// username: "***",

　　// },

　　// ],

　　});

　　主要会用到以下几个方法：

　　媒体协商方法：

　　重要事件：

　　整个媒体协商过程可以简化为三个步骤对应上述四个媒体协商方法：

　　经过上述三个步骤，则完成了 P2P 通信过程中的媒体协商部分，实际上在呼叫端以及接收端调用setLocalDesccription 同时也开始了收集各端自己的网络信息(candidate)，然后各端通过监听事件 onicecandidate 收集到各自的 candidate 并通过信令服务器传送给对端，进而打通 P2P 通信的网络通道，并通过监听 onaddstream 事件拿到对方的视频流进而完成了整个视频通话过程。

　　实践

　　项目搭建

　　前端项目 项目使用，运行如下命令：

　　npm create vite@latest webrtc-client -- --template vue-ts

　　并且引入:

　　npm install -D tailwindcss postcss autoprefixer

　　npx tailwindcss init -p

　　在生成的 配置文件中添加所有模板文件的路径。

　　/** @type {import('tailwindcss').Config} */

　　module.exports = {

　　content: [

　　"http://www.jb51.net/javascript/index.html",

　　"http://www.jb51.net/javascript/src/**/*.{vue,js,ts,jsx,tsx}",

　　],

　　theme: {

　　extend: {},

　　},

　　plugins: [],

　　}

　　修改中的内容如下：

　　@tailwind base;

　　@tailwind components;

　　@tailwind utilities;

　　自定义修改中的内容如下：

　　视频教程 基于WebRTC实现音视频通话

　　到此这篇关于基于WebRTC实现音视频通话的文章就介绍到这了,更多相关WebRTC音视频通话内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

　　您可能感兴趣的文章: