Improve resolution images uploaded via camera

[Omkar76]

Proposed Changes

• Fixes Improve the camera uploaded patient files quality #7154
• forceScreenshotSourceSize to keep original resolution from source video stream
• screenshotQuality set to 1. (default is 0.92)
• change mediaconstraint to high resolution.
• Removed height and width from as they had no effect. The component height is already limited by the containing modal.

Reference https://stackoverflow.com/questions/27420581/get-maximum-video-resolution-with-getusermedia
https://www.npmjs.com/package/react-webcam

@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers

Merge Checklist

• Add specs that demonstrate bug / test a new feature.
• Update product documentation.
• Ensure that UI text is kept in I18n files.
• Prep screenshot or demo video for changelog entry, and attach it to issue.
• Request for Peer Reviews
• Completion of QA

Screenshots

Images uploaded to this patient http://localhost:4000/facility/a3910fb7-db3d-4ddf-aa39-1f20e61d1453/patient/291bf9c3-b016-43a6-84f3-7ea6d860814c/files/

Before
211 x 376

After
480 x 853

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	7c12c89
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/65c26d17a649a40008ba070e
😎 Deploy Preview	https://deploy-preview-7160--care-egov-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
care-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 6, 2024 5:32pm

[rithviknishad]

@Omkar76 the back camera is not working on my phone for this deploy preview specifically. Works in staging.

cc: @Ashesh3

[Ashesh3]

@Omkar76 the back camera is not working on my phone for this deploy preview specifically. Works in staging.

cc: @Ashesh3

Seems like the component was malfunctioning due to CSP fixes not being merged in the brach. I've updated the branch with develop.

Could you check once again?

[rithviknishad]

@Ashesh3 I'm still getting a white image preview for the back camera. The front camera works.

(Verified in incognito mode too)

[Ashesh3]

Oh weird 🤔 . @Omkar76 could you take a look into this issue?

[Omkar76]

looking 👀

[Omkar76]

@rithviknishad it's working fine for me 🤔. which browser are you using?
I tested on Brave browser on my android.

[sainak]

@rithviknishad its working fine for me as well, try remote debugging to see whats the error.

[Ashesh3]

Reverted the change applying to facility cover image as per discussion with Nihal - as it increased image load times without adding any extra usability.

[nihal467]

LGTM

[github-actions]

@Omkar76 We truly appreciate your efforts. Thank you for taking the time to contribute; this is a very valuable contribution to us 🥇. We always welcome your contribution 🙂, so feel free to contribute to anything anytime, and never lose that spirit of innovation 🙌.