视频通话 | 语音通话 |
| |
1v1 通话 | 群组通话 |
| |
npm install -g @vue/cli
vue create tuicallkit-demo
cd tuicallkit-demo
npm install @tencentcloud/call-uikit-vue
cp -r node_modules/@tencentcloud/call-uikit-vue/debug ./src
xcopy node_modules\\@tencentcloud\\call-uikit-vue\\debug .\\src\\debug /i /e
tuicallkit-demo/App.vue
中引入下面代码。<template><div style="padding: 20px 0 0 20px"><div><span>userID:</span><input type="text" v-model="userID" /></div><div style="margin-top: 6px;"><span>callUserID:</span><input type="text" v-model="callUserID" /></div><button @click="init()" style="margin: 10px 10px 10px 0; height: 28px;"> Step 1: Initialization </button><button @click="call()" style="margin: 10px 10px 10px 0; height: 28px;"> Step 2: Start 1v1 video call </button><div style="width: 50rem; height: 35rem; border: 1px solid salmon;"><TUICallKit /></div></div></template><script lang="ts" setup>import { ref } from 'vue';import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es";const userID = ref('');const callUserID = ref('');const SDKAppID = 0; // Replace with your SDKAppIDconst SDKSecretKey = ''; // Replace with your SDKSecretKeyasync function init() {try {const { userSig } = GenerateTestUserSig.genTestUserSig({userID: userID.value,SDKAppID: SDKAppID,SecretKey: SDKSecretKey,});await TUICallKitServer.init({ //【1】Initialize the TUICallKit componentSDKAppID,userID: userID.value,userSig,});alert("[TUICallKit] Initialization success.");} catch (error: any) {alert(`[TUICallKit] Initialization failed. Reason: ${error}`);}}async function call() { //【2】Make a 1v1 video calltry {await TUICallKitServer.call({ userID: callUserID.value, type: TUICallType.VIDEO_CALL });} catch (error: any) {alert(`[TUICallKit] Call failed. Reason: ${error}`);}}</script>
npm run serve
运行 tuicallkit-demo。Step 1: Initialization
Button,弹出 Initialization success 表示初始化成功。Step 2: Start 1v1 video call
发起 1v1 视频通话,具体效果如下图所示。
本页内容是否解决了您的问题?