前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【新知实验室-TRTC开发】实时音视频之web端云监工系统(Vue3+Element plus+TS+Pinia)

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

原创
作者头像
中杯可乐多加冰
发布于 2024-09-28 13:32:28
发布于 2024-09-28 13:32:28
26100
代码可运行
举报
文章被收录于专栏:心源易码心源易码
运行总次数:0
代码可运行

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

今天我们将体验腾讯的实时音视频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等技术栈,非常优质非常新,很适合学习使用:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"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、项目结构

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
└─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等云产品协同使用,扩展更多的业务场景。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【新知实验室 基于WEB的实时音视频(TRTC)案例搭建】
实时音视频(TRTC) 是腾讯云提供的一套低延时、高质量的音视频通讯服务,致力于为腾讯云客户提供稳定、可靠和低成本的音视频传输能力。您可以使用该服务快速构建“视频通话”、“在线教育”、“直播连麦”、“在线会议”等对通信延时要求比较苛刻的音视频应用。 参考链接:https://cloud.tencent.com/document/product/647
IT从业者张某某
2023/10/15
5650
【新知实验室 基于WEB的实时音视频(TRTC)案例搭建】
实时音视频开发学习1 - 音视频初体验
随着移动互联网速度越来越快的发展,实时音视频的发展也越来越收到重视。腾讯实时音视频(Tencent Real-Time Communication,TRTC)经过了10多年在网络音视频技术的发展与积累,并以多人音视频通话和低延时互动直播两大场景化方案,通过腾讯云服务向开发者开放,使得开发者能快速实现低成本、低延时、高品质的音频互动解决方案。
金林学音视频
2020/08/20
4K0
实时音视频开发学习1 - 音视频初体验
新知实验室TRTC初体验
一次偶然的邂逅,让我知道了TRTC实时音视频这个神奇的东西,于是便开始研究起来这个鬼东西,接下来将详细记录一下开发过程,以便后期使用.
全栈若城
2024/02/29
2290
新知实验室TRTC初体验
实时音视频 TRTC 常见问题汇总---咨询问题篇
支持的平台包括 iOS、Android、Windows(C++)、Windows(C#)、Mac、Web、Electron、微信小程序、Flutter,更多详情请参见 平台支持。
腾讯视频云-Zachary
2019/11/01
13.3K0
实时音视频 TRTC 常见问题汇总---咨询问题篇
新知实验室-基于腾讯云音视频TRTC的微信小程序实践
腾讯会议是我们常用的一款线上会议软体,如果想要使用,我们需要下载软体使用,相比之下,基于腾讯云音视频的TRTC提供了一个很好的解决方案,我们通过接入到小程序中来实现快捷的开始会议,加入会议。
知识浅谈
2022/12/02
1.4K0
新知实验室-基于腾讯云音视频TRTC的微信小程序实践
实时音视频-腾讯云实时音视频(TRTC)
腾讯实时音视频(Tencent Real-Time Communication,TRTC)拥有QQ十几年来在音视频技术上的积累,致力于帮助企业快速搭建低成本、高品质音视频通讯能力的完整解决方案。
用户3570397
2019/08/06
10.7K0
实时音视频开发学习9 - 进房权限和画质
开启进房权限的目的是为了避免非会员模式能够进入高级房间,同时解决客户端限制被破解的问题。目前进房权限在iOS、Android、Windows、Electron、微信小程序和Chrome 浏览器都支持。
金林学音视频
2020/08/27
1.9K0
实时音视频开发学习9 - 进房权限和画质
实时音视频,小程序端WebRTC互通
我们在 LiteAVSDK 的最新版本里面加入了对 WebRTC 的支持能力,并且已经跟随微信APP的 6.6.6 版本发布出来,此文档主要介绍如何使用原生的 <live-pusher> 和 <live-player> 标签实现 WebRTC 互通能力。
腾讯云-chaoli
2019/05/24
11.3K0
实时音视频,小程序端WebRTC互通
实时音视频开发学习10 - 小程序端一
小程序端双人通话、多人会议和语音聊天室三个功能。双人通话中实现1V1视频通话,在结合Web IM SDK可实现在线问诊或客服;语音聊天室能支持多人互动语音聊天,混音、混响等声音特效,适用于狼人杀、在线语音直播等社交场景;多人会议支持多路音视频通话、大小画面和屏幕分享等功能,适用于远程培训、在线教育等。
金林学音视频
2020/08/27
1.4K0
实时音视频开发学习10 - 小程序端一
TRTC Android端开发接入学习之什么是TRTC(二)
TRTC 即 Tencent RTC,中文名是腾讯实时音视频,源自 QQ 音视频团队,是基于 QQ 十几年来 的音视频技术积累,在腾讯云上部署售卖的 RTC 云服务,致力于帮助企业快速搭建低成本、高品质、 跨平台的实时音视频互动能力的完整解决方案。 功能上支持语音通话、视频通话、连麦互动、美颜滤镜、旁路推流、视频录制、混流转码、交互式 白板、桌面分享、截图、鉴黄等,并提供微信小程序、 WebRTC、APP、PC、MAC 等全平台互联互 通能力,很好地应用于云游戏、云会议、快直播、实时音视频 PaaS 服务等领域。
腾讯云-hongyang
2020/09/01
2.5K0
TRTC Android端开发接入学习之什么是TRTC(二)
新知 | RT-ONE™&TRTC赋能实时音视频场景创新
今年腾讯云音视频发布了“三合一”的RT-ONE™网络。该网络整合了腾讯云实时通信网络(TRTC)、即时通信网络(IM)以及流媒体分发网络(CDN)三张网络,为业界最完整的音视频通信PaaS平台构建基座,面向教育、零售、泛娱乐等行业需求提供服务。本次新知系列的第一堂课,我们邀请到了腾讯云音视频的技术导师 —— 刘连响,为大家详解RT-ONE™并分享RT-ONE™&TRTC赋能实时音视频场景的一些创新。 接下来的5周,每周四晚上7:30,我们都会在腾讯云音视频视频号、开源中国、InfoQ、51CTO、云
腾讯云音视频
2021/11/22
2.2K6
实时音视频 TRTC 常见问题汇总---集成接入篇
TRTC 的日志默认压缩加密,后缀为 .xlog。日志是否加密是可以通过 setLogCompressEnabled 来控制,生成的文件名里面含 C(compressed) 的就是加密压缩的,含 R(raw) 的就是明文的。
腾讯视频云-Zachary
2019/11/01
14.4K1
实时音视频 TRTC 常见问题汇总---集成接入篇
体验腾讯云音视频
首次开通腾讯云音视频免费赠送10000分钟的免费试用套餐包,包含了视频通话、语音通话、视频互动直播、语音互动直播这些模块,另外说明一下腾讯云音视频是按照 1 : 2 : 4 : 9 : 16 : 36 分别抵扣语音、标清、高清、超高清、2K和4K时长,例如1分钟高清视频时长扣除4分钟免费套餐包时长。
就叫7620521吧
2022/11/25
8.4K0
实时音视频 TRTC 常见问题汇总---咨询问题篇
TRTC 是腾讯云基于 QQ 十多年来在音视频通话技术上积累,结合腾讯浏览服务 TBS WebRTC 能力与腾讯实时音视频 SDK ,为客户提供多平台互通高品质可定制化的 实时音视频互通服务 解决方案。 (1)您可以通过“crtl+F”(win)、“command+F”(mac)搜索关键字。 (2)若没有您想要的问答,欢迎在评论区提问、留言和交流,笔者会定期解答疑惑。 (3)最新产品动态与变更以官网文档为准。
TRTC小百科
2021/09/16
8.9K2
腾讯实时音视频TRTC百万级用户并发解决方案
今年我们经历了一个特殊时期,导致大家必须很长的时间段内在家中,大量的企业也选择让员工在家中远程办公、学校选择让老师和学生在通过远程教学的方式进行学习。
shixin
2020/02/11
2.1K0
实时音视频互动解决方案实时音视频TRTC介绍课程
因为新型肺炎疫情的原因,大家只能把所有线下的东西线上化,进行远程的协作、沟通、娱乐。音视频的信息熵最大,能够获取到的信息最多,音视频通信格外重要,沟通需要实时的反馈,所以在这段特殊时间实时音视频互动需求格外迫切:语音通话、视频通话、语音会议、视频会议、在线教育、视频问诊、语音互动聊天室、视频直播连麦所有的场景都可以通过腾讯实时音视频TRTC产品几行代就能够实现。
shixin
2020/02/14
3.2K0
【实时音视频】视频相亲背后的音视频方案
基础通信网络的提速降费,下一代无线通信网络5G即将迎来商用。基础设施升级的驱动下,信息流动和连接的方式也在经历从文字、图片、语音到视频的进化。
shixin
2020/02/04
3.1K0
关于 TRTC (实时音视频通话模式)在我司的实践
腾讯实时音视频(Tencent Real-Time Communication,TRTC)将腾讯 21 年来在网络与音视频技术上的深度积累,以多人音视频通话和低延时互动直播两大场景化方案,通过腾讯云服务向开发者开放,致力于帮助开发者快速搭建低成本、低延时、高品质的音视频互动解决方案。
发声的沉默者
2021/06/14
2K0
关于 TRTC (实时音视频通话模式)在我司的实践
云终端系列(一)—— 实时音视频Web端接入体验(Vue基础音视频通话篇)
这个系列呢,主要给各位观众老爷看看目前有较大趋势的SaaS应用的SDK在各种主流Web终端的使用姿势和异常分析,如果想要纯粹了解开发的或者云原生,云开发的可以去往另一个系列——云开发系列。
楚歌
2020/11/23
4.3K1
实时音视频(TRTC)常见问题
一般而言,媒体音量指播放音乐、视频的声音、游戏声音等的音量,而通话音量指打电话的音量,视频通话的音量。
腾讯云-yyuanchen
2019/09/27
13.6K1
推荐阅读
相关推荐
【新知实验室 基于WEB的实时音视频(TRTC)案例搭建】
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验