Frame/Tiles are moving around in a Group Call for ACS User even no one is speaking + Unverified text is Appearing next to the ACS User name

Question

When we are in a group call with more than 2 ACS users the tiles/frame are moving around so fast even no one is speaking. Plus we also noticed from the last few weeks "Unverified" text is appearing next to the ACS user name. This is a new things it wasn't appearing before, please see the attached screenshot. I can share the video recording if you send me the private email address so you can see how this is happening. Is it a bug or Is it possible to have a same experience like a Teams user has? We are using the below npm packages and here is the Azure Communication UI Component code

 





 const localVideoViewOptions = {
    scalingMode: 'Crop',
    isMirrored: true
  };
  
  const remoteVideoViewOptions = {
    scalingMode: 'Crop'
  };

 return (
    <Stack className={mergeStyles({ height: '100%' })}>
      <div className="video-wrapper">
        {videoGalleryProps && <VideoGallery  {...videoGalleryProps} 
          localVideoViewOptions={localVideoViewOptions}
          remoteVideoViewOptions={remoteVideoViewOptions}
          layout="floatingLocalVideo" />}
      </div>
    </Stack>

    "@azure/communication-calling": "^1.20.1",
    "@azure/communication-calling-effects": "^1.0.1",
    "@azure/communication-chat": "^1.4.0",
    "@azure/communication-common": "^2.3.0",
    "@azure/communication-react": "^1.11.0",

Answer 1

Hi @Durjan Hussain

Sharing a summary of our offline discussion -

Since the Microsoft Q&A community has a policy that "The question author cannot accept their own answer. They can only accept answers by others ", I'll repost the solution in case you'd like to "Accept " the answer.

Issue:

• The video tiles or frames are moving around too fast in a group call with more than two ACS users, even when no one is speaking.
• The text “Unverified” is appearing next to the ACS user name, which was not the case before.

Solution:

This code snippet from the engineering team that helped solved your issue:

function filterRemoteParticipantsOther(videoGalleryProps, isGroup) {
    if (isGroup) {
      videoGalleryProps.remoteParticipants.filter(x => {
        if(x.displayName?.startsWith('Patient-')){
          x.displayName='Web Patient';
        }
      });
    }
    
    return videoGalleryProps;
}