tencent cloud

Tencent Real-Time Communication

문서Tencent Real-Time CommunicationCallAdditional FeaturesMonitoring Call StatusWeb&H5

Web&H5

PDF
포커스 모드
폰트 크기
마지막 업데이트 시간: 2025-09-29 16:42:20
This article describes how to use call status callbacks with the TUICallKit component.

Call State Monitoring

If your business requires monitoring the call status, such as events during the call process ( TUICallEvent for details), you can refer to the following code:
import { TUICallEvent } from '@trtc/call-engine-lite-js';

let handleUserEnter = function(event) {
    console.log('TUICallEvent.USER_ENTER: ', event);
};

TUICallKitAPI.getTUICallEngineInstance().on(TUICallEvent.USER_ENTER, handleUserEnter);
TUICallKitAPI.getTUICallEngineInstance().off(TUICallEvent.USER_ENTER, handleUserEnter);

Component Callback Event

The TUICallKit component offers call status callbacks, which can be used to implement more interaction logic on the business side. Please refer to the TUICallKit Attribute Overview for more details.
beforeCalling: Executed prior to the commencement of the call.
afterCalling: Executed upon the completion of the call.
React
Vue
function App() {
  const handleBeforeCalling = () => {
    console.log("[TUICallKit Demo] beforeCalling");
  };
  const handleAfterCalling = () => {
    console.log("[TUICallKit Demo] afterCalling");
  };
  return (
    <TUICallKit 
      beforeCalling={handleBeforeCalling} 
      afterCalling={handleAfterCalling} />
  )
}
<template>
  <TUICallKit 
    :beforeCalling="handleBeforeCalling" 
    :afterCalling="handleAfterCalling" />
</template>
<script setup>
function handleBeforeCalling() {
  console.log("[TUICallKit Demo] beforeCalling");
}
function handleAfterCalling() {
  console.log("[TUICallKit Demo] afterCalling");
}
</script>

이전 주제: Android&iOS&Flutter다음 주제: uni-app（Android & iOS）

도움말 및 지원

문제 해결에 도움이 되었나요?

피드백