Web&H5 (Vue3)

npm install @trtc/calls-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, TUICallKitAPI } from "@trtc/calls-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 TUICallKitAPI.init({
    userID: callerUserID.value, 
    userSig, 
    SDKAppID,
  });
  alert('TUICallKit init succeed');
}
</script>

import { TUICallKitAPI, CallMediaType } from "@trtc/calls-uikit-vue";
//【3】Make a 1v1 video call
const call = async () => {
  await TUICallKitAPI.calls({
    userIDList: [calleeUserID.value],
    type: CallMediaType.VIDEO,
  }); 
};

import filePath from '../public/ring.mp3';

try {
  await TUICallKitAPI.setCallingBell(filePath?: string);
} catch (error: any) {
  alert(`[TUICallKit] setCallingBell API failed. Reason: ${error}`);
}

try {
  await TUICallKitAPI.enableMuteMode(enable: boolean);
} catch (error: any) {
  alert(`[TUICallKit] enableMuteMode API failed. Reason: ${error}`);
}

import { TUICallKit, TUICallKitAPI } from "./components/TUICallKit/src/index";