在线上线下一体化、虚拟现实加速融合的趋势下，音视频已经演进成一种基本能力，深刻变革了社会的交互方式。未来，音视频作为全真互联时代的重要基石，将持续推动互联网和实体产业的数字化创新与升级。

今天我们将体验腾讯的实时音视频TRTC开发，话不多说，一起开始吧：

一、入门：快速跑通Demo

1.1、进入TRTC

实时音视频：Real-Time Communication（RTC）可以实现用户的就近接入,提供网络低延迟、低丢包率的音视频通信。

首先我们进入TRTC的控制台 https://console.cloud.tencent.com/trtc，可以看到腾讯云为我们提供了：免费的10000分钟音视频套餐包供我们开发使用，已经足够我们随意使用了！

首先点击左侧的应用管理，创建第一个应用实例：

由于是第一次创建，我们直接跟着系统指导进入快速跑通demo环节。

1.2、下载SDK和源码

我们选择开发的是Vue3+TS版本，点击git链接或者直接zip下载Web应用的demo包，下载好后，点击=>已下载下一步：

然后点击下一步，我们可以看到本应用的默认SDKAppID和密钥，把他复制下来就行，后面测试时才需要，如果你不慎忘记保存了，可以打开应用管理，也可以查看到自己的SDKAppID和密钥

保存好id和密钥后，我们用VScode打开刚刚下载好的web包，cd进入quick-demo-vue3-ts文件夹，这个文件夹就是vue3集成好TRTC的完整demo啦。
可以看到quick-demo-vue3-ts文件夹的完整目录如下：

在package.json的dependencies中我们可以发现官方给的vue3的demo技术栈有Vue3.2、Pinia2.0、element-plus2.1、vue-router4.0、TypeScript等技术栈,非常优质非常新，很适合学习使用:

"dependencies": {"aegis-web-sdk": "^1.35.25","clipboard": "^2.0.10","core-js": "^3.8.3","element-plus": "^2.1.10","mitt": "^3.0.0","pinia": "^2.0.13","trtc-js-sdk": "latest","vue": "^3.2.13","vue-i18n": "9","vue-router": "^4.0.3","vue3-clipboard": "^1.0.0"},

1.3、一步运行

如果没有安装yarn，则首先需要安装yarn，在终端输入：npm install -g yarn，然后在终端输入：npm start就可以自动下载安装依赖连接上服务啦，等待片刻，启动成功：

然后我们打开：http://localhost:8080，就可以看到官方demo已经被我们完美运行起来：

1.4、开始测试

测试时，我们需要在参数表单内填入1.2节复制好的SDKAppID和密钥，填入相应的文本框中，这个可以帮我们验证身份调用到TRTC的音视频服务，然后自定义自己的UserID，最后点击Join Room。

点击JoinRoom后我们就加入了60260房间，可以看到左方log日志打印出我们的昵称，然后可以看到哪些人进入了房间，并且可以复制链接邀请好友加入视频通话，demo运行成功！

不光可以视频通话，TRTC还提供了屏幕共享功能，点击Start Share Screen，然后点击分享屏幕或者单个窗口就可以啦！

而如果要实现多人通话，只需要复制链接邀请好友加入：

或者重新开个新页面，输入相同的room号码：

二、进阶：设计web端云监工系统

2.1、思路分析

2020年1月28日，央视频的三路信号受到千万网友的围观，在武汉开建的防治传染病医院火神山医院的建设工地，工人们在争分夺秒日夜奋战，网友们虽然不能到现场出把力，但也给自己加了一个身份：云监工，通过直播镜头去“监督”医院的建设进度。那么我们也可以开发一款云监工系统。

云监工系统主要功能就是用户功能和音视频功能，在音视频方面TRTC提供了一种高并发、低延时、高清流畅、安全可靠的全场景、全互动、全实时的音视频服务的终端服务。

实时：音视频数据传输的延迟要达到“实时”的标准，也就是说延时要小于400ms，能够实现低延时和无卡顿，在正常通信过程中基本感受不到延迟的存在。
音视频：音视频数据传输，实时音视频通信通过服务端为中转节点，即时采集、渲染、处理、传输终端用户的图像、视频、音频数据进行，实现音视频流数据在终端节点间完成通信的过程。

这些特点正适合做一款云监控管理系统，用户登录管理员账号后，可以管理自己的监控设备，实时监控交通、工厂、通道、区域和设备等。

2.2、逻辑设计

2.2.1、AppID和密钥的保密

由于AppID和密钥高度敏感，被破解后极易导致资源被盗用，所以我们将SDKAppID和密钥放入后台服务器计算而不直接写在前端当中。

数据设计：我们为每个用户设计一个用户名，密码，SDKAppID和密钥，用户名密码用来登录，SDKAppID和密钥用于连接TRTC服务（放在后台数据库当中或者给后台计算使用），这样就可以一定程度上保证SDKAppID和密钥在前端不直接显示。
SDKAppID、密钥的绑定：两者储存在后台，与用户的用户名和密码绑定，在本demo中暂时使用mock.js，模拟数据返回SDKAppID和密钥并调用音视频服务，后期将在后台直接开发SDKAppID和密钥的加密和音视频调用服务。

2.2.2、逻辑设计

由于时间紧凑，本次仅仅做一个小demo出来，所以本次需求仅仅做简单的分析，主要的需求有：

登录：用户使用用户名和密码登陆到系统，前端页面对登录用户名和密码做一定的校验，包括为空校验、长度校验和格式校验，后台验证用户名和密码是否对应正确；
监控：可以选择想要监控的地点（厂房、通道、大门），然后可以进入监控流，监控当前地点的情况，并且可以静音或者对讲。
管理：管理摄像和麦克风设备。

