TUIRoom (Web)，腾讯云快速跑通dom动手实验从0到1

先说结论，功能挺好的，使用起来也很便捷，对于音视频开发人员是福音，对于有开发到该功能的也可以做做聊天室，以后的官网客服可通过聊天室面对面聊天，可以提示工作效率。

但有部分让我的体验感非常糟糕。

一，快速跑通dom和完整示例代码

vue2/vue3:demo地址https://github.com/tencentyun/TUIRoom/tree/main/Web

 上图我指的是我擅长的vue, 这个我根据指引，分别测试vue2，和vue3。

vue2的示例我从github是下载压缩包，然后解压到桌面，根据指示的步骤走：

1，在腾讯云新建应用，打开应用信息，拿到SDKAppID和SDKSecretKey；

2，然后在里面提示的路径下文件里面修改这两个。（/src/config/basic-info-config.js）SDKAPPID, SECRETKEY 在文件里。

3，进入项目，下载依赖npm install，运行npm run dev，打包npm run build

4，在浏览器预览项目

然后我在npm install后，下载不了，翻译说是依赖冲突了

 查到的资料显示大概是这样，我的node版本比较高，是18.12.1，可能是版本不兼容的问题，我没去解决他，因为怕乱改配置，影响到本地，所以没处理。而且我实验TUIRRoom(Web)时，vue2也一样。各种问题。。。下面讲

后续，说个结论：我发现了问题所在，是因为node版本的原因——提供的demo,vue2是按照低版本node安装的，可以去看里面的package.json文件

 

 这个报错是因为 我低版本的node配置没配好，换回高版本node就可以了。

所以推荐（只用单个node）其他 朋友安装node时最好，安装在C盘，因为这个node安装的是与环境挂钩的，所以安装在C盘不会导致很多东西配置时出现错误。

退一万步，而且就算C盘node出现了错误（网上也有一大堆解决方法——我也是在试过大量方法不行后，而且vue3项目又可以实现，所以才得出的结论）

而如果要像我一样的朋友（使用多个node）的朋友，我在下面也准备了这方面的推文链接。

然后，我又跑了vue3的，同样按照下面的指引，和之前的流程一样

 ​​​​​步骤1,2​成功跑通了，npm install也没问题，但是我创建房间，刚开始建不了（两种房间都一样），点了好几次才创建成功。

成功：

2，另一种快速跑通dom

腾讯云产品概况https://console.cloud.tencent.com/trtc

这种在腾讯云里找到开发辅助-》快速跑通demo就可以找到，或是在概况上右边侧边栏的快速跑通demo一栏上，点击直接前往即可。然后按照流程走即可。。。。。

结论：我选择web的demo，最后成功了，可以打开。但是要求要有麦克风和摄像头，我那里没有。所以没有测全

可以进，点击进入 

只剩下共享和退出功能能用 （因为没有摄像头和话筒）

 

共享，能看到里面的画面，随着我的操作而改变。 

推荐一篇文章（里面有上面流程的详细步骤）：ferial写的【新知实验室】TRTC动手实验从0到1

二，集成 TUIRoom (Web)

集成 TUIRoom (Web)https://cloud.tencent.com/document/product/647/74765文档

跟着文档走（vue3+vite+ts 推荐。原因无他，快）

 然后是

cd TUIRoom-demo

npm install

npm run dev

 

最好删掉 

 

 后面就是npm run dev 和 npm run build 就没了

不过注意！

如果使用npm 7+以上的版本，则要添加一段代码：

因为他这里没有输出代码，运行会报错

在vite.config.ts文件里——加上下面这段

import path from "path";

export default defineConfig({

加入这段：

  resolve: {

    alias: {

      '@': path.resolve(__dirname, 'src'),

      '@TUIRoom': path.resolve(__dirname, 'src/TUIRoom'),

    },

  },

当然，可能还会出现没配置好@路径的问题，直接改或者配置改就可以了

报错：

因为TUIRoom文件夹里就一个地方引用@，路径《/src/TUIRoom/components/RoomHeader/UserInfo.vue:54:0》

import TUIRoomCore from '@/TUIRoom/tui-room-core';

改：

import TUIRoomCore from '../../../TUIRoom/tui-room-core';

配置：

自己找吧，我自己找了几个方法，试了不行，也就不推荐给大家了

效果图：

报错只是因为我没连摄像头和话筒 

建议：

node版本太低，你都无法跑通vue3项目，会报vite的错误（vue3里试过，跑不了）

vue2是支持高版本node的，除非你公司用了指定的版本。至于我cmd下载不了依赖（无法使用是因为没在环境配置——配好node（下面这篇文章有讲解））

npm 全局安装vuecli报错 -v不能使用问题（如：vue-cli，webpack）nvm模式 - 程序猿小曾 - 博客园

切记vue3的node 和 vue2的node有很大的区别；

然后请将node配置好 环境变量

下面说说vue2的吧

这里和上面vue3没什么区别：（该讲的注意点是一样的，上面都说了）

所以简单过一下：

步骤三，复制 TUIRoom/Web/vue2/src/TUIRoom 文件夹到已有项目 src/ 目录下。

 复制页面上vue2模块代码到 项目App.vue上，改TUIRoom 接口的参数（参数在步骤一）

步骤四：配置开发环境

配置ts    vue add typescript

 npm install vue@2.7.8

npm install sass sass-loader @types/events -S -D

npm install element-ui pinia rtc-beauty-plugin tim-js-sdk trtc-js-sdk tsignaling events -S

步骤五：开发环境运行npm run serve

不过运行后出现bug (eslint 造成的)

eslint严格模式很麻烦，个人不喜欢。解决方法也很简单：

在vue.config.js里面的module.exports添加一行代码

module.exports = {

  lintOnSave:false

}

 结果打开

 运行报错：

上图这个报错：是因为我 切换版本node 去下载依赖 ，没切回来的原因，切换回来运行就好了

步骤六：生产环境部署npm run build 

vue3+webpack+ts版本

相比vue3+vite+ts，他在配置上要复杂许多

说下遇到的问题吧，正常按照腾讯云文档走是OK的

但是，如果你先在一个node里走了vue2+webpack+ts的流程，再走vue3+webpack+ts流程。那么恭喜你，会触发下图的bug。

因为大概是你已经在这个node上配置了一套开发/生产环境依赖的配置了。配另一套就会报这个：开发/生产环境依赖已存在的错误 

 我的做法是换个node环境去下载，就可以了。——如果还是不行，请删除你之前下载的开发/生产环境依赖

然后再重新下载vue+webpack+ts的一套开发/生产环境依赖

总结：

简单来说，这套音视频组件——如果用到项目上，免不了遇到各式各样的问题。我上面给大家列举的那些问题/报错，是我在不同电脑，一台笔记本，一台台式上运行测试遇到的问题（及大部分解决方案）

如果能帮到各位就再好不过了，其中只有 vue3的demo 和 快速跑通dom这两个没遇到啥问题，就直接实现【哭笑不得】

其中大部分的问题，都出在node上，

好啦，今天的分享到这里就结束啦，想要更深入了解或者查看原理、或其他功能的高级用法，可以查看官方文档，这里就不做展示啦。

感谢大家的观看，动动你们发财的手指，如果觉得有用的话，帮忙点个赞奥~哈哈哈，谢谢大家~

引用了几篇推文：

腾讯云官方文档

ferial 的【新知实验室】TRTC动手实验从0到1

以及程序猿小曾的npm 全局安装vuecli报错 -v不能使用问题（如：vue-cli，webpack）nvm模式