新知实验室_体验 TRTC 视频会议

admin管理员组

文章数量:1666532

新知实验室_腾讯实时音视频产品体验

在日常生活中，音视频通话、直播及视频会议等诸多音视频场景已经很常见，腾讯发布的 实时音视频（Tencent RTC） 产品，基于腾讯多年来在网络与音视频技术上的深度积累，让开发者能快速上手搭建高质量的音视频场景。

腾讯产品的音视频场景大家都很熟悉，有QQ、微信的语音和视频通话，腾讯会议等，TRTC 基于深厚的技术积累，为开发者提供了多平台的成熟方案，包括 Android、iOS、Web、小程序、Windows 及 Mac OS 等平台，我体验了一下 Demo（线上 Demo 地址)，感觉还不错，小程序端的解决方案还做了主流手机牌子的适配，试用下 Web 端的 TRTC sdk 看看。

开通 TRTC 产品

得先去 TRTC 开通地址 创建应用，TRTC 是基于腾讯云提供服务的，需要先创建 TRTC 应用，才能使用服务，应用的 SDKAppID 和 SecretKey 是服务认证凭据，本地跑 demo 得用这个；

创建应用送 10000 分钟免费体验，足够体验下了；具体的用量，在控制台里也能看到：

无 UI 方案体验

TRTC 提供的方案，分为无 UI 集成 和 有 UI 集成 两大类，先体验下「无 UI 方案」；

我之前只接触过 WebRTC 的一些简单场景，先拉取了 TRTC Web 的 Demo，本地跑下；

腾讯提供了完善的跑通 demo 文档，跟着走就行；

运行环境

我的运行环境是：

> node -v
v16.16.0

> nvm -v
8.16.0

# chrome 版本
107.0.0.0

仓库里一共是五个 Demo：

base-js
base-react-next
quick-demo-js
quick-demo-vue2-js
quick-demo-vue3-ts

base-js

最基础的 demo，用 script 方式引入了 TRTC sdk；

在/base-js/js/debug/GenerateTestUserSig.js里，填入自己 TRTC 应用的 SDKAppID 和 SecretKey ，在根目录下启动 http 环境，我是用的 live-server 启动的：

# base-js根目录
live-server --port=8899

启动后，访问http://127.0.0.1:8899，先会有个音视频设备检测，像 WebRTC 应用也会先调 getUserMedia 来检测设备环境，同意权限即可 ；

然后是「进入房间」：

用户名和房间号都是随机生成的，点击「进入房间」，就进到了房间页：

可以多个用户进入同一房间，输入相同的房间号，点击「进入房间」；
界面简单，流程蛮清晰的，看了下代码，认证 TRTC 服务时，需要 userSig 验签：

// GenerateTestUserSig.js
const generator = new LibGenerateTestUserSig(SDKAPPID, SECRETKEY, EXPIRETIME);
const userSig = generator.genTestUserSig(userID);

通过 SDKAppID 、SecretKey 和 expireTime 哈希加密，生成签名，加了层认证，加强了腾讯云服务防护；

quick-demo-js

这个项目也是用live-server启动，相较 base-js 界面和功能丰富一些，有步骤引导，SDKAppID 和 secretKey 放到了界面表单上填；

摄像头和麦也可以切换；

进入房间

可以对照着每个按钮的绑定函数，看下trtc-js-sdk 的逻辑，比如「进入房间」按钮：

async function joinRoom() {
	initParams()
	client = new Client({sdkAppId, userId, roomId, secretKey, cameraId, microphoneId});
	try {
		await client.join();
		reportSuccessEvent('joinRoom', sdkAppId)
		publish();
		refreshLink()
		invite.style.display = 'flex';
	} catch (error) {
		console.log('joinRoom error', error);
		reportFailedEvent({
			name: 'joinRoom', // 必填
			sdkAppId,
			roomId,
			error
		})
	}
}

可以看到，流程是：

