Add Call Status Observer in Your Flutter Calling Project

Have you ever wondered how to monitor and respond to the call status within your Flutter voice calling or video calling application? 

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 (Flutter 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.

Video Tutorial

In 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.

The Callback Methods We Provide for You

In the `TUICallObserver`, there are several callback methods available. Let me briefly introduce 5 methods of them:

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<TUINetworkQualityInfo> networkQualityList) {
 
    }, onCallReceived: (String callerId, List<String> calleeIdList, String groupId, TUICallMediaType callMediaType) {
    }
));

• `onCallReceived` for receiving a call.
• `onCallCanceled` for call cancellation.
• `onCallBegin` for call start.
• `onCallEnd` for call end.
• `onCallMediaTypeChanged` for the callback for media type change which is triggered when there is a switch from video to audio during a call.

There are also other callback information related to audio/video calls:

Diving Deep into an Example Callback Method: 'onCallReceived'

The `onCallReceived` callback is triggered when we receive a call invitation. We can handle our own business logic within this callback.

Step 1: Fill in the parameters.

First, in the "Integration Tencent RTC Call (TUICallKit)-Flutter" 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:

•  String callerId: ID of the caller.
• List<String> calleeIdList: List of IDs of the called parties.
• String groupId: ID of the group call.
• TUICallMediaType callMediaType: Type of the call.

Inside the method body, we can use the print function to display these parameters on the console:

void onCallReceived(String callerId, List<String> calleeIdList, String groupId, TUICallMediaType callMediaType) {
  print('TUICallKit_onCallRecieved: Caller ID: $callerId,CalleeId List: $calleeIdList,groupId: $groupId,callMediaType: $callMediaType');
}

Step 2: Run the program and observe the results.

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:

• CallerId: 8888.
• CalleeIdList: [6666] (as only device 6666 is being called).
• groupId: Empty (as it is a one-to-one call).
• callMediaType: audio (indicating an audio call).

Conclusion

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: 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.