uni-app(小程序)快速接入(旧)

最近更新时间：2024-04-09 17:32:41
我的收藏
本页目录：

本文将介绍如何快速完成 TUICallKit 组件的接入，跟随本文档，您将在半小时内得到一个包含完备 UI 界面的视频通话小程序。基本功能如下图所示：
?
?
?
小程序 Demo 体验
如果您想要直接体验音视频通话小程序，单击 Demo 体验，扫描小程序二维码。
如果您想要亲自集成 TUICallKit 组件，搭建一个音视频通话小程序，请跟随本文档。
开发环境要求 
微信 App iOS 最低版本要求：7.0.9。
微信 App Android 最低版本要求：7.0.8。
小程序基础库最低版本要求：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@1.4.4
mkdir -p ./wxcomponents/TUICallKit && cp -r node_modules/@tencentcloud/call-uikit-wechat/ ./wxcomponents/TUICallKit
npm i @tencentcloud/call-uikit-wechat@1.4.4
xcopy node_modules\\@tencentcloud\\call-uikit-wechat .\\wxcomponents\\TUICallKit /i /e
步骤三：获取 SDKAppID & SecretKey
1. 登录到 即时通信 IM 控制台，单击创建新应用，在弹出的对话框中输入您的应用名称，并单击确定。 
2. 单击创建的应用，进入基本配置页面，获取 SDKAppID、SecretKey。
3. 在基本配置页面，单击免费体验即可开通 TUICallKit 的 7 天免费试用服务。
4. 如果需要正式应用上线，可以单击?购买正式版?即可进入购买页面。
?
?
?
步骤四：获取 UserSig，修改 App.vue 文件
客户端生成
控制台生成
由于 UserSig 有时效性，如果您需要长期使用 TUICallKit，推荐您采用该方法。
1. ?单击下载 debug 文件夹，将 debug 目录复制到您的项目，如下图所示：
?
?
?
2. 修改GenerateTestUserSig.js文件 的 SDKAPPID 以及 SECRETKEY。
?
?
?
3. 修改 App.vue 文件。
Vue3 环境
Vue2 环境
<script setup>
    import { genTestUserSig } from "./debug/GenerateTestUserSig";
    const globalData = {
      SDKAppID: 0,
      userID: "",
      userSig: "",
    };
    uni.getUserSig = (userID) => {
      getApp().globalData.userID = userID;
      const { userSig } = genTestUserSig(getApp().globalData.userID);
      getApp().globalData.userSig = userSig;
      getApp().globalData.SDKAppID = genTestUserSig("").sdkAppID;
    };
</script>
<script>
    import { genTestUserSig } from './debug/GenerateTestUserSig';
    const Signature = genTestUserSig('');
    export default {
        globalData: {
            SDKAppID: Signature.sdkAppID,
            userID: '',
            userSig: ''
        },
        methods:{
            getUserSig(){
                const { userSig } = genTestUserSig(getApp().globalData.userID);
                getApp().globalData.userSig = userSig;
            }
        }
    };
</script>
1. 如果您想要快速体验 callkit，您可以通过控制台中的 辅助工具 生成一个临时可用的 UserSig。
?
?
2. 修改 App.vue 文件。
Vue3 环境
Vue2 环境
<script setup>
const globalData = {
  SDKAppID: 0,
  userID: '',
  userSig: '',
};
uni.getUserSig = (userID) => {
  getApp().globalData.userID = userID;
  getApp().globalData.SDKAppID = 0 ;  //填写上您的 SDKAppID
  getApp().globalData.userSig = ''    //填写上您从控制台获取到的 userSig
};
</script>
<script>
export default {
    globalData: {
        SDKAppID: '',
        userID: '',
        userSig: ''
    },
    methods:{
        getUserSig(){
            console.log("getUserSig")
        }
    }
};
</script>
注意：
每个 userID 对应的 userSig 是唯一的，若使用控制台生成临时的 userSig ，请在登录第二个用户时记得替换 app.js 中的 userSig。
?
步骤五：调用 TUICallKit 组件
1. 新建通话页面 call。
    
