uni-app webrtc 实现H5音视频通讯 实战项目详情

1. 前言

目前市场上音视频技术方案大致分为以下几类，WebRTC因其超低延时、集成音视频采集传输等优点，是在线教育、远程会议等领域首选技术。

WebRTC是 Google 在 2010 年收购 VoIP 软件开发商 GlobalIPSolutions 的 GIPS 引擎后，基于
GIPS 引擎实现的浏览器音视频和数据通信技术，在 2012 年集成到 chrome 浏览器，到目前为止，大部分主流现代浏览器都已经支持。

2. WebRTC架构

一个简单的音视频架构大致如下：

• 音视频采集模块：调用系统API，从系统麦克风和摄像头读取设备并采集音视频数据。音频是PCM数据，视频是YUV数据
• 音视频编码模块：根据不同类型数据使用不同编码方式，将原始PCM、YUV数据压缩编码
• 网络传输模块：将压缩编码后的数据封装成RTP包，通过网络传输至对端，同时对端接收RTP数据
• 音视频解码模块：将接收到的压缩编码数据还原成原始的PCM、YUV/RGB数据
• 音视频渲染模块：拿到原始数据后，音频数据输出到扬声器，视频数据输出到显示器

如果我们按照上面的架构实现一个音视频通信系统，相当于至少需要开发7个小模块，想想就费时费力。此时WebRTC就可以闪亮登场了，它内部标准化的实现上述架构，并在此基础上进行拓展，对外只暴露了相关的API，其架构图如下（ 官网 的有点旧，重新画的）：

WebRTC大体可以分为四层：接口层、Session层、引擎层、设备层：

• 接口层：暴露给业务侧，业务侧可以使用原生的 C++ API 接口或者 Web API 开发音视频实时通信。核心是 RTCPeerConnection
• Session层：用于控制业务逻辑，比如媒体协商、收集 Candidate 等
• 引擎层：包括音频引擎、视频引擎和网络传输
• 设备层：主要和硬件交互，负责音频的采集和播放，视频的采集，物理网络等

3. WebRTC音视频通信过程

一个正常音视频通信架构如上图所示，通信双方分别是 caller（主叫） 与 callee（被叫），两边的内部逻辑相似，下面以caller端为例，了解内部流程：

1. 调用音视频检测模块，检测终端是否有可用的音视频设备
2. 调用音视频采集模块，采集用户音视频数据
3. 根据用户选择，是否开启录制（授权）
4. 通过信令模块交换SDP
5. 创建WebRTC的核心对象RTCPeerConnection，之后添加采集到的音视频数据
6. RTCPeerConnection向STUN(SessionTraversal Utilities forNAT)/TURN(Traversal Using Relays aroundNAT)服务器发送请求，返回caller的外网ip地址和端口号
7. 通过信令服务器，caller和callee互相传递对方的外网ip地址和端口（媒体协商）
8. 最终P2P链接建立完成，后面就会源源不断的发送音视频数据到对端

下面就是该过程对应的泳道图：

4. 信令服务器（重要）

信令是实现音视频通信的重要一环，比如创建房间、离开房间、交换双端offer/answer以及candidate信息等。但WebRTC规范文档中并未定义信令相关的内容，因为不同业务，逻辑不同，信令也会千差万别，所以需要各个业务自己实现一套信令服务。
下面以socket.io为例，实现一套信令服务：

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');const USER_LIMITS = 3;const app = express();
const httpServer = http.createServer(app);
const io = new Server(httpServer);const getRoomUsers = room => {const myRoom = io.sockets.adapter.rooms[room];return myRoom || [];
};const getRoomUsersCount = room => {return getRoomUsers(room).length;
};// 连接事件
io.sockets.on('connection', socket => {// 转发消息socket.on('message', (room, data) => {console.log(`message, room: ${room}, data type: ${data.type}`);socket.to(room).emit('message', room, data);});// 加入房间socket.on('join', room => {socket.join(room);const userCount = getRoomUsersCount(room);console.log(`user join, room number ${userCount}`);// 房间未满员if (userCount < USER_LIMITS) {// 广播用户加入房间socket.emit('joined', room, socket.id);if (userCount > 1) {// 广播其他用户加入房间socket.to(room).emit('otherJoin', room, socket.id);}}// 房间满员else {socket.leave(room);socket.emit('full', room, socket.id);}});socket.on('leave', room => {socket.leave(room);const userCount = getRoomUsersCount(room);console.log(`user leave, room number ${userCount}`);// 广播有用户退出房间socket.to(room).emit('exit', room, socket.id);socket.emit('leaved', room, socket.id);});
});httpServer.listen('80');

常用API

WebRTC 详解信令服务器媒体协商及实战（及通讯过程）相关推荐

