监控通话状态

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