实时音视频
有奖：文档满意度调查问卷，诚邀您填写> HOT
文档中心 > 实时音视频 > 含 UI 集成方案 > 音视频通话 > 快速接入（TUICallKit） > uni-app（小程序）

uni-app（小程序）

最近更新时间：2023-11-07 16:50:31

我的收藏

本页目录：

本文将介绍如何快速完成 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。
警告：
由于小程序测试号不具备 <live-pusher> 和 <live-player> 的使用权限，请使用企业小程序账号申请相关权限进行开发。
由于微信开发者工具不支持原生组件（即 <live-pusher> 和 <live-player> 标签），需要在真机上进行运行体验。

小程序开发准备

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

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




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

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




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 文件。
<template>
  <TUICallKit></TUICallKit>
  <view class="loginBox">
    <input
      class="input-box"
      v-model="userID"
      :placeholder="!isLogin ? '请输入用户ID' : '搜索用户ID'"
      placeholder-style="color:#BBBBBB;"
    />
    <view class="login">
      <button
        class="loginBtn"
        @click="!isLogin ? loginHandler() : callHandler()"
      >
        {{ !isLogin ? "登录" : "呼叫" }}
      </button>
    </view>
  </view>
</template>
<script setup>
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,
  });
};
</script>
<style>
.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;
}
</style>

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文件。
  <template>
  <view>
    <TUICallKit></TUICallKit>
    <view class="loginBox">
      <input
        class="input-box"
        v-model="userID"
        :placeholder="!isLogin ? '请输入用户ID' : '搜索用户ID'"
        placeholder-style="color:#BBBBBB;"
      />
      <view class="login">
        <button
          class="loginBtn"
          @click="!isLogin ? loginHandler() : callHandler()"
        >
          {{ !isLogin ? "登录" : "呼叫" }}
        </button>
      </view>
    </view>
  </view>
</template>
<script>
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,
      });
    },
  },
};
</script>
<style>
.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;
}
</style>

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

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 来进行条件渲染。
  <TUICallKit
    id="TUICallKit-component"
  ></TUICallKit>
警告：
使用 v-if 条件渲染指令隐藏节点后，该节点上的方法和事件也会被隐藏，无法正常触发。因此，无法通过隐藏节点上的方法来操作节点或获取数据。如果需要在隐藏节点中执行一些操作，可以考虑使用 v-show 来代替 v-if，或者通过其他方式实现隐藏和显示的效果。

说明：了解更多详情您可 进入 IM 社群 进行咨询和反馈。




中国站