Fix: Clean up video element to prevent GPU memory leak

[upendra512]

Description

Fixes Issue #310 - Video element not cleaned up in stopSharing causes GPU leak

Changes

• Added video.pause() to stop video playback
• Added video.srcObject = null to release GPU pipeline resources
• Prevents GPU memory leak when screen capture stops

Testing

• ? Tested starting and stopping screen capture
• ? Verified video element is properly cleaned up
• ? Confirmed GPU resources are released after stopSharing

Technical Details

The stopSharing function was cleaning up the timer and MediaStream tracks, but the video element itself remained active with its srcObject still set. This prevented the browser from releasing GPU pipeline memory allocated for video decoding.

Related Issue

Closes #310

Summary by CodeRabbit

• Bug Fixes
  • Improved resource cleanup when stopping screen sharing to ensure media streams are fully detached and no longer consuming system resources.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 34a9fb37-f98b-4a20-9284-3b833728aa86

📥 Commits

Reviewing files that changed from the base of the PR and between 25b2382 and fc24465.

📒 Files selected for processing (1)

• src/hooks/useCaptureProvider.ts

---

Walkthrough

The stopSharing function in the useCaptureProvider hook is enhanced to properly clean up the video element by pausing it and clearing its srcObject, preventing GPU memory leaks when stopping media stream capture.

Changes

Cohort / File(s)	Summary
Video Element Cleanup src/hooks/useCaptureProvider.ts	Added video element pause and srcObject clearing to stopSharing function to prevent GPU pipeline memory leaks during stream detachment.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Suggested labels

Typescript Lang

Poem

🐰 A tiny fix with mighty might,
Four lines of code to set things right,
The GPU breathes, no leaks in sight,
The video sleeps, all clean and bright!
Memory flows like morning dew. ✨

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding video element cleanup in stopSharing to prevent GPU memory leaks.
Description check	✅ Passed	The description addresses the linked issue, explains the changes made, and includes testing verification, but deviates from the template structure with custom sections.
Linked Issues check	✅ Passed	The PR successfully implements the requirements from Issue #310: pausing the video element and clearing srcObject to release GPU resources.
Out of Scope Changes check	✅ Passed	All changes in useCaptureProvider.ts are directly related to the GPU memory leak fix objective; no out-of-scope modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

CodeRabbit can use oxc to improve the quality of JavaScript and TypeScript code reviews.

Add a configuration file to your project to customize how CodeRabbit runs oxc.