Call
  • Web
    • Overview
      • Product Introduction
      • Activate the Service
      • 价格中心
        • 免费时长
        • Call 包月套餐
        • 订阅套餐时长计费说明
    • Get Started
      • Run Sample Code
      • Integration (React)
      • Integration (Vue3)
      • Secure authentication with userSig
    • Basic Features
      • UI Customization
      • Configuring Nickname and Avatar
      • GroupCall
      • 悬浮窗
      • 自定义铃声
      • 设置分辨率和填充模式
      • 监控通话状态
    • Advanced Features
      • 虚拟背景
      • AI 降噪
      • 云端录制
    • 客户端 API
      • UIKit APIs
        • API Overview
        • TUICallKit
      • Engine APIs
        • TUICallEngine
        • TUICallEvent
    • 服务端 API
      • 通话状态回调
        • 通话状态回调
        • 通话事件回调
        • 回调配置
          • 回调配置接口列表
          • 创建回调配置
          • 查询回调配置
          • 更新回调配置
          • 删除回调配置
      • REST 接口
        • REST 接口简介
        • 通过 callId 获取记录
        • 通过条件获取记录
    • FAQs
      • All Platfroms
      • Web
      • ErrorCode
      • 发布说明
  • Android
    • Overview
      • Product Introduction
      • Activate the Service
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • 跑通 Demo
      • 集成
      • Secure authentication with userSig
    • Basic Features
      • UI 定制
      • 离线通话推送
      • Configuring Nicknames and Avatars
      • 群组通话
      • 悬浮窗
      • 自定义铃声
      • 监控通话状态
    • 更多功能
      • 虚拟背景
      • AI 降噪
      • 云端录制
    • 客户端 API
      • UIKit APIs
        • 接口概述
        • TUICallKit
        • TUICallObserver
        • 类型定义
      • Engine APIs
        • TUICallEngine
    • 服务端 API
      • 通话状态回调
        • 通话状态回调
        • 通话事件回调
        • 回调配置
          • 回调配置接口列表
          • 创建回调配置
          • 查询回调配置
          • 更新回调配置
          • 删除回调配置
      • REST 接口
        • REST 接口简介
        • 通过 callId 获取记录
        • 通过条件获取记录
    • FAQs
      • All Platforms
      • Android
      • ErrorCode
      • 发布说明
  • iOS
    • Overview
      • Product Introduction
      • Activate the Service
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • 跑通 Demo
      • 集成
      • Secure authentication with userSig
    • Basic Features
      • UI 定制
      • 离线通话推送
        • VoIP
        • APN
      • 设置昵称和头像
      • 群组通话
      • 悬浮窗
      • 自定义铃声
      • 监控通话状态
    • 更多功能
      • 虚拟背景
      • AI 降噪
      • 云端录制
    • 客户端 API
      • UIKit APIs
        • 接口概述
        • TUICallKit
        • TUICallObserver
        • 类型定义
      • Engine APIs
        • TUICallEngine
    • 服务端 API
      • 通话状态回调
        • 通话状态回调
        • 通话事件回调
        • 回调配置
          • 回调配置接口列表
          • 创建回调配置
          • 查询回调配置
          • 更新回调配置
          • 删除回调配置
      • REST 接口
        • REST 接口简介
        • 通过 callId 获取记录
        • 通过条件获取记录
    • FQAs
      • All Platform
      • iOS
      • ErrorCode
      • 发布说明
  • Flutter
    • Overview
      • 产品概述
      • 开通服务
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • 跑通 Demo
      • 集成
      • Secure authentication with userSig
    • Basic Features
      • UI 定制
      • 离线通话推送
        • 通知
        • VoIP(可选)
      • 设置昵称和头像
      • 群组通话
      • 悬浮窗
      • 自定义铃声
      • 监控通话状态
    • 更多功能
      • 虚拟背景
      • AI 降噪
      • 云端录制
      • 美颜特效
    • 客户端 API
      • 接口概述
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • 类型定义
    • 服务端 API
      • 通话状态回调
        • 通话状态回调
        • 通话事件回调
        • 回调配置
          • 回调配置接口列表
          • 创建回调配置
          • 查询回调配置
          • 更新回调配置
          • 删除回调配置
      • REST 接口
        • REST 接口简介
        • 通过 callId 获取记录
        • 通过条件获取记录
    • FQAs
      • All Platform
      • Flutter
      • ErrorCode
      • 升级
      • 发布说明
Call

监控通话状态

本文介绍 TUICallKit 组件通话状态回调的使用。

通话状态监听

如果您的业务需要监听通话的状态,例如通话开始、结束等通话过程中的事件(详见 TUICallEvent),可以参考如下代码:
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);

组件回调事件

TUICallKit 组件提供了通话状态回调,可以用于业务侧实现更多交互逻辑,具体参考 TUICallKit 属性介绍
beforeCalling:通话开始前会执行。
afterCalling:通话完成后执行。
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>