perf(camera): reduce capture overhead and avoid repeated canplay listener registration

[Rohit-rk07]

Summary

The camera capture flow in js/utils/utils.js does expensive frame processing and may register duplicate listeners/intervals across repeated calls.

Code references

• js/utils/utils.js:1106 const data = canvas.toDataURL(image/png);
• js/utils/utils.js:1132 cameraID = window.setInterval(draw, 100);
• js/utils/utils.js:1139 video.addEventListener(canplay, ...);
• js/utils/utils.js:1151 second setInterval(draw, 100) path inside canplay

Why this matters

• toDataURL(image/png) every 100ms is CPU-heavy and allocates large strings repeatedly.
• Repeated doUseCamera(...) calls can accumulate canplay listeners if not guarded/removed.
• Duplicate interval start paths increase risk of extra background work.

Expected behavior

• Prevent duplicate canplay listener registration (store handler / use { once: true } when valid).
• Ensure only one capture interval is active per camera session.
• Consider lower-overhead capture alternatives (toBlob, reduced cadence, or frame gating).

Suggested fix

Introduce camera-session lifecycle state in CameraManager:

• track and reuse/remove a single canplay handler,
• track active capture interval id centrally,
• start/stop capture in one place with idempotent guards.