User Experience Guidelines - Flutter

This guide aims to help developers optimize the user experience and functionality of video conferencing applications with VideoSDK. By following these best practices, you can create smoother interactions, minimize common issues, and deliver a more reliable experience for users.

Here are our recommended best practices to enhance the user experience in your application:

Section	Description
Configure Precall for Effortless Room Join	Users may enter rooms unprepared due to device or connection issues. A Precall setup can help them configure devices and settings beforehand for a smooth start.
Monitor Key Events for Optimal User Experience	Users can feel lost without real-time updates on room status, events, and errors. Event monitoring and notifications keep them informed and engaged.
Handling Media Devices	Users may want to change their audio or video setup mid-room but struggle to manage device controls. Providing easy device switching enhances control and flexibility.
Monitoring Real-Time Participant Statistics	Poor video or audio quality without real-time feedback leaves users frustrated. Real-time stats let them assess connection quality and troubleshoot issues actively.

Configure Precall for Effortless Room Join

A Precall step is crucial for ensuring users are set up correctly and have no device before joining a room. This step allows users to configure their devices and settings before entering a room, leading to a smoother experience and minimizing technical issues once the call begins.

Recommended Practices:

• Request Permissions: Prompt users to grant microphone, and camera permissions before entering the room. Use VideoSDK.requestPermissions() for this: on Android, the SDK does not ask for these permissions itself.
• Device Selection: Allow users to select their preferred camera, and microphone giving them control over their setup from the start.
• Entry Preferences: Provide options to join with the microphone and camera either on or off, letting users choose their level of engagement upon entry.
• Camera Preview: Show a live camera preview, allowing users to adjust angles and lighting to ensure they appear clearly and professionally.
• Virtual Backgrounds: Allow users to blur their background with VideoSDK.setVideoEffects() and enter with it enabled, enhancing privacy and creating a more polished appearance. On iOS, users can also replace the background with an image through room.setVideoProcessor(), which works before join.
• Network Check: Run VideoSDK.runPreCallTest() before the user joins to test their camera, microphone and network, and show them the result. Make sure the test has finished, or stop it with VideoSDK.stopPreCallTest(), before you call createRoom().

For detailed setup instructions on each of these features, check out our in-depth documentation here.

Monitor Key Events for Optimal User Experience

Listening for crucial events is vital for providing users with a responsive and engaging experience in your application. By effectively managing state changes and user notifications, you can keep participants informed and enhance their overall experience during rooms.

Recommended Practices:

• Monitor State Change Events: Listen for state change events, such as Events.recordingStateChanged, and notify users promptly about these transitions. Keeping users informed helps them understand the current state of the room.

• UI Handling on Event Trigger: Update the user interface only in response to specific events. For instance, display that the room is recording only when the recordingStateChanged event with the status RECORDING_STARTED is received, rather than when the record button is clicked. This ensures users receive accurate and timely updates.

• Notify Participants of Join/Leave Events: Keep users informed about participant activity by notifying them when someone joins or leaves the room. This fosters a sense of presence and awareness of who is currently available to engage.
• Listen for Error Events: It is crucial to monitor error events and notify users promptly when issues arise. Clear communication about errors can help users troubleshoot and address problems quickly, minimizing disruptions to the room. Actions such as join() also throw a VideoSDKError when they fail, so catch it and tell the user what went wrong.

Handling Media Devices

Device controls let participants adjust their setup for the best room experience. Proper device management within the UI also helps users stay informed about their current settings and troubleshoot issues effectively.

Recommended Practices:

• Allow Device Switching: Provide users with the option to switch between available microphone, and camera devices during the room. This flexibility is essential, especially if users want to adjust their setup mid-call.
• Display Selected Devices: Ensure the UI shows users which microphone, and camera devices are currently selected. Clear device labeling in the interface can reduce confusion and help users verify their setup at a glance. On Android, audio devices are labeled SPEAKER_PHONE, EARPIECE, WIRED_HEADSET and BLUETOOTH, so show your own names for them. VideoSDK.getSelectedVideoDevice() returns null until your app calls changeCam(), and VideoSDK.getSelectedAudioDevice() until it passes a device to changeMic(), calls setAudioDevice(), or the audio route changes. Until then, show the devices the room started with. To follow headset and Bluetooth changes, pass a listener to room.setAudioDeviceChangeListener().

Monitoring Real-Time Participant Statistics

Providing real-time insights into stream quality allows participants to monitor and optimize their connection for the best experience. With detailed metrics on video, audio, and screen sharing, users can assess and troubleshoot quality issues, ensuring smooth and uninterrupted rooms. To display these statistics, you can use the getVideoStats(), getAudioStats(), and getShareStats() methods. Each call returns the sample fetched by the previous call and starts fetching the next one, so the first call returns null. Call them from a timer, for example once a second.