Memory Leak in `<video>` Elements (Detached)

[patstar123]

Describe the bug

When a client opens a video stream and then leaves the room, there is a high probability of creating detached but unreleased <video> elements. These elements accumulate over time, leading to a memory leak. Similar issues also occur with <audio> elements and local <video> elements.

Reproduction

Steps to Reproduce:

1. Run the sample application and open the test webpage.
   • Run npm run sample or npm run examples:demo to start the sample application.
2. Join or create a room.
3. Have a remote client join the room, enable their video, and then leave the room.
4. Open Chrome DevTools:
   • Navigate to Memory tab.
   • Take a heap snapshot (Take heap snapshot).
   • Search for video in the snapshot.

Expected Behavior:
All <video> and <audio> elements should be properly garbage-collected after the client leaves the room.

Observed Behavior:
Multiple detached <video> elements (and <audio> elements) remain in memory, as shown in the example below. This issue persists and worsens with repeated room joins/exits.

Screenshot/Additional Context:

Logs

System Info

- LiveKit Client SDK JS versions: `v1.15.13` or `v2.9.5`
- Windows + Chrome
- Android + Webview

Severity

blocking an upgrade

Additional Information

No response

[lukasIO]

The behaviour changed between these two versions or are you saying it's the same issue on both ?

just asking because you selected blocking an upgrade as severity.

The demo might not be cleaning up things correctly, we're never explicitly calling videoElm.remove() and audioElm.remove() in the renderParticipant function when remove: true.