communication-ui-library: Error in layout floatingLocalVideo of VideoGallery component

Describe the bug; what happened? While executing VideoGallery with layout=“floatingLocalVideo”, sometimes the image does not show to the locallUser(remoteUser is still able to see the camera image). This is the error that appears in the console:

Uncaught (in promise) CallingCommunicationError: TypeError: Cannot read properties of null (reading 'size')
    at bf (sdk.bundle.js:100:98987)
    at e.<anonymous> (sdk.bundle.js:100:683370)
    at l (runtime.js:63:40)
    at Generator._invoke (runtime.js:294:22)
    at Generator.throw (runtime.js:119:21)
    at s (sdk.bundle.js:100:681850)

What are the steps to reproduce the issue? It is an intermitent issue, don’t know why it happens though, but from time tom time it happens while camera is turning on(camera image will not show for local participant, happens on multiple users).

What behavior did you expect? Floating layout would show local camera image as expected instead og display name

If applicable, provide screenshots:

In what environment did you see the issue?

"@azure/communication-react": "^1.3.0",
"@azure/communication-calling": "^1.5.4",

OS & Device: Windows on PC
Browser: Google Chrome
Browser Version: 105.0.5195.102 64 bits

Is there any additional information?

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 25 (15 by maintainers)

Most upvoted comments

@mgamis-msft All of them. It does not dispose of the call agent when unmounted, you can confirm it if you want, just add a parent component with a show/hide button to your code above. Something as simple as this:

export default function TestApp() {
  const [showComponent, setShowComponent] = useState(false);
  return (
    <>
      {showComponent? <App /> : null}
      <button onClick={() => {setShowComponent(!showComponent)}}>Show/Hide Component</button>
    </>
  );
}

You will see that whenever you show the component again you will receive this error on the console:

ricmeira on Jan 30, 2023

@mgamis-msft I am reusing the call agent during a session, but if user logout of the app, I have to dispose of it as it contains personal information. If user logins(or other user login) in same tab session), then I start getting the issue.

ricmeira on Jan 26, 2023

Hi @ricmeira, apologies for the delay, this error typically occurs if the stream becomes undefined. To enable us to help further we’ll need a code snippet of how you are using the video gallery and passing in props, and if possible, record logs we can analyze. To gather logs can you create an azure logger in your app and redirect the output to the console:

import { setLogLevel } from '@azure/logger';
setLogLevel('info');

JamesBurnside on Nov 7, 2022

@mgamis-msft sorry late response, I saw it happening 3 to 4 times during my tests(lots of it). But we also had some QA users reporting this issue.

ricmeira on Sep 23, 2022