[edochieblessing09-max]

Closes #933

Summary

Resolves the issue where both KycSelfieCapture and KycDocumentCapture attempted to attach videoRef.current.srcObject = stream immediately when getUserMedia resolved while state was still 'requesting', before the <video> elements were mounted.

Changes Implemented

1. Camera Stream Attachment & Playback:
   • Attached video.srcObject = stream inside useEffect keyed on cameraState === 'active' once <video> elements mount in both KycSelfieCapture.tsx and KycDocumentCapture.tsx.
   • Added video.play() invocation with error suppression for environments blocking autoplay.
2. Metadata Gating for Capture:
   • Disabled capture buttons by default until loadedmetadata fires with a non-zero videoWidth.
   • Added handlers for loadedmetadata on the video elements.
3. Null Blob & Error Handling:
   • Handled null blob from canvas.toBlob with visible error notices (role="alert").
   • Prevented stopping the media stream tracks when capture fails, keeping the video feed alive for retry.
4. Styling & Accessibility:
   • Added disabled and alert error styles in KycSelfieCapture.css and KycDocumentCapture.css.
5. Testing:
   • Added regression test suite in kycCaptureRegression.test.tsx.
   • Added unit and failure recovery tests in KycSelfieCapture.test.tsx and KycDocumentCapture.test.tsx.

[drips-wave]

@edochieblessing09-max Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits