腾讯云实时音视频uni-app(小程序)_音视频解决方案_同尘科技

实时音视频 2年前 (2023-11-07) 浏览 118

本文将介绍如何快速完成 TUICallKit 组件的接入,跟随本文档,您将在半小时内得到一个包含完备 UI 界面的视频通话小程序。基本功能如下图所示:
注意:1. @tencentcloud/call-uikit-wechat ≥ V3.0.4 采用新架构进行重构,不再使用微信原生进行开发,而是采用 Vue(支持 Vue2.6、Vue3)开发的组件。本文档使用主包接入的方式集成 TUICallKit ,如果您想使用分包集成的方式请参考 uni-app(小程序)。2. 如果想使用 wxcomponents 的方式集成组件,需要低于 V3.0.4。低版本的组件会针对发现的 bug 继续升级更新维护。如果您想继续使用小于 v3.0.4 版本来集成 TUICallKit,请移步 旧版文档。

小程序 Demo 体验

如果您想要直接体验音视频通话小程序,单击 Demo 体验,扫描小程序二维码。如果您想要直接跑通一个新工程,请直接阅读 uni-app demo 快速跑通。如果您想要亲自集成 TUICallKit 组件,搭建一个音视频通话小程序,请跟随本文档。

开发环境要求

微信 App iOS 最低版本要求:8.0.40。微信 App Android 最低版本要求:8.0.40。小程序基础库最低版本要求:2.10.0。警告:由于小程序测试号不具备 和 的使用权限,请使用企业小程序账号申请相关权限进行开发。由于微信开发者工具不支持原生组件(即 和 标签),需要在真机上进行运行体验。

小程序开发准备

步骤一:开通企业类小程序

小程序推拉流标签不支持个人小程序,只支持企业类小程序。需要在 注册 时填写主体类型为企业,如下图所示:

步骤二:在小程序控制台开启实时音视频接口

小程序推拉流标签使用权限暂时只开放给有限类目,具体支持类目参考该地址。符合类目要求的小程序,需要在 微信公众平台 > 开发 > 开发管理 > 接口设置中自助开通该组件权限。

TUICallKit 源码集成

步骤一:创建 uni-app 小程序项目

1. 在 HBuilder 中创建小程序项目。 2. 在终端输入npm init -y,创建package.json文件。

npm init -y

步骤二:下载并导入 TUICallKit 组件

MacOS 端Windows 端

npm i @tencentcloud/call-uikit-wechat
mkdir -p ./TUICallKit && cp -r node_modules/@tencentcloud/call-uikit-wechat/ ./TUICallKit
npm i @tencentcloud/call-uikit-wechat
xcopy node_modules\@tencentcloud\call-uikit-wechat\ .\TUICallKit /i /e

步骤三:获取 SDKAppID、SecretKey

1. 登录到 即时通信 IM 控制台,单击创建新应用,在弹出的对话框中输入您的应用名称,并单击确定。 2. 单击创建的应用,进入基本配置页面,获取 SDKAppID、SecretKey。3. 在基本配置页面,单击免费体验即可开通 TUICallKit 的 7 天免费试用服务。4. 如果需要正式应用上线,可以单击 购买正式版 即可进入购买页面。

步骤四:获取 UserSig,修改 App.vue 文件

客户端生成控制台生成由于 UserSig 有时效性,如果您需要长期使用 TUICallKit,推荐您采用该方法。1. 修改 TUICallKit/debug/GenerateTestUserSig-es.js文件 的 SDKAPPID 以及 SECRETKEY。
1. 如果您想要快速体验 callkit,您可以通过控制台中的 辅助工具 生成一个临时可用的 UserSig。
注意:每个 userID 对应的 userSig 是唯一的,若使用控制台生成临时的 userSig ,请在登录第二个用户时记得替换 app.js 中的 userSig。

步骤五:调用 TUICallKit 组件

Vue3 环境Vue2 环境1. 修改 index.vue 文件。

                        import { ref } from "vue";import * as GenerateTestUserSig from "../../TUICallKit/debug/GenerateTestUserSig-es.js";import { TUICallKitServer } from "../../TUICallKit/src/index";import TUICallKit from "../../TUICallKit/src/Components/TUICallKit";let userID = ref("");let isLogin = ref(false);const loginHandler = async () => {  if (!userID.value) return;  const { userSig, SDKAppID } = GenerateTestUserSig.genTestUserSig({    userID: userID.value,  });  await TUICallKitServer.init({    sdkAppID: SDKAppID,    userID: userID.value,    userSig: userSig,  });  isLogin.value = true;  userID.value = "";};
const callHandler = async () => { await TUICallKitServer.call({ userID: userID.value, type: 2, });};.loginBox { margin-top: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
input { display: flex; font-size: 20px;}
.login { width: 100vw; bottom: 5vh; margin: 70rpx;}
.login button { width: 80%; background-color: #006eff; border-radius: 50px; color: white;}


1. 下载依赖。

 npm i unplugin-vue2-script-setup

2. 修改vue.config.js文件。

const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default;module.exports = {  parallel: false,  configureWebpack: {    plugins: [      ScriptSetup({        /* options */      }),    ],  },  chainWebpack(config) {    config.plugins.delete('fork-ts-checker');  },};

3. 修改main.js文件。

   import vueComposition from "@vue/composition-api"    Vue.use(vueComposition)

4. 修改index.vue文件。

                                            import * as GenerateTestUserSig from "../../TUICallKit/debug/GenerateTestUserSig-es.js";import { TUICallKitServer } from "../../TUICallKit/src/index";import TUICallKit from "../../TUICallKit/src/Components/TUICallKit.vue";export default {  components: {    TUICallKit,  },  data() {    return {      isLogin: false,      userID: "",    };  },  methods: {    async loginHandler() {      if (!this.userID) return;      const { userSig, SDKAppID } = GenerateTestUserSig.genTestUserSig({        userID: this.userID,      });      await TUICallKitServer.init({        sdkAppID: SDKAppID,        userID: this.userID,        userSig: userSig,      });      this.isLogin = true;      this.userID = "";    },
async callHandler() { await TUICallKitServer.call({ userID: this.userID, type: 2, }); }, },};.loginBox { margin-top: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
input { display: flex; font-size: 20px;}
.login { width: 100vw; bottom: 5vh; margin: 70rpx;}
.login button { width: 80%; background-color: #006eff; border-radius: 50px; color: white;}

步骤六:运行到微信开发者工具

1. 运行到微信开发者工具。
2. 请在本地设置里面勾选上“不校验合法域名、web-view (业务域名)、 TLS 版本以及 HTTPS 证书”。 警告:如果不勾选该条目,则会在控制台出现如下错误。
3. 单击清缓存 > 全部清除,避免开发者工具的缓存造成渲染异常。 4. 编译小程序。 5. 该项目快速集成后的预期效果图。 

步骤八:拨打您的第一通电话

1. 请单击预览,扫描二维码,在真机环境使用小程序。 2. 登录后,请输入呼叫用户 ID,拨打您的第一通电话。具体效果如下图所示: 注意:第一次使用小程序通话,需要获取摄像头和麦克风权限。

更多特性

设置昵称和头像

如果您需要自定义昵称和头像,可以使用如下接口进行更新:

TUICallKitServer.setSelfInfo("昵称", "头像 URL");

自定义铃声

如果您需要自定义来电铃音,可以通过如下接口进行设置:传入本地铃声文件应为绝对路径。如需恢复默认铃声,filePath 传空即可。

TUICallKitServer.setCallingBell("filePath");

群组通话

如果您需要实现群组(即多人)音视频通话,可以通过如下接口进行设置:

TUICallKitServer.groupCall({    userIDList: ["jane", "mike", "tommy"],    type: 1,    // 1-语音通话 2-视频通话    groupID: "12345678"});

API 文档

小程序 TUICallKIt API 文档请参考:TUICallKit API。

常见问题

包体积过大

注意:TUICallKit 版本须大于或等于 3.1.2。分包接入文档。体积优化文档。

全局监听

注意:1. TUICallKit 版本须大于或等于 3.0.4。2. 全局监听不支持分包接入。具体实现方法请参考:主包方案 :【TUICallKit】小程序全局监听(主包方案)。

什么是 SDKAppID、SecretKey?

SDKAppID:IM 的应用 ID,用于业务隔离,即不同的 SDKAppID 的通话彼此不能互通。Secretkey:IM 的应用密钥,需要和 SDKAppID 配对使用,用于签出合法使用 IM 服务的鉴权用票据 UserSig。

什么是 UserSig,如何生成 UserSig?

UserSig 是用户登录即时通信 IM 的密码,其本质是对 UserID 等信息加密后得到的密文。UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端,并提供面向项目的接口,在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。

调用 call 方法提示报错 undefined,如何处理?

1. 不要在 TUICallKit 的 dom 标签上使用 v-if 来进行条件渲染。

  

警告:使用 v-if 条件渲染指令隐藏节点后,该节点上的方法和事件也会被隐藏,无法正常触发。因此,无法通过隐藏节点上的方法来操作节点或获取数据。如果需要在隐藏节点中执行一些操作,可以考虑使用 v-show 来代替 v-if,或者通过其他方式实现隐藏和显示的效果。
说明:了解更多详情您可 进入 IM 社群 进行咨询和反馈。




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

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

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

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

- 0人点赞 -

发表点评 (0条)

not found

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