LocalVideo unmount/mount sometimes breaks video stream in Safari

[everscending]

What happened and what did you expect to happen?

Our telehealth app has 2 different video tile layout options, a Grid View and Featured/Active speaker view. LocalVideo is included in both layouts. When switching between the 2 layouts, LocalVideo unbinds from its video element during the unmount process, then remounts in the new layout and binds to the new video element. This works without issue except in Safari on desktop/iOS where sometimes the video stream is not rendered. It is intermittent and will start working again as the user flips back and forth between the 2 layouts.

I expect --

• the LocalVideo component to render it's video stream after each successful mount, as long as the video was being rendered previously
• for this behavior to be consistent in all browsers

Have you reviewed our existing documentation?

• [X] Amazon Chime SDK for JavaScript GitHub issues
• [X] Amazon Chime SDK React Components Library GitHub issues
• [X] Storybook documentation
• [X] README page
• [X] How-to documentation
• [X] React SDK meeting demo

Reproduction steps

Render the LocalVideo component in 2 distinct UI layouts Verify local video is visible in the first UI layout Switch between the 2 layouts(via button etc) several times and eventually the issue will occur.

Amazon Chime SDK React Components Library version

3.2.0

What browsers are you seeing the problem on?

Safari

Browser version

15.6.1

Device Information

OSX 12.5.1, iOS 15.6.1

Meeting and Attendee ID Information.

No response

Browser console logs

No console logs appear when the issue occurs

Add any other context about the problem here.

No response

[xuesichao]

Hi @everscending, is there any specific reason you need to bind the media stream to a different video tile when switching the layout? Could you simply use CSS to rearrange your layout so you can avoid this issue?

[devalevenkatesh]

I suspect that this is a Safari video element specific issue. Could you be able to provide us browser console logs for this issue?

The component library 3.2.0 version is using Amazon Chime SDK for JavaScript (JS SDK) 3.1.0 version I believe, could you try to bump it up to latest JS SDK (3.7.0) or better we just released 3.3.0 for component library which depends on JS SDK 3.7.0 and see whether you are still running into this issue?

In 3.5.0, 3.7.0 we did some fixes around Safari video element bugs:

• https://github.com/aws/amazon-chime-sdk-js/blob/main/CHANGELOG.md#fixed-1
• https://github.com/aws/amazon-chime-sdk-js/blob/main/CHANGELOG.md#added-3

Both of them touch the LocalVideo mounting/un-mounting as we internally call bind/un-bind JS SDK APIs when LocalVideo mounts/un-mounts.

Please let us know if face any issues.

[everscending]

@xuesichao To answer your question, this is simply how the UI in our app is designed. Refactoring that is not an option. Thankfully, it appears to have been resolved after updating both packages to the lates versions. @devalevenkatesh thanks for the insight around that. 🙏🏻

[devalevenkatesh]

Thank you @everscending for confirmation, resolving this issue now.