Add webcam sharing ability

[Mavyre]

First of all, congrats on this awesome telestrating app.

In some setups, involving external gear (Blackmagic ATEMs for instance), the Program output or the cleanfeed is not a screen or a sharable window. However, most of them can be connected via USB and send the PGM through a webcam feed.

Do you think it would be possible to use a webcam feed instead of a screen share?

[BlankSourceCode]

I think this could be possible using the getUserMedia api. Essentially replacing the getDisplayMedia() call in webConnection.js.

In theory this would allow you stream a webcam instead of a display surface. It would probably need some extra work to enumerate the devices if you have more than one thing detected as a webcam as I don't think the browser does it for you (although maybe it does?). It may also need some work to get the correct aspect ratio between whatever the webcam gives and the OBS source you are trying to display onto, but I think it would probably work.

If you want to try it out, just change the line mentioned above to:

this.#stream = await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: false,
});

And it'll share the webcam instead of a display (you might have to do additional tweaking to get the correct webcam if you have more than one - the mdn link should explain how).

I don't actually have any of the tech you mentioned to be able to confirm if it works with those or not.

[Mavyre]

I'll try to modify it to have it working. It looks like we need to add a deviceId in the video object when using getUserMedia in order to select the webcam.

That will require some frontend modifications to make it releasable: select between display capture vs webcam selection.