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

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

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

一、入门:快速跑通Demo

1.1、进入TRTC

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

首先我们进入TRTC的控制台 https://console.cloud.tencent.com/trtc,可以看到腾讯云为我们提供了:免费的10000分钟音视频套餐包供我们开发使用,已经足够我们随意使用了!
【新知实验室-TRTC开发】实时音视频之web端云监工系统(Vue3+Element plus+TS+Pinia)_第1张图片
首先点击左侧的应用管理,创建第一个应用实例:
【新知实验室-TRTC开发】实时音视频之web端云监工系统(Vue3+Element plus+TS+Pinia)_第2张图片
由于是第一次创建,我们直接跟着系统指导进入快速跑通demo环节。

1.2、下载SDK和源码

我们选择开发的是Vue3+TS版本,点击git链接或者直接zip下载Web应用的demo包,下载好后,点击=>已下载下一步:
【新知实验室-TRTC开发】实时音视频之web端云监工系统(Vue3+Element plus+TS+Pinia)_第3张图片
然后点击下一步,我们可以看到本应用的默认SDKAppID和密钥,把他复制下来就行,后面测试时才需要,如果你不慎忘记保存了,可以打开应用管理,也可以查看到自己的SDKAppID和密钥
【新知实验室-TRTC开发】实时音视频之web端云监工系统(Vue3+Element plus+TS+Pinia)_第4张图片

保存好id和密钥后,我们用VScode打开刚刚下载好的web包,cd进入quick-demo-vue3-ts文件夹,这个文件夹就是vue3集成好TRTC的完整demo啦。
可以看到quick-demo-vue3-ts文件夹的完整目录如下:
【新知实验室-TRTC开发】实时音视频之web端云监工系统(Vue3+Element plus+TS+Pinia)_第5张图片
在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就可以自动下载安装依赖连接上服务啦,等待片刻,启动成功:
【新知实验室-TRTC开发】实时音视频之web端云监工系统(Vue3+Element plus+TS+Pinia)_第6张图片

然后我们打开:http://localhost:8080,就可以看到官方demo已经被我们完美运行起来:
【新知实验室-TRTC开发】实时音视频之web端云监工系统(Vue3+Element plus+TS+Pinia)_第7张图片

1.4、开始测试

测试时,我们需要在参数表单内填入1.2节复制好的SDKAppID和密钥,填入相应的文本框中,这个可以帮我们验证身份调用到TRTC的音视频服务,然后自定义自己的UserID,最后点击Join Room。
【新知实验室-TRTC开发】实时音视频之web端云监工系统(Vue3+Element plus+TS+Pinia)_第8张图片
点击JoinRoom后我们就加入了60260房间,可以看到左方log日志打印出我们的昵称,然后可以看到哪些人进入了房间,并且可以复制链接邀请好友加入视频通话,demo运行成功!
【新知实验室-TRTC开发】实时音视频之web端云监工系统(Vue3+Element plus+TS+Pinia)_第9张图片
不光可以视频通话,TRTC还提供了屏幕共享功能,点击Start Share Screen,然后点击分享屏幕或者单个窗口就可以啦!
【新知实验室-TRTC开发】实时音视频之web端云监工系统(Vue3+Element plus+TS+Pinia)_第10张图片
而如果要实现多人通话,只需要复制链接邀请好友加入:
【新知实验室-TRTC开发】实时音视频之web端云监工系统(Vue3+Element plus+TS+Pinia)_第11张图片
或者重新开个新页面,输入相同的room号码:
【新知实验室-TRTC开发】实时音视频之web端云监工系统(Vue3+Element plus+TS+Pinia)_第12张图片

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

2.1、思路分析

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

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

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

这些特点正适合做一款云监控管理系统,用户登录管理员账号后,可以管理自己的监控设备,实时监控交通工厂通道区域设备等。
【新知实验室-TRTC开发】实时音视频之web端云监工系统(Vue3+Element plus+TS+Pinia)_第13张图片
【新知实验室-TRTC开发】实时音视频之web端云监工系统(Vue3+Element plus+TS+Pinia)_第14张图片

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开发】实时音视频之web端云监工系统(Vue3+Element plus+TS+Pinia)_第15张图片

【新知实验室-TRTC开发】实时音视频之web端云监工系统(Vue3+Element plus+TS+Pinia)_第16张图片
经过使用,发现TRTC服务具有低延时,高清晰度,高抗丢包率,其可以支持多个视频监控,且只要有用户名和密码,可以多人多点实现监控功能,并且支持上万人同时观看也不会卡顿。

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

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

总结

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

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

你可能感兴趣的:(Vue,实时音视频,前端,Vue,typescript)