海外网站cdn加速下载,深圳设计大学,wordpress注册会员无法收到邮件,正确的网址格式输入项目需要对接腾讯的实时音视频产品#xff0c;我这里选择的是多人会议#xff0c;选择其他实时音视频产品对接流程也一样#xff0c;如何对接腾讯实时音视频的多人会议产品#xff0c;从开通服务到对接完成#xff0c;一 一讲解。
一、开通腾讯实时音视频
1.腾讯实时音视…项目需要对接腾讯的实时音视频产品我这里选择的是多人会议选择其他实时音视频产品对接流程也一样如何对接腾讯实时音视频的多人会议产品从开通服务到对接完成一 一讲解。
一、开通腾讯实时音视频
1.腾讯实时音视频简介
腾讯云的实时音视频TRTC,多端支持对接很方便他支持的开发技术也都是最新的。 腾讯实时音视频Tencent Real-Time CommunicationTRTC将腾讯多年来在网络与音视频技术上的深度积累以多人音视频通话和低延时互动直播两大场景化方案通过腾讯云服务向开发者开放致力于帮助开发者快速搭建低成本、低延时、高品质的音视频互动解决方案。
多人音视频通话方案 依靠腾讯云覆盖全球的专线网络全球均可互通提供覆盖手机、桌面全平台的客户端 SDK 以及云端 API终端用户还可以在微信、QQ、企业微信的小程序中使用 TRTC 服务Web 网页也可轻松使用。
低延时互动直播方案 凭借行业领先的网络与音视频技术结合腾讯云优质的节点资源帮助开发者搭建卡顿率更低、延时1秒以内的互动直播让直播走进 CDN 2.0 时代。 2.创建应用
我开通的是多人会议如果你开通实时音视频其他的产品他的小程序对接方式应该也是一样的。
①注册腾讯云账号
点击链接腾讯云官网注册https://cloud.tencent.com/点击左上角免费注册按钮。
②开通实时音视频产品
进入腾讯云首页鼠标悬浮在左上角的 产品 按钮
找到实时音视频进行点击然后点击免费试用。
此时进入了控制台点击立即开通。
创建应用
我这里选的是多人会议使用的入门版。
创建成功后进入了详情页面记录 SDKAppID 和 SDK 密钥这个两个参数对接时会用。
但是此时 多人会议 服务还没有开通我们需要领取体验。也是在详情页面。
点击领取体验 有免费的7天试用。
注不是完全免费会产生费用。
点击确认领取开通成功此时服务状态显示可集成。
二、集成腾讯实时音视频
我这里对接的是多人会议其他产品流程相同。
1.新项目集成多人会议
如果你的项目还没有开始那么集成只需要直接下载多人会议源码在那个基础上进行更改和开发。这里推荐使用跑通Demo的源码直接下载后在那个基础上进行开发。不推荐使用快速接入因为他的页面不一定符合你公司的要求你肯定是要改他的源码的比如添加删减功能或者改颜色什么的。如果不需要对他进行这些更改可以使用快速接入。
他的demo功能比较全面包括了前端创建房间等是可以后端进行房间创建的看你是否需要保留他所有的功能。
腾讯多人会议源码克隆流程https://cloud.tencent.com/document/product/647/107225根据文档的步骤一步一步进行即可然后在这个基础上开发自己的业务代码。
2.老项目集成多人会议
我的项目是 vue3jsvuexless 腾讯多人会议产品是 vue3tspiniascss ,因为我的项目已经开发完了才开始集成腾讯多人会议这就导致集成时报了很多错误下面一起看一下有哪些注意的点。
①需要先使用快速接入将源码npm包和pinia下载下来 npm install tencentcloud/roomkit-web-vue3 pinia --save ②main.js引入 import { createPinia } from pinia;const app createApp(App);
// 注册 pinia
app.use(createPinia());
app.mount(#app) ③引用 TUIRoomKit 组件
新建一个vue页面引入 templateConferenceMainView/ConferenceMainView
/template
script setup
import { ConferenceMainView } from tencentcloud/roomkit-web-vue3;
/script 此时如果后端已经创建会议就是使用进入已有会议否则使用创建新会议
④进入已有会议 // 注意包的名称如果您使用 vue2 版本请更改包名为 tencentcloud/roomkit-web-vue2.7
import { conference } from tencentcloud/roomkit-web-vue3;
const joinConference async () {await conference.login({ // 获取 sdkAppId 可参考文档开通服务部分https://write.woa.com/document/139678220708134912#d9d2b8d1-f19f-441b-a436-457748c94997sdkAppId: 0,// 用户在您业务中的唯一标示 IduserId: ,// 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系userSig: , });await conference.join(123456, {isOpenCamera: false,isOpenMicrophone: false,});
}
joinConference() ⑤发起新会议 // 注意包的名称如果您使用 vue2 版本请更改包名为 tencentcloud/roomkit-web-vue2.7
import { conference } from tencentcloud/roomkit-web-vue3;
const startConference async () {await conference.login({ // 获取 sdkAppId 可参考文档开通服务部分https://write.woa.com/document/139678220708134912#d9d2b8d1-f19f-441b-a436-457748c94997sdkAppId: 0,// 用户在您业务中的唯一标示 IduserId: ,// 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系userSig: , });await conference.start(123456, {roomName: TestRoom,isSeatEnabled: false,isOpenCamera: false,isOpenMicrophone: false,});
}
startConference() 运行方式就是启动你的项目比如我的是 npm run serve 。
快速接入步骤链接https://cloud.tencent.com/document/product/647/81962
快速接入只能简单的控制一些按钮显隐无法修改颜色等他的主题色只能修改黑白无法将会议的蓝色改为你的颜色所以还需要继续使用界面定制。
⑥界面定制
我们使用的是UIKit 源码导出修改和界面微调两种方法的结合使用。
首先使用界面微调方法隐藏多余功能按钮有很多邀请参加会议按钮可以隐藏。
在刚才引入快速接入腾讯源码的那个页面。 // 注意包的名称如果您使用 vue2 版本请更改包名为 tencentcloud/roomkit-web-vue2.7
import { conference, FeatureButton } from tencentcloud/roomkit-web-vue3;
conference.hideFeatureButton(FeatureButton.SwitchTheme); 可以隐藏的按钮如下
接下来继续进行UIKit 源码导出修改
首先导出UIKit 源码 node ./node_modules/tencentcloud/roomkit-web-vue3/scripts/eject.js
源码导出后在您指定的项目路径中会新增 TUIRoomKit 源码。此时您需要手动将 ConferenceMainView 组件conference 对象的引用从 npm 包地址更改为 TUIRoom 源码的相对路径地址。 - import { ConferenceMainView, conference } from tencentcloud/roomkit-web-vue3;
// 替换引用路径为 TUIRoomKit 源码的真实路径import { ConferenceMainView, conference } from ./src/components/TUIRoom/index.ts; 接下来配置 UIKIT 源码开发环境
因为我的是vue3webpackjs但是这里选择最接近的就是vuewebpackts
因为我的项目是js的此时运行报错如果你的项目是ts的跳过这个步骤;
执行命令将js改为ts:
vue add typescript
如果此时报错vue既不是内部命令也不是外部命令你需要全局下载一下vue执行
npm install -g vue
使用 vue –V如果显示vue版本号则成功继续执行
vue add typescript 此时运行还是会报错因为项目有冲突这时不要慌一个一个问题去解决
一起来解决这几种问题
1main.ts报错
里面引入的全局组件都报错了这是因为我的项目是js,这时如果在main.ts引入就需要类型声明在src目录下创建文件把你的全局组件添加进去
env.d.ts
declare module /components/你的组件名字
declare module /components/你的组件名字2scss报错
因为我的项目用的less,此时需要下载scss,执行命令:
npm install sass sass-loader -S -D
3腾讯源码报错
如果腾讯的源码报错TUIRoom文件夹里面的文件报错找到报错点进行注释如果不影响项目流程是用不到的功能则没事。 如果是用到的功能报错并且自己不会解决那就在腾讯提交工单会有人回复解答问题。
腾讯遇到问题工单提交页面https://cloud.tencent.com/online-service?fromdoc_647
3.腾讯源码修改
①颜色修改
会议里面有一个更换皮肤但是他只是黑白主题色更换。 如果你想将里面的蓝色改为其他颜色比如绿色需要改两个地方。
1首先把这两个文件里面的蓝色改为绿色 2其他的就需要一个一个改了比如我想改这个按钮的颜色 想把绿色改为粉色。
首先全局搜索“声音设置”然后找到其对应的英文 然后全局搜索“Audio settings”找到按钮位置 点击进入文件在这个文件内搜索settingTabsTitleList 更改这个样式的颜色 改为粉色 更改成功 ②结束会议跳转到我们的页面的逻辑修改
找到这个文件EndControlPC.vue 在这部分添加你的跳转逻辑 找到这两个方法添加我们的逻辑会议结束或者离开会议时跳转到我们项目的页面 handleEndLeaveClick添加离开逻辑方法和dismissRoom方法相同记得添加。
如果还需要更改其他的地方根据这个文件夹的提示找到相应的功能文件进行修改即可
