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