SDKAppID, SDKSecretKey
, which will be used as Mandatory Parameters in Initialize the TUICallKit.npm install @tencentcloud/call-uikit-vue
debug
directory to your project directory src/debug
, it is necessary when generating userSig locally.cp -r node_modules/@tencentcloud/call-uikit-vue/debug ./src
xcopy node_modules\\@tencentcloud\\call-uikit-vue\\debug .\\src\\debug /i /e
src/App.vue
file.The example code uses the Composition API
approach.<template><span> caller's ID: </span><input type="text" v-model="callerUserID"><button @click="init"> step1. init </button> <br><span> callee's ID: </span><input type="text" v-model="calleeUserID"><button @click="call"> step2. call </button><!--【1】Import the TUICallKit component: Call interface UI --><TUICallKit style="width: 650px; height: 500px " /></template>
fill in
SDKAppID, SDKSecretKey
as two parameters in the code.<script setup> // lang='ts'import { ref } from 'vue';import { TUICallKit, TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es"; // Refer to Step 2.3const SDKAppID = 0; // TODO: Replace with your SDKAppID (Notice: SDKAppID is of type number)const SDKSecretKey = ''; // TODO: Replace with your SDKSecretKeyconst callerUserID = ref('');const calleeUserID = ref('');//【2】Initialize the TUICallKit componentconst init = async () => {const { userSig } = GenerateTestUserSig.genTestUserSig({userID: callerUserID.value,SDKAppID,SecretKey: SDKSecretKey});await TUICallKitServer.init({userID: callerUserID.value,userSig,SDKAppID,});alert('TUICallKit init succeed');}</script>
Parameter | Type | Note |
userID | String | Unique identifier of the user, defined by you , it is allowed to contain only upper and lower case letters (a-z, A-Z), numbers (0-9), underscores, and hyphens. |
SDKAppID | Number | |
SDKSecretKey | String | |
userSig | String | A security protection signature used for user log in authentication to confirm the user's identity and prevent malicious attackers from stealing your cloud service usage rights. |
genTestUserSig
(Refer to Step 3.2) function in the debug file to generate a `userSig`. In this method, SDKSecretKey is vulnerable to decompilation and reverse engineering. Once your key is leaked, attackers can steal your Tencent Cloud traffic.//【3】Make a 1v1 video callconst call = async () => {await TUICallKitServer.call({userID: calleeUserID.value,type: TUICallType.VIDEO_CALL,});};
localhost protocol
. For public network experience, please access under HTTPS protocol. For details, see Description of Network Access Protocol.step1. init
to login (caller and callee). step2. call
to make a call. If you have a call problem, refer to FAQs.
Was this page helpful?