tencent cloud

<template>
  <div>
    <button @click="init()"> init </button>
    <button @click="call()"> 发起视频通话 </button>
    <details>
      <summary>自动接听等特性</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" 
        @kicked-out="handleKickedOut"
        @status-changed="handleStatusChanged" />
    </div>
  </div>
</template>

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

// 以下 4 个变量需要在运行前修改
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}); // 如果工程中已有 tim 实例，需在此处传入
    alert("初始化完成");
  } catch (error: any) {
    alert(`初始化失败，原因：${error}`);
  }
}

async function call() {
  try {
    await TUICallKitServer.call({ userID: callUserID, type: TUICallType.VIDEO_CALL }); // 1v1 通话
    // TUICallKitServer.groupCall({ userIDList: ["xxx"], groupID: "xxx", type: 2 }); // 群组通话
  } catch (error: any) {
    alert(`拨打失败，原因：${error}`);
  }
}

function beforeCalling(type: string, error: any) {
  console.log("通话即将开始", type, error);
}

function afterCalling() {
  console.log("通话已结束");
}

function onMinimized(oldStatus: string, newStatus: string) {
  console.log("最小化状态变更: " + oldStatus + " -> " + newStatus);
}

function handleKickedOut() {
  console.error("The user has been kicked out");
}

function handleStatusChanged(args: { oldStatus: string; newStatus: string; }) {
  const { oldStatus, newStatus } = args;
  console.log("通话状态变更: " + oldStatus + " -> " + newStatus);
}

async function accept() {
  try {
    await TUICallKitServer.accept();
    alert("已自动接听");
  } catch (error) {
    alert(`自动接听失败，原因：${error}`);
  }
}

async function reject() {
  try {
    await TUICallKitServer.reject();
    alert("已自动拒绝");
  } catch (error) {
    alert(`自动拒绝失败，原因：${error}`);
  }
}

async function hangup() {
  try {
    await TUICallKitServer.hangup();
    alert("已自动挂断");
  } catch (error) {
    alert(`自动挂断失败，原因：${error}`);
  }
}
</script>