1. 服务器给站点读写权限,IIS7目录权限设置的问题详解Windows服务器操作系统 -电脑资料...

   今天自己把服务器安装了windows 2008同时也是iis7了,但是在设置权限时有些小问题不了解后来百度了才知道解决办法, 前段时间在windows server 2008 r2 (x64)服务器上 ...

2. xp系统本地服务器环境配置,Windows XP安装Apache环境图文详解Windows服务器操作系统 -电脑资料...

   本文章来简单的介绍Windows XP安装Apache环境图文方法,有需要了解的朋友可参考参考, 双击 apache_2.2.8-win32-x86-no_ssl.msi 文件,开始安装 Apache ...

3. #史上最详解# IIS服务器查看log日志

   windows IIS 目前有两个版本 IIS6.0,与IIS7.5,不同版本默认的日志位置与日志设置均有差别 https://blog.csdn.net/mystonelxj/article/det ...

4. 刀片服务器改台式电脑_详解刀片服务器如何走向融合

   刀片服务器已经在数据中心固定了很久了,但目前的情况已经发生了巨大的变化,现在许多企业使用机架式服务器而不是刀片式服务器,下文是我给出的专业解析,一起去看看吧. 新趋势下的企业业务需要更低成本.更高效率 ...

5. Git详解之四 服务器上的Git

   Git详解之四 服务器上的Git 服务器上的 Git 到目前为止,你应该已经学会了使用 Git来完成日常工作.然而,如果想与他人合作,还需要一个远程的 Git仓库.尽管技术上可以从个人的仓库里推送和拉 ...

6. 详解nginx服务器绑定域名和设置根目录的方法

   主要介绍了详解nginx服务器绑定域名和设置根目录的方法,nginx服务器绑定域名以及设置根目录非常方便,小 编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 nginx服务器 ...

7. 详解Shell编程之if语句实战(小结)

   本篇文章主要介绍了详解Shell编程之if语句实战(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 对于if语句,其实很多人都肯定的听说过,那么if语句到底是什么, ...

8. linux上 arm开发环境搭建,详解 LINUX下QT For ARM开发环境搭建过程

   LINUX下QT For ARM开发环境搭建过程是本文介绍的内容,不多说,先来看内容.在PC上,我们需要得到两个版本的Qt,分别是:Qt-4.5.2和QtEmbedded-4.5.2-arm.前者包括 ...

9. 『矩阵论笔记』详解最小二乘法(矩阵形式求导)+Python实战

   详解最小二乘法(矩阵形式求导)+Python实战! 文章目录 一. 矩阵的迹 1.1. 转置矩阵 1.2. 迹的定义 1.3. 七大定理 二. 最小二乘法 2.1. 求解介绍 2.2. 另一角度 2. ...

最新文章

1. 一副耳机的钱，竟让我体验了「元宇宙」办公
2. BL1551模拟开关，封装SC70-6
3. POJ1207-The 3n + 1 problem
4. MTCNN——基于级联模型的人脸关键点检测网络
5. html5动画测试题,Html5+js测试题
6. 为啥程序员下班后只关显示器从不关电脑？看看各大网站的答案
7. [原创]基于EDFlib/C++实现脑电数据EDF标准格式读写
8. Spring Boot系列 —（一）手把手搭建 SpringBoot 项目
9. python seek(0)_seek() 方法
10. 英语四级口语测试软件,2021年大学英语四级口语测试题
11. 金针探底技术分析（下）
12. iOS 自定义页面的切换动画与交互动画 By Swift
13. 831数据结构与c语言试题,2018年广东工业大学计算机院831数据结构与C语言[专硕]之C程序设计考研核心题库...
14. 使用vscode编辑vue模板
15. 家用计算机相比工控机优点,具体分析工控机比一般的PC的优势
16. SSM实现点餐系统（含源码）
17. LINGO使用指南(转载)
18. DT时代，企业要有“经营安全、安全经营”新思维
19. html5 video audio currentTime 设定失效、重头开始播放
20. SRT协议详解三 传输参数

热门文章

1. 2.1.1 Abp vNext 地磅无人值守 接口服务创建
2. 用ASP创建Microsoft Word 文件
3. git文件上绿色红色图标不显示的问题
4. 计算机电缆铠装电缆护套管,电缆护套管常用型号介绍
5. 【元胞自动机】激进策略元胞自动机三车道（不开放辅路，软件园影响）交通流模型【含Matlab源码 1297期】
6. 【元胞自动机】激进策略元胞自动机三车道（不开放辅路，软件园不影响）交通流模型【含Matlab源码 1296期】
7. 阿达帕拉肽AVSEHQLLHDKGKSIQDLRRRELLEKLL-Aib-KLHTA-NH2
8. 千千静听声控精灵（语音识别）
9. 免费提供各种网络创业项目资源给你们（wcceo.com）
10. 【原创】让你的系统轻松预览AI,PSD,EPS,CDR缩略图!