Docs Overview/
Web&H5/

Web&H5

本文介绍 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>