浅尝不辄止系列之试试腾讯云的 TUIRoom（上）

原创

已于 2022-12-05 11:36:55 修改 · 746 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#腾讯云 #实时音视频 #.net

于 2022-12-05 11:33:27 首次发布

本文介绍了使用腾讯云TUIRoom组件实现直播功能的过程。包括前端集成步骤、用户验证及房间管理等关键环节。

背景

昨天晚上因为和几个朋友约好了，喝了点酒，又不想因为这个断更，白天也实在是没空，就匆忙写了个开头，占了个位置，今天早上赶早赶紧补上~~

近期公司准备要上一期直播活动，因为之前已经集成过腾讯云的 TRTC 产品了，这次的 TUI 组件出来后发现很契合我们的场景，所以决定试一下。

场景

其实标准的在线互动+直播，应该是集成 TUI 组件系列里的 TUIPusher 和 TUIPlayer，但这个组件里自动集成了实时聊天的插件，这本来是没什么可说的。但集成的聊天也就是 IM，体验版只有 100 个 DAU，按月付费 1 个月四舍五入就是 1000 块，其实也不算贵，但多少也是一点成本。

另外就是聊天组件，因为是教育场景，所以我们这边所有的发言都是要人工审核之后才会放开到公屏上。

所以，基于以上两点吧，暂时没有用这种方式。

我们采用的是 TUIRoom 的组件，这个组件，看起来就像是腾讯会议的 Web 版，界面风格什么的都很像，那用这个组件，怎么搞直播呢？别忘了，腾讯那边还有一个利器——旁路直播！只要在服务端集成了他们的 sdk，完全可以做到和 TUIPusher&TUIPlayer 类似的效果了。

集成方案

前端部分（TUIRoom）

前端的集成，官方给出了快速跑通的流程，地址如下：集成TUIRoom.

这个快速跑通的流程，用户自己只需要做 1 件事儿，就是在腾讯云的控制台自己生成两个用于测试的 UserSig（摄像头用户和屏幕分享用户），然后粘贴到配置参数的地方就可以了

await TUIRoomRef.value.init({
  
    // 获取 sdkAppId 请您参考 步骤一   sdkAppId: appId,  // 用户在您业务中的唯一标示 Id  userId: userId,  // 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系  userSig: userSig,  // 用户在您业务中使用的昵称  userName: userId,  // 用户在您业务中使用的头像链接  userAvatar: 'https://s1.ax1x.com/2022/06/30/jutZd0.png',  // 用户用于屏幕分享的唯一 Id，要求 shareUserId = `share_${userId}`, 无屏幕分享功能需求可不传