Fix canplay listener and interval accumulation in doUseCamera()

[kartikktripathi]

Summary

This PR fixes event listener and interval accumulation in doUseCamera() (js/utils/utils.js).

Previously, each invocation of doUseCamera() attached a new "canplay" listener using addEventListener and could create multiple active setInterval loops without reliably clearing the previous one. This could lead to:

• Event listener accumulation
• Multiple concurrent render intervals
• Increased CPU usage
• Potential performance degradation over repeated camera toggles

Changes

Replaced:

video.addEventListener("canplay", ...)

with:

video.oncanplay = ...

This ensures only a single canplay handler is active at any time.

&

Added defensive cleanup before starting a new interval:

if (cameraID !== null) {
     window.clearInterval(cameraID);
}

This prevents interval stacking when the camera is re-triggered.

Testing

• Connected Start → Show → Camera block in UI.
• Repeatedly toggled Start/Stop 6–8 times.
• Confirmed:
  • No console errors
  • No performance degradation
  • No interval acceleration
  • Stable CPU usage
  • No flickering
• Passed all npm test test suites.

Notes

The fix prevents resource accumulation while preserving existing camera behaviour.

PR Category

• Bug Fix

Thanks!

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[kartikktripathi]

Hey @walterbender, this PR is ready for review. Please take a look.
Thanks!

[shashank03-dev]

dude this code looks solid, the tests are green, and the PR description is very clear. Approving this from my end

[kartikktripathi]

@shashank03-dev, thanks for the review!

[walterbender]

please address the merge conflict

[github-actions]

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Failed Tests:

mathutils.test.js

[kartikktripathi]

Hi @walterbender, I have resolved the conflicts which had appeared. Please take a look when you get time. Thanks!

[kartikktripathi]

This issue has been solved in #5837.