<img src="https://mediastatic.tencent-cloud.com/trtc/media/4f743872-12c0-425e-8f97-b6cf5089ae3c.png" alt="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 <a href="https://trtc.io/products/call">Tencent RTC Call</a>'s "TUICallKit" component. With this advanced feature, you can easily integrate call status observers to meet your business needs. <h2 id="Why-is-Tencent-RTC-Call-the-Best-Choice?" style="margin-left:0pt;">Why is Tencent RTC Call the Best Choice?</h2><ul><li>TUICallKit component is easy to integrate, even for beginners.</li><li>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.</li><li>TUICallKit component provides a variety of callback attributes that cater to the business needs of various application scenarios you may have.</li></ul><h2 id="Instructions" style="margin-left:0pt;">Instructions</h2><div class="raw-html-embed"><iframe width="800" height="450" src="https://www.youtube.com/embed/-pVVBtfp1jo?si=Yz-SuBHBKrupLXII" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div>Video TutorialThis blog post uses the example of these 5 callback attributes for call status to explain how to implement the interaction logic.<h3 style="margin-left:0pt;">Step 1: Bind the callback attributes for call status to the TUICallKit component.</h3>In our Vue project file, locate the "TUICallKit" component and write the binding code.<ul><li>beforeCalling: Executed before the call starts.</li><li>afterCalling: Executed after the call ends.</li><li>onMinimized: Executed when the component is minimized.</li><li>kickedOut: The user is kicked out, and the call automatically ends.</li><li>statusChanged: The call status has changed.</li></ul><pre><code class="language-html">	&lt;TUICallKit
 	:beforeCalling="beforeCalling"
 	:afterCalling="afterCalling"
 	:onMinimized="onMinimized"
 	:allowedMinimized="true"
 	:allowedFullScreen="true"
 	:videoDisplayMode="VideoDisplayMode.CONTAIN"
 	:videoResolution="VideoResolution.RESOLUTION_1080P"
 	:kickedOut="handleKickedOut"
 	:statusChanged="handleStatusChanged"
 	 /&gt;
