一关于trtc介绍

首先分析一下trtc代表的意义是什么

• T —— Tencent 腾讯
• R-T —— Real-Time 实时的
• C —— Communication 传播 / 交流 / 通信

通过这些可以得出结论。trtc 时实 音视频是腾讯云提供的一套低延时、高质量的音视频通讯服务致力于为腾讯云客户提供稳定、可靠和低成本的音视频传输能力。您可以使用该服务快速构建“视频通话”、“在线教育”、“直播连麦”、“在线会议”等对通信延时要求比较苛刻的音视频应用。

二关于web demo

目前trtc web是有四种demo供大家选择

Demo 1: base-js
开发框架jQuery + 原生 JavaScript
TRTC Web 基础 Demo (jQuery 版本) 集成了 TRTC Web SDK 的基础音视频通话、设备选择等功能可直接在浏览器中运行。。
Demo 2: quick-demo-js
开发框架无框架原生 JavaScript
TRTC Web 快速运行 Demo (原生 JavaScript 版本) 集成了 TRTC Web SDK 的基础音视频通话、设备选择等功能可直接在浏览器中运行。
Demo 3: quick-demo-vue2-js
开发框架Vue 2 + JavaScript
TRTC Web 快速运行 Demo (Vue2 版本) 集成了 TRTC Web SDK 的基础音视频通话、设备选择等功能需要您安装 Node 环境。
Demo 4: quick-demo-vue3-ts
开发框架Vue 3 + TypeScript
TRTC Web 快速运行 Demo (Vue3 版本) 集成了 TRTC Web SDK 的基础音视频通话、设备选择等功能需要您安装 Node 环境。
 

如果需要了解具体可以查看官方文档如下实时音视频 Web-无 UI 集成方案-文档中心-腾讯云 (tencent.com)

三关于此次trtc搭建关于web sdk的搭建

本次搭建很容易以demo1为例只有短短的四步1.创建一个demo快速应用2.下载dome3.更改配置文件对SDKappID和密钥更换成自己的。4.根据自己需要部署到云服务器。

1.创建demo快速应用

 该页面链接快速跑通Demo - 开发辅助 - 实时音视频 - 控制台 (tencent.com)

2.下载zip作为你的项目进行更改参数由于我比较喜欢简单操作所以直接下载web的就好了

3.对于解压之后的文件结构里面的配置文件进行SDKappID以及密钥进行替换此处路径为Web\base-js\js\debug。

4.完成后打开根目录下的index文件然后进行一个检验本地trtc web的检验。也就是

一般情况下体验 Demo 需要部署至服务器通过 https://域名/xxx 访问或者直接在本地搭建服务器通过 localhost:端口 访问。

目前桌面端 Chrome 浏览器支持 TRTC Web SDK 的相关特性比较完整因此建议使用 Chrome 浏览器进行体验。

单击 加入房间 加入音视频通话房间并且发布本地音视频流。 您可以打开多个页面每个页面都单击 加入房间正常情况下可以看到多个画面并模拟实时音视频通话。

单击摄像头图标可以选择摄像头设备。

单击麦克风图标可以选择麦克风设备。

至此本次本地搭建全部完成 。

第五步直接云端搭建这里是我们搭建内容

https://www.renpurple.top/
房间号38485

四可能出现的问题或者文档看的不仔细

1.配置文件在哪

 

在你解压的web文件后面。

2.js文件无法编译

解决方法更改成txt记事本后缀文件进行更改编辑最后更改后缀为js文件

五、总结

虽然我只体验了 群聊的Js版本的快速跑通但是实际上在接入之前还是把所有的SDK都看过了个遍只不过我不是搞前端方向的技术很多SDK自己并没有开发环境所以选择了一个比较通用化的快速跑通Demo。

从了解SDK文档的过程中发现基本上所有的SDK都是只要有开发环境后把代码下载下来改2行配置代码就能把SDK跑起来TUI需要单独引入这边我自己没有引入不知道引入是否有问题但是引入TUI这里发现竟然没有直接 clone 或者包下载的方式而是只有网页下载压缩包这种方式这就很Low

另外就是各个SDK的文档我不知道是否做了各种SDK版本的平稳退化或者向上兼容虽然我知道这一点工作量非常大但是这个作为一个第三方服务产品来说也至关重要。

最后我要说说TRTC的性能性能和体验还是不错的在开启视频后页面的CPU并没有特别高的增长另外多人视频的延迟性也在接受的范围内。后续有机会会接入到产品中试试。