Safari leaks memory when videos are rapidly removed from the screen and re-added

What happened and what did you expect to happen?

Safari has a problem with the HTMLVideoElement object that keeps leaking memory if there are many video elements that are being removed from the screen and re-attached back.

There is a similar bug reported in the WebKit bugzilla: https://bugs.webkit.org/show_bug.cgi?id=216820

At some point, Safari will show a message that the application is using significant memory. If it continues even further, Safari will crash.

Have you reviewed our existing documentation?

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

Reproduction steps

1. Update the Meeting demo to render videos in smaller batches (such as with pagination).
2. Open Activity Monitor.
3. Join the demo with about 25 other video-enabled participants.
4. Cycle through the pages.
5. Notice that the memory keeps steadily rising without ever dropping back.

I’m able to confirm that this happens because RemoteVideo.tsx. If I comment the useEffect out so no video stream is attached, I cannot see any memory leaks.

Amazon Chime SDK React Components Library version

2.15.0

What browsers are you seeing the problem on?

MacOS Safari, iOS Safari

Browser version

14.1

Device Information

MacOS 11.6.4

Meeting and Attendee ID Information.

No response

Browser console logs

collaborate-ultra-log-1649082858254.log

Add any other context about the problem here.

Updating the RemoteVideo.tsx component’s useEffect to this seems to help but it does not eliminate the memory leaks completely. Perhaps there’s something else going on?

  React.useEffect(() => {
    if (!audioVideo || !videoEl.current) {
      return;
    }

    audioVideo.bindVideoElement(tileId, videoEl.current);
    const videoElement = videoEl.current;

    return () => {
      const tile = audioVideo.getVideoTile(tileId);

      if (tile) {
        audioVideo.unbindVideoElement(tileId);
      }

      if (videoElement) { // cleanup here
        videoElement.srcObject = null;
        videoElement.load();
      }
    };
  }, [audioVideo, tileId]);

[devalevenkatesh]

Created a demo using react component library which at an interval mounts and then un-mounts 25 RemoteVideo components tied to a single tileId.

Test Scenario Mount un-mount 25 remote video tiles and check for memory increase in Safari Timelines from developer tools also compare the same with Chrome devtools.

1. Clear video srcObject tracks and then set the HTML video element’s srcObject to null.
2. Directly set HTML video element’s srcObject to null without clearing any source tracks.
3. Do nothing and keep as is the current code.

Clear video srcObject tracks and then set the srcObject to null	Directly set srcObject to null	Existing code

Observations

• From the graphs, it seems setting srcObject to null helps but clearing tracks and then setting it to null is the most memory efficient.
• Chrome does not seem to differ with any approaches.

Few next questions

1. My testing strategy may not be a good real world use-case hence wanted to understand your pagination flow and when RemoteVideo component mounts -> un-mounts?
2. If using chooseRemoteVideoSources, when the new remote video sources are selected, do you keep the RemoteVideo’s from last render or you un-mount all the RemoteVideo’s and re-mount the RemoteVideo’s with the new tileId from current page’s attendeeIds?
3. If yes, does it mean that there is no stopping of video happening anywhere and only RemoteVideo component mount/un-mount?

[devalevenkatesh]

I am closing this issue since builders can install the JS SDK 3.1.0 or later on the latest component library 3.2.0. Newer release on component library is not needed. Thanks!