ui: Add camera selector to input

[victorges]

This is to allow changing the input camera when using the comfystream app. For example,
this will allow using a virtual camera from OBS as the input, which was the main goal and
test scenario here.

I have also updated the use-peer logic to support updating the RTC connection when the
stream changes.

Notice that I wasn't able to run the comfystream flow E2E so was only able to test the
frontend select component, but not if the RTC logic works when we switch it. It could be
helpful to have an example comfyui workflow in the repo for easy testing.

[yondonfu]

Will review when I'm back in front of the computer by beginning of next week! In the meantime, a brief high level description of the changes + expected behavior would be helpful for the review.

[victorges]

@yondonfu Sorry, I opened the PR so we could start testing it but forgot it would go to your repo. Added the description!

[victorges]

@yondonfu FYI I'm going to update this tomorrow (Monday) so the camera picker goes in the setup popup instead of the camera view. This will make the code a lot simpler and will also avoid the problem of switching the camera after the stream has started, which isn't working well rn. I can ping you again once it's ready for review.

[victorges]

@yondonfu ok Yondon it's good to go now :)

[victorges]

@yondonfu OK one last update... So what happened was that after adding the deviceId constraint, for some really weird reason I started getting a OverconstrainedError when getting the media stream (even if I'm picking from the same device as when not specifying a deviceId...).

So I first switched back to ideal request on the resolution here: d2591d8

The problem then was that I wasn't getting a 512x512 from the camera anymore. It was an inconsistent behavior and I normally got 512x512 only on the first load of the page then I got 512x480. To fix this and make sure we always got a 512x512 stream out of the webcam component, I implemented a canvas element where we draw the stream instead and then always extract a 512x512 stream from it. Here it is: 21c5654

The irony here is that, if we had started with this implementation from the beginning, we could even keep the dynamic camera switcher under the camera, since the output stream would always stay the same and it wouldn't require any changes on the use-peer RTC handler either. I have already spent way too much time on this though and will leave the camera switcher in the settings popup which I think is a good UX anyway. It is consistent+more privacy aware, allowing you to pick camera before streaming, like joining a call.

NOW I'm (hopefully) done. Eric already ran his tests and it seems to be all good on his setup. So let me know what you think on the review.

[yondonfu]

Thanks for these changes! I tested them locally and confirmed that the camera selector is working with OBS Virtual Camera.

I recently introduced the ability to configure the webcam frame rate in 40db32d which resulted in a bunch of conflicts with this branch. The conflicts were a bit hairy so I ended up copying your branch and resolving the conflicts in my own PR here with a few additional tweaks to make your changes play well with my frame rate related changes.

In the interest of getting these changes in sooner rather than later, I'm going to merge that PR and close this one, but do lmk if you spot any issues with the resolutions + tweaks in that PR!

[yondonfu]

Superseded by #7