vue3项目使用腾讯TRTC搭建一个线上会议室

最新推荐文章于 2024-04-26 17:00:12 发布

AI画手小王

最新推荐文章于 2024-04-26 17:00:12 发布

阅读量881

点赞数

文章标签：音视频

本文链接：https://blog.csdn.net/qq_53225741/article/details/125446387

版权

本文档介绍了如何在Vue3项目中利用腾讯TRTC实现一个线上web会议室平台，包括pc和H5端，并涉及语音实时转写功能。主要步骤包括引入腾讯TRTC及相关包，初始化客户端，进入房间并创建、订阅音视频流，以及离开房间的操作。项目代码示例已提供。

摘要由CSDN通过智能技术生成

一.背景

公司业务发展，需要搭建一套线上的web会议室平台系统，包含pc+H5端，而且需要集成语音的实时转写功能。

二.看文档

领导和我说公司买了腾讯的服务器啥的，直接和我说让我去研究腾讯TRTC的文档，接到任务的时候挺兴奋的，因为没搞过，所以不放过这次学习的机会。

三.项目中使用

1.引入对应的包

npm i trtc-js-sdk
npm i mul_speech_recogn //语音识别

语音识别的那个包是我自己从腾讯的demo代码里拉下搞得包，demo地址

2.TRTC引入

TRTC方法可以创建一个实时音视频通信的客户端对象 (Client) 和本地音视频流对象 (Stream)。这张图可以更好的理解。 1.检测TRTC web SDK是否之前当前浏览器。(可以更具我们的业务需求在不同阶段检测，避免用户在当前浏览器操作了很多后，进入会议室的时候提醒当前浏览器不支持，用户体验不好)
2.初始化客户端对象(TRTC.createClient)

export const meetPerson = reactive({
  client: '', //客户端对象
  mediator: { //本地流
    video: '',
    audio: ''
  },
  applicant: {  //远端流1
    video: '',
    audio: ''
  },
  respondent: {  //远端流2
    video: '',
    audio: ''
  }
})

export const initClient = async (state) => {
  meetPerson.client = TRTC.createClient({
    sdkAppId: state.SDKAPPID, // 填写您申请的 sdkAppId
    userId: state.mediator,  // 填写您业务对应的 userId
    userSig: state.userSig, // 填写服务器或本地计算的 userSig
    mode: 'rtc'              //mode有俩种情况 rtc：实时通话   live:互动直播模式
  })
}

sdkAppId,userId,userSig这些数据放