Enhancements to Camera Feed Component

[rithviknishad]

Proposed Changes

• Fixes URGENT NEED: Improve camera feed #8040
• Improved visual experience of the feed component
• Moved feed controls outside the feed view for mobile displays in portrait mode.
• Hide top bar in fullscreen to maximize utilisation of screen space for the video feed
• Fixes camera stream reset logic stuck at loading at times.
• Fixes InvalidStateError: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source ### Details #7999
• More changes would be done as a follow up PR. Refer comment

Screenshots

Desktop View

Mobile View

Portrait

Landscape

Landscape - Fullscreen

Live Monitoring

@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

[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	Jul 24, 2024 1:40pm

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	6d7a1f3
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/66a10402543083000899c135
😎 Deploy Preview	https://deploy-preview-8140--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.

[cypress]

Passing run #2917 ↗︎

0

126

0

0

0

Details:

Enhancements to Camera Feed Component
Project: CARE	Commit: 15ace8c74b
Status: Passed	Duration: 03:20 💡
Started: Jul 22, 2024 5:42 AM	Ended: Jul 22, 2024 5:45 AM

Review all test suite changes for PR #8140 ↗︎

[gayann-au]

Short Cut Key Information for Diagonal Cursors Should be added

[gayann-au]

Network Ping information is not available for Camera feed view in Smart Phones(Used device: iPhone 14 pro, Used Browser: Chrome and Safari)

[gayann-au]

Directional Movement Cursors are not available when full screen is enabled in Mobile Phones
(Used device: iPhone 14 pro, Used Browser: Chrome and Safari)

[gayann-au]

Lag in Visual experience in feed Component is found in Smart Phones.
This observations are noted comparingly Laptop and Mobile Phone previews.
*For Example when any of the preset Request is clicked from Mobile Phone, respective present is seen/Camera Movement is first found in Laptop and after certain delay it is found in Smart Phones.(delay noted at this instance was 10 Seconds from Laptop to Smart Phones).
*Here Both the device are present in same network and both are availed with with Same Network Speed
ref: Used device: iPhone 14 pro, Used Browser: Chrome and Safari- Used Laptop OS: Windows 11,Used Browser: Chrome

[Howni]

The camera goes into loading mode after a few minutes of live monitoring. However, after refreshing the page (both on the laptop and the smartphone), the camera feed becomes live again.
Also there is a lag in camera feed visual between mobile phone and laptop.

[Howni]

Before it goes to Loading mode the latency is very high

[Howni]

Camera feed in Loading mode.

[Howni]

After refreshing the page, the Camera feed is live again.

[Jrl0]

Device tested on Mobile Realme GT2 Os:ANDROID v14
Browser:Chrome

1.The camera feed automatically returns to the most recently added preset for the bed, rather than the last preset that was viewed.

2.In landscape full-screen mode on mobile, the aspect ratio is off, making the viewing screen too small.(Better embed the button onto the viewing screen)

[github-actions]

👋 Hi, @rithviknishad,
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.

---

This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there.

[rithviknishad]

Shortcuts have been disabled momentarily as @nihal467 reported that it is not working in windows as expected. This will be fixed in an upcoming PR

[nihal467]

• the internet speed symbol is missing on real iphone but the issue cant be replicated on a stimulated device
• The preset bar is overlapping with the nav bar on top while rotating the phone

[nihal467]

@rithviknishad

[rithviknishad]

@nihal467 the padding issue for webkit based browsers has been fixed. However the network signal was disabled for webkit based browsers as it was not supported as mentioned in an earlier comment. We can bring this back in a separate issue.

[nihal467]

@rithviknishad mark it for re-testing once the UI is approved

[nihal467]

LGTM

[github-actions]

@rithviknishad Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌

[gayann-au]

Misalignments of Texts in the Preset name is observed
PFA ref. snapshot

[nihal467]

@gayann-au

• Can you share an example of the maximum length of the preset you created?

note: To share a recent change, we added an alert in the asset configuration page advising the user to keep the preset name under 12 characters,