腾讯云音视频通话SDKWeb & H5_音视频解决方案_同尘科技

音视频通话SDK 1年前 (2023-09-11) 浏览 23

开发环境要求

Vue3TypeScriptsass(sass-loader 版本 <= 10.1.1)

TUIKit 源码集成

步骤1:创建项目

使用 vue-cli 创建项目, 配置Vue3 + TypeScript +sass。


步骤2:下载 TUIKit 组件

从 GitHub 下载 TUIKit源码。复制 TUIKit 文件夹放置到自己到工程的 src 文件夹中,例如:

步骤3:生成 UserSig

1. 从 GitHub 下载 GenerateTestUserSig 工具包,并复制到项目中,例如:
2. 设置 GenerateTestUserSig 文件中的相关参数,其中 SDKAppID 和密钥等信息,可通过 腾讯云视立方控制台 > 项目管理 获取,单击目标项目右侧项目配置,进入配置页面。
3. 在基本信息区域,单击显示密钥,复制并保存密钥信息至 GenerateTestUserSig 文件。 注意:本文提到的获取 UserSig 的方案是在客户端代码中配置 SECRETKEY,该方法中 SECRETKEY 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量,因此该方法仅适合本地跑通功能调试。 正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向 App 的接口,在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。

步骤4:下载 TUIKit 组件依赖

cd src/TUIKitnpm i --legacy-peer-deps

步骤5:引入 TUIKit 组件

在 main.ts 中,引入 TUIKit,并注册到 vue 项目实例中:

import { createApp } from 'vue'import App from './App.vue'import { TUICore, TUIComponents } from "./TUIKit";import { genTestUserSig } from "../debug";const config = {	SDKAppID: 0, // Replace 0 with the SDKAppID of your IM application when connecting. Value type: Number};// init TUIKitconst TUIKit = TUICore.init(config);// TUIKit add TUIComponentsTUIKit.use(TUIComponents);const userID = 'xxxx'; // User IDconst userInfo = {	userID: userID,	userSig: genTestUserSig(userID).userSig, // The password with which the user logs in to IM. It is the ciphertext generated by encrypting information such as userID.For the detailed generation method, see Generating UserSig};// login TUIKitTUIKit.login(userInfo);// registercreateApp(App).use(TUIKit).mount('#app')

注意:SDKAppID 需与 GenerateTestUserSig 文件中 SDKAppID 一致。

步骤6:调用 TUIKit 组件

在需要展示的页面,调用 TUIKit 的组件即可使用。
例如:在 App.vue页 面中,使用 TUIConversation、TUIChat 搭建聊天界面。

																	

欢迎使用腾讯云即时通信IM


.home-TUIKit-main { display: flex; height: 800px;}.conversation { min-width: 285px; flex: 0 0 24%; border-right: 1px solid #f4f5f9;}.chat { flex: 1; height: 100%; position: relative;}

步骤7:启动项目

npm run serve

常见问题

1. 如何生成 UserSig?

UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向项目的接口,在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。

2. 提示 Module not found: Error: Can’t resolve ‘sass-loader’?

IM TUIKit web 样式依赖 sass,需在项目全局安装 sass 和 sass-loader。其中 sass-loader 的版本<=10.1.1。

npm install sass sass-loader@10.1.1 --save-dev



对音视频的解决方案有疑惑?想了解解决方案收费? 联系解决方案专家

腾讯云限时活动1折起,即将结束: 马上收藏

同尘科技为腾讯云授权服务中心,购买腾讯云享受折上折,更有现金返利:同意关联,立享优惠

阿里云解决方案也看看?: 点击对比阿里云的解决方案

- 0人点赞 -

发表点评 (0条)

not found

暂无评论,你要说点什么吗?