Call State Callbacks in Your Calling Website or Web App

Tencent RTC - Dev Team

Nov 17, 2023

Call State Callbacks in Your Calling Website or Web App.png

If you want to obtain call status from your audio and video calling website and make appropriate actions in a timely manner, try Tencent RTC Call's "TUICallKit" component. With this advanced feature, you can easily integrate call status observers to meet your business needs.

Why is Tencent RTC Call the Best Choice?

TUICallKit component is easy to integrate, even for beginners.
TUICallKit component provides feature toggles for enabling and disabling, allowing specific functions to be triggered when the call status changes. This enables dynamic adjustment of the logic behavior of the calling application.
TUICallKit component provides a variety of callback attributes that cater to the business needs of various application scenarios you may have.

Instructions

Video Tutorial

This blog post uses the example of these 5 callback attributes for call status to explain how to implement the interaction logic.

Step 1: Bind the callback attributes for call status to the TUICallKit component.

In our Vue project file, locate the "TUICallKit" component and write the binding code.

beforeCalling: Executed before the call starts.
afterCalling: Executed after the call ends.
onMinimized: Executed when the component is minimized.
kickedOut: The user is kicked out, and the call automatically ends.
statusChanged: The call status has changed.

	<TUICallKit
        	:beforeCalling="beforeCalling"
        	:afterCalling="afterCalling"
        	:onMinimized="onMinimized"
        	:allowedMinimized="true"
        	:allowedFullScreen="true"
        	:videoDisplayMode="VideoDisplayMode.CONTAIN"
        	:videoResolution="VideoResolution.RESOLUTION_1080P"
        	:kickedOut="handleKickedOut"
        	:statusChanged="handleStatusChanged"
     	 />

the TUICallKit component with the binding code.png

Step 2: Write the specific callback methods for call status.

After the binding is done, you need to pass the callback parameters for it to work. So, we also need to write the specific logic functions. You can simply copy the following code into your Vue project file.

	function beforeCalling(type: string, error: any) {
  		console.log("[Callkit Demo] beforeCalling:", type, error);
	}
	function afterCalling() {
  		console.log("[Callkit Demo] afterCalling");
	}
	function onMinimized(oldStatus: string, newStatus: string) {
  		console.log("[Callkit Demo] onMinimized: " + oldStatus + " -> " + newStatus);
	}
	function handleKickedOut() {
  		console.log("[Callkit Demo] handleKickedOut");
	}
	function handleStatusChanged(args: { oldStatus: string; newStatus: string; }) {
  		const { oldStatus, newStatus } = args;
  	if (newStatus === STATUS.CALLING_C2C_VIDEO) {
    	console.log(`[Callkit Demo] handleStatusChanged: ${oldStatus} -> ${newStatus}`);
  	}

write the specific logic functions of call status callbacks.png

Testing

After saving, compiling, and running, we can go to the Web Demo section, make a call, and then hang up. You will be able to see detailed information printed in the console when the call status callback functionality provided by the TUICallKit component is triggered.

the information of the triggered beforeCalling function.png