Web

import { TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";
await TUICallServer.call({
    userID: 'mike',
    type: TUICallType.VIDEO_CALL
});

import { TUICallKitServer, TUICallType } from "@tencentcloud/call-uikit-vue";
await TUICallServer.groupCall({
    groupID: "xxx",
    userIDList: ['jack', 'tom'],
    type: TUICallType.VIDEO_CALL
});

<TUICallKit
    :allowedMinimized="true" 
    :allowedFullScreen="true"
  />

try {
  await TUICallKitServer.setCallingBell(filePath?: string)
} catch (error: any) {
  alert(`Failed to modify the ringtone ：${error}`);
}

try {
  await TUICallKitServer.setSelfInfo({ nickName: "xxx", avatar: "http://xxx" });
} catch (error: any) {
  alert(`Failed to setSelfInfo ：${error}`);
}

<script lang="ts" setup>
import { TUICallKit, TUICallKitServer, TUICallType, VideoDisplayMode, VideoResolution } from "@tencentcloud/call-uikit-vue";

// The following 4 variables need to be modified before running.
const SDKAppID = 0; 
const userID = "";
const userSig = "";
const callUserID = "";

async function init() {
  try {
    await TUICallKitServer.init({ SDKAppID, userID, userSig });
    // await TUICallKitServer.init({ tim, SDKAppID, userID, userSig}); // If there is already a TIM instance in the project, it needs to be passed here.
    alert("Initialization completed.");
  } catch (error: any) {
    alert(`Initialization failed. Reason: ${error}`);
  }
}
async function call() {
  try {
    await TUICallKitServer.call({ userID: callUserID, type: TUICallType.VIDEO_CALL }); // 1v1 call
    // TUICallKitServer.groupCall({ userIDList: ["xxx"], groupID: "xxx", type: 2 }); // Group call
  } catch (error: any) {
    alert(Call failed. Reason: ${error});
  }
}
function beforeCalling(type: string, error: any) {
  console.log("[Callkit Demo] beforeCalling:", type, error);
}
function afterCalling() {
  console.log("[Callkit Demo] afterCalling");
}
function onMinimized(oldStatus: string, newStatus: string) {
  console.log("[Callkit Demo] onMinimized: " + oldStatus + " -> " + newStatus);
}
function handleKickedOut() {
  console.log("[Callkit Demo] handleKickedOut");
}
function handleStatusChanged(args: { oldStatus: string; newStatus: string; }) {
  const { oldStatus, newStatus } = args;
  if (newStatus === STATUS.CALLING_C2C_VIDEO) {
    console.log(`[Callkit Demo] handleStatusChanged: ${oldStatus} -> ${newStatus}`);
  }
}
</script>
<template>
  <div>
    <button @click="init()"> init </button>
    <button @click="call()"> video call </button>
    <div style="width: 50rem; height: 35rem; border: 1px solid salmon;"> 
      <TUICallKit
        :beforeCalling="beforeCalling"
        :afterCalling="afterCalling"
        :onMinimized="onMinimized"
        :allowedMinimized="true"
        :allowedFullScreen="true"
        :videoDisplayMode="VideoDisplayMode.CONTAIN"
        :videoResolution="VideoResolution.RESOLUTION_1080P"
        :kickedOut="handleKickedOut"
        :statusChanged="handleStatusChanged"
      />
    </div>
  </div>
</template>

// This interface needs to ensure that it is called after an incoming call invitation is received (status === STATUS.BE_INVITED),
// the call status can be referred to the throw of `@status-changed`.
try {
  await TUICallKitServer.accept();
  alert(`auto-accept`);
} catch (error: any) {
  alert(`auto-accept failed, reason：${error}`);
}

// Same as accept(), with the same call timing restrictions.
try {
  await TUICallKitServer.reject();
  alert(`auto-reject`);
} catch (error: any) {
  alert(`auto-reject failed, reason：${error}`);
}

try {
  await TUICallKitServer.hangup();
  alert(`auto-hangup`);
} catch (error: any) {
  alert(`auto-hangup failed, reason：${error}`);
}