?
?
2. 修改page.json文件。
{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        }
        ,{
            "path" : "pages/call/call",
            "style": {
                "navigationBarTitleText": "uni-app",
                "usingComponents": {  // 修改点
                    "tuicallkit": "/wxcomponents/TUICallKit/TUICallKit/TUICallKit"
                }
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "uniIdRouter": {}
}
3. 修改index.vue文件。
Vue3 环境
Vue2 环境
<template>
  <view class="container">
    <view class="counter-warp">
      <view class="box">
        <view class="list-item">
          <label class="list-item-label">用户ID</label>
          <input
            class="input-box"
            type="text"
            v-model="userID"
            placeholder="请输入用户ID"
            placeholder-style="color:#BBBBBB;"
          />
        </view>
        <view class="login">
            <button class="loginBtn" @click="loginHandler">登录</button>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
let userID = "";
const loginHandler = () => {
  uni.getUserSig(userID);
  uni.navigateTo({
    url: "../call/call",
  });
};
</script>
<style>
.box {
  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>
<template>
  <view class="container">
    <view class="counter-warp">
      <view class="box">
        <view class="list-item">
          <label class="list-item-label">用户ID</label>
          <input
            class="input-box"
            type="text"
            v-model="userID"
            placeholder="请输入用户ID"
            placeholder-style="color:#BBBBBB;"
          />
        </view>
        <view class="login">
           <button class="loginBtn" @click="loginHandler">登录</button>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      userID: "",
    };
  },
  methods: {
    loginHandler() {
      getApp().globalData.userID = this.userID;
      getApp().getUserSig();
      uni.navigateTo({
        url: "../call/call",
      });
    },
  },
};
</script>
<style>
.box {
  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>
4. 修改call.vue文件。
Vue3 环境
Vue2 环境
<template>
  <view class="container">
    <tuicallkit ref="TUICallKit"></tuicallkit>
    <view class="trtc-calling-index-search">
      <view class="search">
        <view class="input-box">
          <input
            class="input-search-user"
            :value="userIDToSearch"
            maxlength="11"
            type="text"
            v-on:input="userIDToSearchInput"
            placeholder="搜索用户ID"
          />
        </view>
        <view class="btn-search" @click="call">呼叫</view>
      </view>
      <view class="search-selfInfo">
        <label class="search-selfInfo-label">您的ID</label>
        <view class="search-selfInfo-phone">
          {{ data.userID }}
        </view>
      </view>
    </view>
  </view>
</template>
?
<script setup>
import { nextTick, shallowRef, reactive } from "vue";
import { onUnload, onLoad } from "@dcloudio/uni-app";
let TUICallKit = shallowRef(null);
const data = reactive({
  userID: "",
  userIDToSearch: "",
});
?
const userIDToSearchInput = (e) => {
  data.userIDToSearch = e.detail.value;
};
?
const call = async () => {
  try {
    await TUICallKit.value.call({
      userID: data.userIDToSearch,
      type: 2,
    });
  } catch (error) {
    console.error(error);
  }
};
?
onLoad(() => {
  data.userID = getApp().globalData.userID;
  nextTick(() => {
    TUICallKit.value.init({
      sdkAppID: getApp().globalData.SDKAppID,
      userID: getApp().globalData.userID,
      userSig: getApp().globalData.userSig,
    });
  });
});
onUnload(() => {
  TUICallKit.value.destroyed();
});
</script>
?
<style>
.trtc-calling-index {
  width: 100vw;
  height: 100vh;
  color: white;
  display: flex;
  flex-direction: column;
}
?
.trtc-calling-index-search > .search {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 16px;
}
?
.btn-search {
  text-align: center;
  width: 60px;
  height: 40px;
  line-height: 40px;
  background: #0a6cff;
  border-radius: 20px;
  color: aliceblue;
}
?
.search-selfInfo {
  position: relative;
  padding: 0 28px;
  font-size: 14px;
  color: #333333;
  font-weight: 400;
  display: flex;
  align-items: center;
}
?
.search-selfInfo-phone {
  padding-left: 8px;
}
</style>
<template>
  <view class="container">
    <tuicallkit ref="TUICallKit"></tuicallkit>
    <view class="trtc-calling-index-search">
      <view class="search">
        <view class="input-box">
          <input
            class="input-search-user"
            :value="userIDToSearch"
            maxlength="11"
            type="text"
            v-on:input="userIDToSearchInput"
            placeholder="搜索用户ID"
          />
        </view>
        <view class="btn-search" @click="call">呼叫</view>
      </view>
      <view class="search-selfInfo">
        <label class="search-selfInfo-label">您的ID</label>
        <view class="search-selfInfo-phone">
          {{ userID }}
        </view>
      </view>
    </view>
  </view>
</template>
?
<script>
export default {
  data() {
    return {
      userIDToSearch: "",
      userID: "",
    };
  },
  methods: {
    userIDToSearchInput(e) {
      this.userIDToSearch = e.detail.value;
    },
    async call() {
      try {
        await this.$refs.TUICallKit.call({
          userID: this.userIDToSearch,
          type: 2,
        });
      } catch (error) {
        console.error(error)
      }
    },
  },
  onLoad() {
    this.userID = getApp().globalData.userID;
    this.$nextTick(() => {
      this.$refs.TUICallKit.init({
        sdkAppID: getApp().globalData.SDKAppID,
        userID: getApp().globalData.userID,
        userSig: getApp().globalData.userSig,
      });
    });
  },
  onUnload() {
    this.$refs.TUICallKit.destroyed();
  },
};
</script>
?
<style>
.trtc-calling-index {
  width: 100vw;
  height: 100vh;
  color: white;
  display: flex;
  flex-direction: column;
}
?
.trtc-calling-index-search > .search {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 16px;
}
?
.btn-search {
  text-align: center;
  width: 60px;
  height: 40px;
  line-height: 40px;
  background: #0a6cff;
  border-radius: 20px;
  color: aliceblue;
}
?
.search-selfInfo {
  position: relative;
  padding: 0 28px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #333333;
  font-weight: 400;
  display: flex;
  align-items: center;
}
?
.search-selfInfo-phone {
  padding-left: 8px;
}
</style>
步骤六：运行到微信开发者工具
1. 运行到微信开发者工具。
?
?
?
2. 新建终端。
     
?
?
3. 初始化 package.json 文件，安装相关依赖包。
警告：
因为 HBuilder 运行到小程序后，项目中的 package.json、node_modules 都不存在了。需要微信开发者工具的终端里，重新安装依赖。 
?
?
?
npm init -y
npm i @tencentcloud/call-uikit-wechat@1.4.4
4. 微信开发者工具构建 npm，新增 miniprogram_npm 目录。目录如下： 
    
?
?
步骤七：编译运行
1. 请在本地设置里面勾选上“不校验合法域名、web-view (业务域名)、 TLS 版本以及 HTTPS 证书”。
    
?
?
警告：
如果不勾选该条目，则会在控制台出现如下错误。
?
?
?
2. 单击清缓存?>?全部清除，避免开发者工具的缓存造成渲染异常。
    
?
?
3. 编译小程序。
    
?
?
4. 该项目快速集成后的预期效果图。
    
?
?
步骤八：拨打您的第一通电话
1. 请单击预览，扫描二维码，在真机环境使用小程序。
    
?
?
2. 登录后，请输入呼叫用户 ID，拨打您的第一通电话。具体效果如下图所示：
    
?
?
注意：
第一次使用小程序通话，需要获取摄像头和麦克风权限。
更多特性
设置昵称和头像
如果您需要自定义昵称和头像，可以使用如下接口进行更新：
Vue3 环境
Vue2 环境
TUICallKit.value.setSelfInfo("昵称", "头像 URL");
注意：
获取组件必须使用 shallowRef，不然会有 this 指向报错的问题，后续 uni-app 官方会升级修复这个问题，就可以正常使用  ref 获取。
在调用组件方法的时候需要加上 value。 
?
this.$refs.TUICallKit.setSelfInfo("昵称", "头像 URL");
自定义铃声
如果您需要自定义来电铃音，可以通过如下接口进行设置：
传入本地铃声文件应为绝对路径。
如需恢复默认铃声，filePath 传空即可。
Vue3 环境
Vue2 环境
TUICallKit.value.setCallingBell("filePath");
this.$refs.TUICallKit.setCallingBell("filePath");
群组通话
如果您需要实现群组（即多人）音视频通话，可以通过如下接口进行设置：
Vue3 环境
Vue2 环境
TUICallKit.value.groupCall({
    userIDList: ["jane", "mike", "tommy"],
    type: 1,    // 1-语音通话 2-视频通话
    groupID: "12345678"
});
this.$refs.TUICallKit.groupCall({
    userIDList: ["jane", "mike", "tommy"],
    type: 1,    // 1-语音通话 2-视频通话
    groupID: "12345678"
});
API 文档
小程序 TUICallKIt API 文档请参考：TUICallKit API。
常见问题
什么是 SDKAppID、SecretKey?
SDKAppID：IM 的应用 ID，用于业务隔离，即不同的 SDKAppID 的通话彼此不能互通。
Secretkey：IM 的应用密钥，需要和 SDKAppID 配对使用，用于签出合法使用 IM 服务的鉴权用票据 UserSig。
什么是 UserSig，如何生成 UserSig?
UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。
UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见?服务端生成 UserSig。
调用 call 方法提示报错 undefined，如何处理？
1. 检查 page.json 文件中 TUICallKit 的路径是否正确。
  {
      "path" : "pages/call/call",
       "style": {
            "navigationBarTitleText": "uni-app",
             "usingComponents": {  // 修改点
                  "tuicallkit": "/wxcomponents/TUICallKit/TUICallKit/TUICallKit"
             }
       }
}
2. 不要在 TUICallKit 的 dom 标签上使用 v-if 来进行条件渲染。
  <TUICallKit
    id="TUICallKit-component"
  ></TUICallKit>
警告：
使用 v-if 条件渲染指令隐藏节点后，该节点上的方法和事件也会被隐藏，无法正常触发。因此，无法通过隐藏节点上的方法来操作节点或获取数据。如果需要在隐藏节点中执行一些操作，可以考虑使用 v-show 来代替 v-if，或者通过其他方式实现隐藏和显示的效果。
怎样监听通话过程中的事件？
1. 导入 tuicall-engine-wx 的事件模块。
import { EVENT } from 'tuicall-engine-wx';
2. 绑定监听事件(以通话结束事件为例)。
// 通话结束
wx.$TUICallEngine.on(EVENT.CALL_END, this.handleCallingEnd, this);
3. 通话结束会触发回调函数 handleCallingEnd。
 // 通话结束
 handleCallingEnd(event) {
   console.log(event)
 },
4. 移除监听。
 // 通话结束
 wx.$TUICallEngine.off(EVENT.CALL_END, this.handleCallingEnd);
更多的事件监听请参考 TUICallEvent。
说明：
如需更多帮助，可以加入我们的 TUICallKit 技术交流 QQ 群：605115878，进行技术交流和产品沟通。
?
?
?
?
上一篇: 开启后付费下一篇: 安全合规认证