Issue Description
During sessions involving multiple join-and-leave cycles, the live video preview in Electron applications may exhibit significant lag. This performance degradation occurs despite moderate CPU and memory utilization reported by the system. While restarting the application provides a temporary resolution, the lag consistently returns after repeating the connection cycle, indicating a resource accumulation issue within the rendering pipeline.
Platform/SDK
Platform: Electron
SDK: Agora Electron SDK (all versions)
Root Cause
The performance degradation is caused by improper lifecycle management of video rendering instances. When a user stops rendering or leaves a channel, the corresponding rendering objects are not explicitly released. These unused rendering instances remain in memory, creating an accumulation of orphaned objects. This overhead gradually impacts the efficiency of the rendering pipeline, eventually leading to local interface lag and dropped frames.
Step-by-Step Solution
-
Enable Managed Mode for Canvas
When integrating the Canvas element for video rendering, ensure that the
setupModeparameter is configured to enable managed rendering. This setting allows the SDK to automatically handle the lifecycle and cleanup of rendering resources. -
Enforce Symmetric API Invocation
Establish a strict one-to-one correspondence between rendering operations. Always pair every
addmethod call with its correspondingremovemethod. Each rendering instance initialized must be properly removed whenever the user stops rendering or leaves the active channel. -
Implement Explicit Resource Cleanup
During stream switching or session termination, execute explicit destruction commands for all associated render instances. Do not rely on garbage collection to handle these native rendering objects, as explicit removal is necessary to prevent resource retention.
-
Performance Validation
After implementing the cleanup logic and enabling managed mode, perform repeated join-and-leave stress tests. Monitor the application to confirm that performance remains stable and that no rendering lag accumulates over consecutive sessions.
Best Practice
Implementing a robust lifecycle manager for your UI components prevents the retention of unused resources. By ensuring that every rendering instance is paired with a removal command, you maintain a lean and responsive video pipeline during long-running streaming sessions.