腾讯云TRTC —— 实时音视频介绍以及web本地搭建操作步骤以及解决部分报错

一：关于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.下载dome，3.更改配置文件，对SDKappID和密钥更换成自己的。4.根据自己需要部署到云服务器。

1.创建demo快速应用：

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

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

3.对于解压之后的文件结构里面的配置文件进行SDKappID以及密钥进行替换（此处路径为：Webbase-jsjsdebug。）

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并没有特别高的增长，另外多人视频的延迟性也在接受的范围内。后续有机会会接入到产品中试试。