RTC Engine

medium_tencent rtc-注册用-图形.png

small_tencent rtc-注册用-图形.png

thumbnail_tencent rtc-注册用-图形.png

tencent rtc-注册用-图形.png

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

Call

Build App

thumbnail_Slice 16.jpg

Slice 16.jpg

The Ultimate App Engagement Guide 2024

Boost Your Metrics: Strategies to Increase App Engagement

Just $9.9/month: Unleash the Power of Tencent RTC for New Users

【Starter Plan】Starting at $9.9/month: Unleash the Power of Tencent RTC for New Users