</code></pre><img src="https://mediastatic.tencent-cloud.com/trtc/media/482e4522-17b3-4413-a890-7782615524b9.png" alt="the TUICallKit component with the binding code.png"><h3 style="margin-left:0pt;">Step 2: Write the specific callback methods for call status.</h3>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.<pre><code class="language-javascript">	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 + " -&gt; " + 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} -&gt; ${newStatus}`);
 	}
</code></pre><img src="https://mediastatic.tencent-cloud.com/trtc/media/189e902b-ce5b-4ec0-a89f-6f3f7e107f6e.png" alt="write the specific logic functions of call status callbacks.png"><h2 id="Testing" style="margin-left:0pt;">Testing</h2>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.<img datasrc="https://mediastatic.tencent-cloud.com/trtc/media/f32a0369-4349-4be8-a0f0-4ef5d12736f2.png" alt="the information of the triggered beforeCalling function.png" alt="img">Figure1: Before the Call<figure class="image"><img datasrc="https://mediastatic.tencent-cloud.com/trtc/media/e11d9d4b-0224-48db-80ad-13727d7033f7.png" alt="the information of the triggered handleStatusChanged function.png.png" alt="img"></figure>Figure2: During the Calling<img datasrc="https://mediastatic.tencent-cloud.com/trtc/media/59e82035-8d10-42f4-850e-669938f0ac1a.png" alt="the information of the triggered afterCalling function.png.png" alt="img">Figure3: After the Calling<h2 id="Conclusion" style="margin-left:0pt;">Conclusion</h2>If you need more detailed monitoring of callback methods,please visit our official website: <a href="https://trtc.io/">Tencent RTC</a> and explore freely.If you have any questions or need assistance, our support team is always ready to help. Please feel free to <a href="https://trtc.io/contact">contact us</a>, or join us in <a href="https://discord.com/invite/hq7jW7zChW?s_url=https%3A%2F%2Ftrtc.io">Discord</a>.

Call

7bb5b174-ce4b-4eed-aa1a-65e5da02aaed.webp

Diving Deep into an Example Callback Method: 'onCallReceived'

Add Call Status Observer in Your Flutter Calling Project

large_封面1.png

medium_封面1.png

small_封面1.png

thumbnail_封面1.png

Add Call Status Observer in Your Flutter Calling Project.png

<img src="https://trtc.io/media/4e3df0ec-1bc4-4b8f-a59c-34f9a963c390.png" alt="Add Call Status Observer in Your Flutter Calling Project.png">Have you ever wondered how to monitor and respond to the call status within your Flutter voice calling or video calling application?&nbsp;Do you want to easily add call state monitoring into your Flutter calling project?Tencent RTC provides Tencent RTC Call (TUICallKit) for your Flutter audio/video calling project (<a href="https://flutter.dev/">Flutter</a> 3.0 or higher version). Whether the video/audio call status is incoming, outgoing, answered, or ended, you can stay informed and take appropriate actions.<div class="raw-html-embed"><iframe width="800" height="450" src="https://www.youtube.com/embed/MwRNrFHvFMI?si=vAqB03OgyMEnFjio" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div>Video TutorialIn this blog post, we will introduce how to listen on any call status you want by the callback method. Join us on this coding journey as we uncover the steps to implement call status listening in your Flutter project.<h2 id="The-Callback-Methods-We-Provide-for-You" id="The-Callback-Methods-We-Provide-for-You" style="margin-left:0pt;">The Callback Methods We Provide for You</h2>In the `TUICallObserver`, there are several callback methods available. Let me briefly introduce 5 methods of them:<pre><code class="language-java">TUICallEngine.instance.addObserver(TUICallObserver(
 onError: (int code, String message) {

 }, onCallBegin: (TUIRoomId roomId, TUICallMediaType callMediaType, TUICallRole callRole) {
 
 }, onCallEnd: (TUIRoomId roomId, TUICallMediaType callMediaType, TUICallRole callRole, double totalTime) { 


 },, onUserNetworkQualityChanged: (List&lt;TUINetworkQualityInfo&gt; networkQualityList) {
 
 }, onCallReceived: (String callerId, List&lt;String&gt; calleeIdList, String groupId, TUICallMediaType callMediaType) {
 }
));
</code></pre><ul><li>`onCallReceived` for receiving a call.</li><li>`onCallCanceled` for call cancellation.</li><li>`onCallBegin` for call start.</li><li>`onCallEnd` for call end.</li><li>`onCallMediaTypeChanged` for the callback for media type change which is triggered when there is a switch from video to audio during a call.</li></ul>There are also other callback information related to audio/video calls:<img src="https://trtc.io/media/eca11f2f-8020-4f57-b202-9d84cad82855.png" alt="other callback information related to audio/video calls.png"><h2 id="Diving-Deep-into-an-Example-Callback-Method:-'onCallReceived'" id="Diving-Deep-into-an-Example-Callback-Method:-'onCallReceived'" style="margin-left:0pt;">Diving Deep into an Example Callback Method: 'onCallReceived'</h2>The `onCallReceived` callback is triggered when we receive a call invitation. We can handle our own business logic within this callback.<h3 style="margin-left:0pt;">Step 1: Fill in the parameters.</h3>First, in the "<a href="https://trtc.io/document/54896#4.-call-status-listening">Integration Tencent RTC Call (TUICallKit)-Flutter</a>" development documentation, locate the code for the callback method and copy it to your Flutter project. Then, remove other callback methods and keep only `onCallReceived`.In this callback method, a total of 4 parameters will be passed in and stored:<ul><li>&nbsp;String callerId: ID of the caller.</li><li>List&lt;String&gt; calleeIdList: List of IDs of the called parties.</li><li>String groupId: ID of the group call.</li><li>TUICallMediaType callMediaType: Type of the call.</li></ul>Inside the method body, we can use the print function to display these parameters on the console:<pre><code class="language-java">void onCallReceived(String callerId, List&lt;String&gt; calleeIdList, String groupId, TUICallMediaType callMediaType) {
 print('TUICallKit_onCallRecieved: Caller ID: $callerId,CalleeId List: $calleeIdList,groupId: $groupId,callMediaType: $callMediaType');
}</code></pre><img src="https://trtc.io/media/c28ccd4a-63fe-492e-8a3c-6efeae476534.png" alt="print the information of this callback &quot;onCallRecieved&quot;.png"><h3 style="margin-left:0pt;">Step 2: Run the program and observe the results.</h3>Save your Flutter project file, compile, and run it. Then, open a virtual device with the ID 6666 and initiate a call to it from another device with the ID 8888.When the device 6666 receives the call, the `onCallReceived` callback will be triggered. By printing the callback information, you can view the details of the call on the console:<ul><li>CallerId: 8888.</li><li>CalleeIdList: [6666] (as only device 6666 is being called).</li><li>groupId: Empty (as it is a one-to-one call).</li><li>callMediaType: audio (indicating an audio call).</li></ul><img src="https://trtc.io/media/34f08220-1f44-49ae-8525-9faba094cb15.png" alt="the information of the call ststus printed in the console.png"><h2 id="Conclusion" id="Conclusion" style="margin-left:0pt;">Conclusion</h2>Other callback methods are similar to `onCallReceived`. You can refer to this document or tutorial videos to explore freely! We look forward to seeing screenshots of your callback information in the comments section. If you want to learn more information, please visit our official website: <a href="https://trtc.io/">Tencent RTC</a> and explore freely.If you have any questions or need assistance, our support team is always ready to help. Please feel free to <a href="https://trtc.io/contact">contact us</a>, or join us in <a href="https://discord.com/invite/hq7jW7zChW?s_url=https%3A%2F%2Ftrtc.io">Discord</a>.

Add Call Status Observer in Your Flutter Audio/Video Calling Project | Tencent RTC Blog

Set Up

Build App

RTC Engine

Tencent RTC is the Ideal Video Commuincations Solution

Build Video Call Website with Tencent RTC in Minutes Using Vue3

Build Video Call Website with Tencent RTC in Minutes Using Vue3.png

Add Video Call with UI to Your Web Project in Minutes | Tencent RTC Blog

How to Add Personal Info Feature in Your Calling Website or Web App

How to Add Personal Info Feature in Your Calling Website or Web App.png

<img src="https://trtc.io/media/5fdae390-712f-4aed-88d1-7a94a1ddedd5.png" alt="How to Add Personal Info Feature in Your Calling Website or Web App.png"><h2 style="margin-left:0pt;">Introduction</h2>TUICallKit component provided by <a href="https://trtc.io/products/call">Tencent RTC Call</a> allows you to add advanced feature to your audio and video calling website or Web app, such as custom nicknames and avatars. If your business has such requirements, you can easily integrate this feature by calling the "setSelfInfo" interface by <a href="https://trtc.io/products/call">Tencent RTC Call</a>.<div class="raw-html-embed"><iframe width="800" height="450" src="https://www.youtube.com/embed/fYcU4O1KlyY?si=dgwnREyxnYDhw10J" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div>Video&nbsp;Tutorial<h2 style="margin-left:0pt;">Instructions</h2><h4 style="margin-left:0pt;">Step 1: Call the setSelfInfo interface.</h4>In the code section, create a "setSelfInfo" method and call the "TUICallKitServer.setSelfInfo" interface inside it. Pass your personal information as strings after the variables `nickName` and `avatar`. Here, I will use "Jack" as an example for the nickname.<pre><code class="language-typescript"> 	await TUICallKitServer.setSelfInfo(
 		{ nickName: "xxx", 
 	avatar: "http://xxx" } );</code></pre><img src="https://trtc.io/media/6c36ea5e-be36-40ce-957f-759724967665.png" alt="the code of setSelfInfo interface settings.png"><h4 style="margin-left:0pt;">Step 2: Add the &lt;setSelfInfo API&gt; button.</h4>Go back to the top of the code and add a &lt;button&gt; tag within the &lt;template&gt; tag. Wrap the button content "setSelfInfo API" with the &lt;button&gt; tag. In the Call Demo, this button will be displayed, and clicking on it will modify the nickname and avatar.<pre><code class="language-html">	&lt;button @click="setSelfInfo"&gt;setSelfInfo API&lt;/ button&gt;
</code></pre><img src="https://trtc.io/media/33075606-e6c4-4f9e-b628-c5f4dfec1c4c.png" alt="add the button tag in the project.png"><h2 style="margin-left:0pt;">Testing</h2>Now save, compile, and run! Then proceed to the Call Demo section. After nitializing the login, you will see the demo on the left side with the modified 8080 port. Expand the top menu to find the &lt;setSelfInfo API&gt; button. Click on it, make a call, and on the demo running on the 8081 port, you will receive a call from a user with the nickname "Jack".<img src="https://trtc.io/media/dec2c4b9-c63e-41cb-9860-ed26a54943b3.png" alt="the original nickname in the calling website.png">Figure1: Before Modifying<img src="https://trtc.io/media/3d76d75e-f6d7-4a91-93e2-f135682a64c3.png" alt="the modified nickname in the calling website.png">Figure2: After Modifying<h2 style="margin-left:0pt;">Conclusion</h2>It's quite simple, right? You can also input the URL of your own avatar after the "avatar" variable to achieve the feature of modifying your avatar.If you want to learn more information, please visit our official website: <a href="https://trtc.io/">Tencent RTC</a> and explore freely. If you have any questions or need assistance, our support team is always ready to help. Please feel free to <a href="https://trtc.io/contact">contact us</a>, or join us in <a href="https://discord.com/invite/hq7jW7zChW?s_url=https%3A%2F%2Ftrtc.io">Discord</a>.

How to Add Personal Info Feature in Your Calling Website or Web app

replace.avif

<img src="https://trtc.io/media/2afce0bb-b181-4348-96b9-4fef48650109.avif" alt="Enrich Your Calling Website with the Floating Window"><h2 id="Introduction" style="margin-left:0pt;">Introduction</h2>To meet certain business requirements, our audio and video calling website needs to incorporate advanced features such as a floating window. <a href="https://trtc.io/">Tencent RTC</a> provides <a href="https://trtc.io/products/call">Tencent RTC Call (TUICallKit)</a> to fulfill this need. By simply adding two attributes to your Vue project file, you can quickly integrate the floating window feature into your audio and video calling website. This tutorial blog will guide you step-by-step on implementing the floating window feature in your Web application.<div class="raw-html-embed"><iframe width="800" height="450" src="https://www.youtube.com/embed/QUtIhlfgsDA?si=Cw5RkanP6p0nXYCm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe></div>Video Tutorial<h2 id="Integration" style="margin-left:0pt;">Integration</h2>Let me introduce you to the two key attributes for implementing the Floating Window feature: `allowedMinimized` and `allowedFullScreen`.<ul><li>allowedMinimized: enables the minimization of the call interface, thus achieving the floating window functionality.</li><li>allowedFullScreen: allows the call interface to be maximized, enabling full-screen mode.</li></ul>Together, these two attributes complete the loop for the Floating Window feature.<h3 style="margin-left:0pt;">Step1: Write the key attributes into your project.</h3>Now, let's proceed with writing the code section. Write the `allowedMinimized` and `allowedFullScreen` attrubites within the "TUICallKit" tag, and set their values to "true".&nbsp;<pre><code class="language-html">	&lt;TUICallKit
 	:allowedMinimized="true" 
 	:allowedFullScreen="true"
	 /&gt;</code></pre><img src="https://trtc.io/media/11d04007-73ff-4c11-a4bb-1dc6d7e59ba5.png" alt="change the value of these two attributes to &quot;true&quot;.png">Now, the attributes for fullscreen and minimization have been successfully configured.<h3 style="margin-left:0pt;">Step2: Create a local project to make a call.</h3>Then, let's proceed to the project execution phase. Here, we can see two project files. The one on the left has the port number 8080, while the one on the right has 8081:<img src="https://trtc.io/media/34a68737-8479-4294-a356-a31c4d2bffd5.png" alt="Create a local project :port number 8080 and 8081.png">For the convenience of local testing, we can create another identical sample project. This project will be exactly the same as the Call Demo, and you can refer to <a href="https://trtc.io/blog/details/build-video-call-website-using-vue3">the previous blog</a> for the specific steps.<h2 id="Testing" style="margin-left:0pt;">Testing</h2><h3 style="margin-left:0pt;">Perform a floating window demonstration test.</h3>Now, let's begin the demo test.Initialize the login, and then initiate a phone call. As you can see, there is already a floating window button on the interface:<img src="https://trtc.io/media/6344488e-ade8-4926-a928-c377f6129407.png" alt="the button to open the floating window in your calling website.png">Clicking the fullscreen button will enable fullscreen mode. Clicking it again will return to the previous state; Clicking the minimize button will hide the floating window. Clicking it again will restore it to its initial state:<img src="https://trtc.io/media/e41374b1-0d94-4bd5-8484-c1d1047a30b0.jpeg" alt="05b54eb6-52cc-462c-b60c-2409b059dd38.jpeg">Figure1: FullScreen<img src="https://trtc.io/media/0d058e78-73a3-41f2-bba4-b0d16ecf36a6.png" alt="he minimize button to hide the calling window in your calling website.png">Figure2: Minimization<h2 id="Conclusion" style="margin-left:0pt;">Conclusion</h2>It's not difficult, right? You have successfully set your nickname and profile photo in your calling website. TUICallKit component provides other advanced features for your convenience.If you want to learn more information, please visit our official website: <a href="https://trtc.io/">Tencent RTC</a> and explore freely.If you have any questions or need assistance, our support team is always ready to help. Please feel free to <a href="https://trtc.io/contact">contact us</a>, or join us in <a href="https://discord.com/invite/hq7jW7zChW?s_url=https%3A%2F%2Ftrtc.io">Discord</a>.