tencent cloud

<template>
  <div>
    <button @click="init()"> init </button>
    <button @click="call()"> start video call </button>
    <details>
      <summary>auto accept feature</summary>
      <button @click="accept()"> accept </button>
      <button @click="reject()"> reject </button>
      <button @click="hangup()"> hangup </button>
    </details>
    <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" />
    </div>
  </div>
</template>

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

// The following 5 variables need to be modified before running
const SDKAppID = 0; 
const userID = "";
const userSig = "";
const callUserID = ""; // callUserID of the called party in the one-to-one call

// If you do not want to experience group calls, you do not need to set this parameter
let userIDList = ["xxx", "xxx"]; // UserID of a group call member

async function init() {
  try {
    await TUICallKitServer.init({ SDKAppID, userID, userSig });
    // await TUICallKitServer.init({ tim, SDKAppID, userID, userSig}); 
    alert("init finished");
  } catch (error: any) {
    alert(`init failed, reason：${error}`);
  }
}

async function call() {
  try {
    await TUICallKitServer.call({ userID: callUserID, type: TUICallType.VIDEO_CALL }); // one-to-one call
    
    // If you want to experience a group call, comment the call, and then uncomment the following two pieces of code.
    // const groupID = await createGroupID();
    // TUICallKitServer.groupCall({ userIDList, groupID, type: 2 }); // group call
  } catch (error: any) {
    alert(`call failed, reason：${error}`);
  }
}

// chat SDK document: https://web.sdk.qcloud.com/im/doc/en/SDK.html#createGroup
async function createGroupID() {
  let tim = TIM.create({ SDKAppID });
  let memberList: any[] = [];
  userIDList.forEach((user: string) => {
    memberList.push({ userID: user });
  });
  let res = await tim.createGroup({
    type: TIM.TYPES.GRP_PUBLIC,
    name: 'WebSDK',
    memberList
  });
  return res.data.group.groupID;
}

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);
}

async function accept() {
  try {
    await TUICallKitServer.accept();
    alert("auto-accept");
  } catch (error) {
    alert(`auto-accept failed, reason：${error}`);
  }
}

async function reject() {
  try {
    await TUICallKitServer.reject();
    alert("auto-reject");
  } catch (error) {
    alert(`auto-reject failed, reason：${error}`);
  }
}

async function hangup() {
  try {
    await TUICallKitServer.hangup();
    alert("auto-hangup");
  } catch (error) {
    alert(`auto-hangup failed, reason：${error}`);
  }
}
</script>