• 获取页面表单值： SDKAppID，SecretKey 等值；
• 调用 TRTC Web SDK 的 TRTC.createClient 方法，创建 client 对象；
• 调用 join 方法，向 Server 端发送“进房”请求
• Server端逻辑：如无 roomID，则创建对应房间，有此 roomID，则进入该房，把进房结果发送给 web client；
• join 方法里还调用了 initLocalStream 方法，该方法调用了 TRTC 的 createStream等 API，进行音视频的初始化，从摄像头及麦克风中采集音视频流；
• 之后就是 publish方法，发布本地流；
• 订阅 remote 流：监听stream-added事件，收到事件后，通过stream-subscribed订阅；代码在 js/client.js里：

  installEventHandlers() {
    // ...
    this.client.on('stream-added', this.handleStreamAdded.bind(this));
    this.client.on('stream-subscribed', this.handleStreamSubscribed.bind(this));
    // ...
  }

• 远端流的播放： 通过 play方法，在页面上播放音视频，play方法接受一个 div 元素 ID 作为参数，SDK 内部会在该 div 元素下自动创建相应的音视频标签并在其上播放音视频。

  handleStreamSubscribed(event) {
    const remoteStream = event.stream;
    const id = remoteStream.getId();
    const userId = remoteStream.getUserId();
    const remoteId = `remote-${id}`;
   	// ...
    // 调用 play 方法
    remoteStream.play(remoteId).then(() => {
      console.log(`play remote stream success: [${userId}] ID: ${id} type: ${remoteStream.getType()}`);
      addSuccessLog(`RemoteStream play success: [${userId}]`);
    })
      .catch((error) => {
        console.error('play remote stream failed', error);
        addFailedLog(`RemoteStream play failed: [${userId}]`);
      });

    // ...
  }

本地流的播放也是一样调用 play方法；

生成邀请链接

这是视频会议场景里的常用功能：

对方访问此链接的话，页面提示：

界面是在 /quick-demo-js/invite/index.html；

屏幕共享

这也是常用功能了；

quick-demo-vue2-js

大家用的是 Vue 的话，建议直接看 quick-demo-vue2-js 和 quick-demo-vue3-js 这俩项目，更容易上手 sdk 逻辑；

进入对应目录下后，直接 npm start就行，会先安装依赖，再启动开发环境；

界面、功能和 quick-demo-js 一样， 两个 Vue 项目都用了aegis-web-sdk来监控 sdk 运行情况；

base-react-next

这个是用 next.js 写的，界面和功能又丰富了些，房主可以控制其他人的声音和视频画面显示；

• SDKAppID 和 SecretKey 是在src/app/config.js里配置；

• 安装及启动

# 安装依赖
yarn

# 运行开发环境
yarn run dev

• 基础音视频通话页：
  

进阶应用

“进阶应用” 里的功能挺多，像Canvas、video捕获等，也是常见的场景，Canvas 可能是用 drawImage进行拍照截图；

美颜和水印试了下，有点卡，这类功能应该比较吃性能吧；

实时语音识别的话，需要开通相关语音产品服务；腾讯会议的转录、纪要生成之类的，可能都用的到，包括 youtube 的实时 AI 字幕啥的，应该也是应用到了实时语音识别的技术； 不过腾讯会议这个好像要收费了吧，sigh。

总之，TRTC 的 sdk 还是蛮好用的。

含 UI 方案体验

TRTC 也提供了含 UI 的解决方案，也是覆盖了多平台多场景，比如 Web 端多人视频会议组件 TUIRoom Web，对照着文档，自己起了个项目，引入 TUIRoom 组件试了试；

• 用 vite 创建项目，指定 vue-ts 模板：

npm create vite@latest TUIRoom-try -- --template vue-ts

• 进入项目目录，安装依赖:

cd TUIRoom-try
npm install

• 安装其他所需依赖
  TUIRoom 用到的一些依赖，也安装下：

# 运行所需
npm install -D sass typescript unplugin-auto-import unplugin-vue-components @types/node @types/events @types/js-cookie vue-router

# 开发所需
npm install -S pinia element-plus vue-i18n tim-js-sdk trtc-js-sdk tsignaling rtc-beauty-plugin events mitt axios js-cookie

