Call State Callbacks in Your Calling Website or Web App

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"
     	 />

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}`);
  	}

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.

Figure1: Before the Call

Figure2: During the Calling

Figure3: After the Calling

Conclusion

If you need more detailed monitoring of callback methods,please visit our official website: Tencent RTC and explore freely.

If you have any questions or need assistance, our support team is always ready to help. Please feel free to contact us, or join us in Discord.