Web&H5 (Vue3)

npm install @tencentcloud/call-uikit-vue

<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>

<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.3

const SDKAppID = 0;       // TODO: Replace with your SDKAppID (Notice: SDKAppID is of type number）
const SDKSecretKey = '';  // TODO: Replace with your SDKSecretKey

const callerUserID = ref('');
const calleeUserID = ref('');

//【2】Initialize the TUICallKit component
const 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>

//【3】Make a 1v1 video call
const call = async () => {
  await TUICallKitServer.call({
    userID: calleeUserID.value,
    type: TUICallType.VIDEO_CALL,
  }); 
};