• vite.config.js 里配置路径别名、 element-plus 按需引入：

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({
        importStyle: 'sass',
      })],
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        // ...
        additionalData: `
              @use "./src/TUIRoom/assets/style/element.scss" as *;
          `,
      },
    },
  },
  base: process.env.NODE_ENV === 'production' ? './' : '/',
  resolve: {
    // 别名配置
    alias: {
      '@': path.join(__dirname, 'src')
    }
  },
  server: {
    open: true,
    port:12223
  },
})

• main.ts 中，引入 pinia、router、i18n、element-plus样式文件：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index';
import { createPinia } from 'pinia';
import VueI18n from '@/TUIRoom/locales/index';
import 'element-plus/theme-chalk/el-message.css';
import 'element-plus/theme-chalk/el-message-box.css';

createApp(App).use(router).use(createPinia()).use(VueI18n).mount('#app')

• 引入 TUIRoom Web 组件

先 clone TUIRoom Web 项目：

git clone git@github:tencentyun/TUIRoom.git

项目蛮大的，因为包含多平台的 demo 工程， web、iOS、安卓都有；网络环境不够好的话，建议用 GitHub Desktop 或者下载 zip 文件；

clone 下来后，复制 TUIRoom/Web/vue3/src/TUIRoom 文件夹到自己的 TUIRoom-try/src/ 目录下；

• 创建页面组件及路由
  在 src/pages 下新增了 home.vue 和 room.vue 两个页面，分别是“ 首页” 和 “房间页”，创建对应路由 /home 和 /room；

• 首页
  开发环境启动后，访问 http://localhost:12223/，也就是「首页」 ；

官方文档里也写了：因 TUIRoom 按需引入 element-plus 组件，会导致开发环境路由页面第一次加载时反应较慢，等待 element-plus 按需加载完成即可正常使用。element-plus 按需加载不会影响打包之后的页面加载。 😢 确实要等很久；

首页弄了个表单，里面填入 SDKAppID 、 SecretKey 和 userId，下方是 TUIRoom 里的 StreamPreview 本地音视频流预览组件；

点击「创建房间」按钮，进行房间创建：

1. 根据填入信息，生成 userSig，将用户信息存放到 sessionStorage 里，room 页可以读取；
2. 调用 TUIRoomCore.login(sdkAppId, userId, userSig)方法，“创建房间” 和 “进入房间” 都需要调用 login 方法；
3. 调用预览组件的 getRoomParam() ，获取音视频设备信息，将其与 action 参数（ createRoom / enterRoom ) 及 房间模式（我这里写死为 FreeSpeech ）组合成房间信息，也存入 sessionStorage 里；
4. 随机生成 roomId，带参数，跳到 room 页:

router.replace({
    path: '/room',
    query: {
      roomId,
    },
  });

• room 页直接用的 TUIRoom 主组件（ TUIRoom/index.vue ），一些功能都集成了：
  按文档传入对应参数：

  <Room
      ref="TUIRoomRef"
      @on-log-out="handleLogOut"
      @on-create-room="onCreateRoom"
      @on-enter-room="onEnterRoom"
      @on-exit-room="onExitRoom"
      @on-destroy-room="onDestroyRoom"
      @on-kick-off="onKickOff"
  ></Room>

核心的建房和进房，是通过 sessionStorage 中存储的 action 来判断：

 if (action === 'createRoom') {
   // 主持人创建房间
   await TUIRoomRef.value?.createRoom(Number(roomId), roomMode, roomParam);
 } else if (action === 'enterRoom') {
   // 进房
   await TUIRoomRef.value?.enterRoom(Number(roomId), roomParam);
 }

• 点击功能栏里的「邀请成员」，生成邀请链接 :
  
  访问该链接，home 页检测到有 roomId query，就切成「进入房间」，
  

• 填入userId后，进入房间
  
  包括成员管理：

被踢：

总结：
TUIRoom 组件上手还是不难，项目中可以考虑直接用 UI 组件，不过建房的响应速度不如无 UI 方案直接调 sdk 来的快。

本文标签： 视频会议新知实验室TRTC