Fix switch camera

[ryaplots]

Summary

References #6529

Changes

• Use a state for video mode

test.mp4

Testing

1. Log in the console on a mobile device
2. Go to register end device
3. Click on scan end device QR code
4. See the switch button at the bottom of the video
5. Click and see the camera changing

Notes for Reviewers

Not using stream for conditions because at some point in time it is an empty object, which prevents comparing it's contents and makes it unreliable for the switch.

Checklist

• Scope: The referenced issue is addressed, there are no unrelated changes.
• Compatibility: The changes are backwards compatible with existing API, storage, configuration and CLI, according to the compatibility commitments in README.md for the chosen target branch.
• Documentation: Relevant documentation is added or updated.
• The steps/process to test this feature are clearly explained including testing for regressions.
• Changelog: Significant features, behavior changes, deprecations and fixes are added to CHANGELOG.md.
• Commits: Commit messages follow guidelines in CONTRIBUTING.md, there are no fixup commits left.

[mjamescompton]

Is the clicking allow each time because of your set up or do you have to do that per camera?

[ryaplots]

Is the clicking allow each time because of your set up or do you have to do that per camera?

I think it's my setup

[mjamescompton]

I have a feeling its every time you run await navigator.mediaDevices.getUserMedia({ it resets the the user permissions.

[ryaplots]

I have a feeling its every time you run await navigator.mediaDevices.getUserMedia({ it resets the the user permissions.

Might be. Let me test.

[kschiffer]

Cool! Can we put the button on top of the camera stream instead? Right now it's causing this black bar at the bottom.
Also, can we fix the missing margin between the two "Cancel" and "Apply" button?

[mjamescompton]

Could not get the switch to work on either iPhone 14 or Samsung Galaxy A10

Nothing happens on the iPhone and above happens on the samsumg on chrome when I click the button

[kschiffer]

LGTM, though haven't tested.

[mjamescompton]

Ok,

Iphone 14 pro - chrome and safari - testing

• switch camera button still does not show on first render of the modal
• switching the camera works once to go from back camera to front
• but clicking the button again does nothing

I'm thinking we should put a component in between two we currently have. This one would specifically handle requesting the stream etc and includes the switching button, then we re-render the a component

[mjamescompton]

Still broken but going ahead anyway.

I don't have an android phone to test, but I believe the switch button not rendering will be there as well, so I don't think anyone will see it anyway