please select
Call
  • Web
    • Overview
      • Product Introduction
      • Activate the Service
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • Run Sample Code
      • Integration (React)
      • Integration (Vue3)
      • Secure authentication with userSig
    • Basic Features
      • UI Customization
      • Configuring Nickname and Avatar
      • GroupCall
      • Floating Window
      • Custom Ringtone
      • Configure Resolution and Fill Mode
      • Monitoring Call Status
      • Language Settings
    • Advanced Features
      • Virtual Background
      • AI Noise Suppression
      • On-Cloud Recording
    • Client APIs
      • UIKit APIs
        • API Overview
        • TUICallKit
      • Engine APIs
        • TUICallEngine
        • TUICallEvent
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • FAQs
      • All Platfroms
      • Web
      • ErrorCode
      • Release Notes
  • Android
    • Overview
      • Product Introduction
      • Activate the Service
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • Run Sample Code
      • Integration
      • Secure authentication with userSig
    • Basic Features
      • UI Customization
      • Offline Call Push
      • Configuring Nicknames and Avatars
      • Group Call
      • Floating Window
      • Custom Ringtone
      • Monitoring Call Status
    • Advanced Features
      • Virtual Background
      • AI Noise Suppression
      • On-Cloud Recording
    • Client APIs
      • UIKit APIs
        • API Overview
        • TUICallKit
        • TUICallObserver
        • Type Definition
      • Engine APIs
        • TUICallEngine
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • FAQs
      • All Platforms
      • Android
      • ErrorCode
      • Release Notes
  • iOS
    • Overview
      • Product Introduction
      • Activate the Service
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • Run Sample Code
      • Integration
      • Secure authentication with userSig
    • Basic Features
      • UI Customization
      • Offline Call Push
        • VoIP
        • APNs
      • Configuring Nicknames and Avatars
      • Group Call
      • Floating Window
      • Custom Ringtone
      • Monitoring Call Status
    • Advanced Features
      • Virtual Background
      • AI Noise Suppression
      • On-Cloud Recording
    • Client APIs
      • UIKit APIs
        • API Overview
        • TUICallKit
        • TUICallObserver
        • Type Definition
      • Engine APIs
        • TUICallEngine
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • FQAs
      • All Platform
      • iOS
      • ErrorCode
      • Release Notes
  • Flutter
    • Overview
      • Product Introduction
      • Activate the Service
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • Run Sample Code
      • Integration
      • Secure authentication with userSig
    • Basic Features
      • UI Customization
      • offline Call Push
        • Notification
        • VoIP (Optional)
      • Configuring Nicknames and Avatars
      • Group Call
      • Floating Window
      • Custom Ringtone
      • Monitoring Call Status
    • Advanced Features
      • Virtual Background
      • AI Noise Suppression
      • On-Cloud Recording
      • Beauty Effects
    • Client APIs
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • Type Definition
    • Server APIs
      • Call Status Callback
        • Call Status Callback
        • Call Event Callback
        • Callback Configuration
          • API List for Callback Configuration
          • Establishing Callback Configuration
          • Retrieving Callback Configuration
          • Update Callback Configuration
          • Remove Callback Configuration
      • REST API
        • Introduction to REST API
        • Retrieve records via callId
        • Retrieve Records Based on Conditions
    • FQAs
      • All Platform
      • Flutter
      • ErrorCode
      • Upgrading
      • Release Notes
Call
Docs Overview/
Call/
Web/
Basic Features/
Monitoring Call Status/

Monitoring Call Status

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 'tuicall-engine-webrtc';

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

TUICallKitServer.getTUICallEngineInstance().on(TUICallEvent.USER_ENTER, handleUserEnter);
TUICallKitServer.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>