2.2.3、项目技术栈

Vue 3.2.13
Element-Plus 2.1.10
Vue-Router 4.0.3
Pinia 2.0.13
Axios 1.2.0
Mitt 3.0.0
TypeScript、TRTC、Less-loader、…

2.2.4、项目结构

└─quick-demo-vue3-ts                   # 前端项目目录├─public└─src├─api                   # 服务AIP配置├─assets                # 静态资源（包含 公共样式、图片）│  ├─css                │  └─image├─components          # 组件封装│  ├─ui                 #一些次要ui组件│  other.vue             # 页面的主要组件├─locales               # 语言模块│  ├─lang                # 语言选项（目前有英文和中文）├─router                # 路由├─store                 # axios 封装├─types                 # 一些类的封装├─views                 # 页面视图└─utils                 # 工具包

2.2.5、项目配置

首先使用git克隆项目：git clone https://github.com/Heavenhjs/TRTC-demo.git，然后输入npm i自动配置项目相关依赖，然后输入npm run serve启动服务。也可以直接npm start。

可能遇到的问题：使用 ’ npm i ’ 安装node_moduels的时候，终端出现错误：
Cannot read properties of null (reading ‘pickAlgorithm‘)
问题解决：终端输入： npm cache clear --force，清理cache之后再npm i

极简化下载与部署：CSDN专属链接

2.2.6、使用

经过使用，发现TRTC服务具有低延时，高清晰度，高抗丢包率，其可以支持多个视频监控，且只要有用户名和密码，可以多人多点实现监控功能，并且支持上万人同时观看也不会卡顿。

本次的实验只是一个非常简单的demo，很多功能和细节都没来得及完整设计，还待改进的有：

区域监控的管理功能，包括新增、删除、控制、清晰度的选择等等；
成员的角色管理和权限管理，不同角色能够访问到的监控权限不同，能够控制监控的权限也应该不同；
云监工聊天区的设计，与即时通信协同使用；
更完整舒适的UI交互；
…

总结

实时音视频 TRTC 主打全平台互通的多人音视频通话和低延时互动直播解决方案，提供小程序、Web、Android、iOS、Electron、Flutter、Windows、macOS 等平台的 SDK 便于开发者快速集成并与实时音视频 TRTC 云服务后台连通。

更有意思的是：通过腾讯云不同产品间的相互联动，还能简单快速地将实时音视频 TRTC 与即时通信 IM、云直播 CSS、云点播 VOD 和音视频内容安全VM等云产品协同使用，扩展更多的业务场景。

【新知实验室-TRTC开发】实时音视频之web端云监工系统（Vue3+Element plus+TS+Pinia）相关推荐

【新知实验室 - TRTC 实践】音视频互动 Demo、即时通信 IM 服务搭建
一.TRTC 初识 TRTC 是什么 TRTC(Tencent RTC)腾讯实时音视频,源自于 QQ 音视频团队,是基于 QQ 音视频多年来的音视频技术积累,位于腾讯云的 RTC 云服务.TRTC 支 ...
【新知实验室】关于实时音视频
首先完成活动报名,通过实名制方式完成活动的报名,报名完成后就是腾讯云账号的注册,通过微信扫码在手机上完成实名认证,认证完成后关注腾讯云的公众号. 这一步完成之后,我们进入新知实验室的项目账号中,刚进来 ...
【新知实验室-TRTC开发】实时音视频之集美真心话
目录前言: 一.说说TRTC呗语音互动直播语聊房语音电台二.成为TRTC的体验官 1.1分钟了解TRTC产品 2.2分钟新手入门 3.别忘了入场券,也别告诉别人哦三.3分钟完成新应用搭建 ...
【新知实验室-TRTC开发】实时音视频之欢度世界杯
目录一.什么是TRTC 二.用5分钟跑通一个demo 1.开通腾讯云-TRTC 2.获取demo必须的两把钥匙 2.1输入应用名称 2.2下载对应的源码包(手机.web.小程序等) 2.3拿到钥匙 ...
新知实验室腾讯云实时音视频 RTC WEB端初识
这里写目录标题前言初识产品产品介绍基础功能高级功能扩展功能快速上手位置创建源码下载源码文档写入密钥使用调试区域前言当前时代是信息行业飞速发展的时代,万物都在朝物联网方向 ...
聊天语音APP开发｜聊天语音软件开发-实时音视频技术
聊天语音软件的开发应该是一个以视频和语音直播为核心的社交系统.对于用户来说,更好的视频和语音直播功能可以增强用户的接受感,让用户持续使用.为了方便视频和语音直播的采用体验,减少直播的延时,聊天语音软件 ...
如何用 React Native 开发实时音视频应用
对于 Web.iOS.Android 开发者来讲,React Native 给跨平台开发工作带来了很大的帮助.仅用 JavaScript 就可以创建运行于移动端的应用.同时,你也可以将 React N ...
简述实时音视频聊天中端到端加密（E2EE）的工作原理
前言本文着重阐述端到端加密(E2EE),端到端加密是确保数据传输安全的可行方法之一.读完这篇文章,你可以了解这种加密方式的基本原理. 说到互联网的数据安全,一般用户可能认为,像端到端加密这类问题事不 ...
最右显示请求服务器不存在,修改合流任务_实时音视频 RTC_服务端API参考_合流任务管理_华为云...
响应示例状态码: 200 修改成功 { "jobs" : [ { "job_id" : "607824b4fa163e19fe301cc817dda ...

【新知实验室-TRTC开发】实时音视频之web端云监工系统（Vue3+Element plus+TS+Pinia）