WebRTC Trtc Logo
Tencent RTC Blog
Tutorial

Call State Callbacks in Your Calling Website or Web App

Tencent RTC - Dev Team

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

Figure1: Before the Call

the information of the triggered handleStatusChanged function.png.png

Figure2: During the Calling

the information of the triggered afterCalling function.png.png

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.

Call
Set Up
Web
Build App
Related Product
CallCall

High-quality video and voice call experience on any platform

Get 10,000 free minutes here.
Get Started for Free
Talk to Our Expert
Submit

By clicking the submit button, you agree to allow Tencent Real-Time Communication to store and process the information above for contact purposes. Please read our Privacy Policy