tencent cloud

npm install -g @vue/cli

vue create tuicallkit-demo

cd tuicallkit-demo

npm install @tencentcloud/call-uikit-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 SDKAppID
const SDKSecretKey = '';  // Replace with your SDKSecretKey

async function init() {
  try {
    const { userSig } = GenerateTestUserSig.genTestUserSig({
      userID: userID.value,
      SDKAppID: SDKAppID,
      SecretKey: SDKSecretKey,
    });
    await TUICallKitServer.init({  //[1]Initialize the TUICallKit component
      SDKAppID, 
      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 call
  try {
    await TUICallKitServer.call({ userID: callUserID.value, type: TUICallType.VIDEO_CALL });
  } catch (error: any) {
    alert(`[TUICallKit] Call failed. Reason: ${error}`);
  }
}
</script>