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. django里static配置静态文件的引入
2. 浅谈地方门户网站运营思路
3. 并发编程面试题（2021最新版）
4. 操作系统笔记（六）调度
5. 创建一个学生信息表，与页面分离
6. mongodb 创建数据库权限账号，增删改查（基本操作）
7. 整理了一个带语法高亮显示，及到处html功能的richtextbox控件
8. 软件开发高手须掌握的4大SQL精髓语句（综合篇）
9. Spring MVC 中的REST支持
10. 【吾日三省吾身】2015.6.07-涅槃行动第二十天
11. 基于SSM+Layui图书借阅管理系统设计
12. 项目实战之微信、微信公众号登陆和支付调起
13. 如何用C语言在控制台输出437代码页编码下的ASCII字符
14. 计算机启动太慢的原因是,电脑启动慢的原因分析
15. 计算机培训有假期吗,教师假期计算机培训心得体会
16. 谈iphone电话短信增强工具kuaidail软件的实现
17. Voyager如何使用Compass
18. 计算机系教师评学总结,信息技术教学心得3篇
19. spring框架学习 - Data Access之 事务管理 - 声明式事务管理
20. OpenCV学习（二）---树莓派上安装opencv

热门文章

1. CORS连续运行参考站
2. Win10黑色白色主题切换
3. 从远程仓库拉取最新代码合并到本地分支
4. 电商产品设计实战（二）：电商整体产品架构
5. Arduino 四位数码管控制
6. 如何设计一个高性能的秒杀系统
7. Axure电子投标、应标交易平台高保真原型+采购计划评标系统物料管理采购立项任务分配项目策划标准寻源（开标、发标、招标、应标、中标、竞价、标书管理）订单管理拟标小组配置
8. Z-Wave Zniffer抓包工具使用指南
9. R语言ggpubr包的ggscatter函数可视化散点图（scatter plot）、cor.coef为散点图添加相关性系数及其显著性、cor.coeff.args参数指定相关性计算方法及显示格式
10. cad lisp 管道截面_CAD中LISP程序自动画管线图