OverconstrainedError

Hi Everybdy,
I just started working with the mediasoup API and I am having trouble to get the demo to run on my machine…
My Setup: Server is running in a local docker container, the app local. When I start the app in the browser, a room get’s created and the browser asks me if i want the App to allow to use AUDIO. It’s not asking about video. The connection to the Server seems to be ok, if I open another browser I see 2 participants in the room.
When I try to activate the camera, I get this error message in the popup: ‘Error enabling webcam [Object Overconstrained error]’
In the console I see this:
mediasoup-demo:ERROR:RoomClient enableWebcam() | failed:OverconstrainedError {name: “OverconstrainedError”, message: null, constraint: “deviceId”}

I installed a self-signed certificate and Chrome seems to be happy with that (no security warning)

The online Mediasoup Demo works flawlessly…

Any ideas anybody??

This is an error on getUserMedia, is not related to mediasoup.

mediasoup-demo:ERROR:RoomClient enableWebcam() | failed:OverconstrainedError {name: “OverconstrainedError”, message: null, constraint: “deviceId”}

Doc here: https://developer.mozilla.org/en-US/docs/Web/API/OverconstrainedError

The message is telling you that the constraint generating the error is deviceId. So chances are that the given deviceId is not accessible.

As said, this is no related to mediasoup.

Thanks for your answer José, I did actually google the error and also found the link you sent me… just it didn’t really help me much. What I find strange is that the mediasoup online demo works (with video and audio, same PC), but when I try to run the demo locally on my machine, it only gives me audio and the above error message.
I was wondering if there is any setting in the config.json of the demo that could cause this error and that I failed to set properly…?

Please learn the getUserMedia API. And then check how it’s used in the mediasoup demo. It’s just a demo, not a production ready app. So, go-to step 1: learn the getUserMedia API by reading its W3 spec. No, the solution is not about changing some random line in the config.js of the mediasoup-demo.

Thanks for your answer Iñaki,
So sorry to bother you again…
I am a developer with 20+ years of experience in a multitude of fields (lots of JS, TS and also some WebRTC among other things) and I know you guys get a lot of unnecessary questions here… I know that support cannot always give a simple answer but your last answer was just a bit to condescending for my taste.

I have done quite a bit of research and wasn’t able to find anything about the OverconstraintError in connection with deviceId so I posted my question here to see if any other mediasoup users have experienced this problem.

Answers like ‘learn the getUserMedia API’ really don’t help, so please - if you don’t have an constructive answer just don’t answer.

Sorry - just had to get that off my chest…

So I made some progress here: I typed
navigator.mediaDevices.getUserMedia({ audio: true, video: true })

in the console while the demo was running and finally I got the popup asking me if I want to allow video for this website… I okeyed it and suddenly the video for the demo is working - no more error message.

I guess for some reason the Demo-App is not requesting Video access (on my machine) and that’s obviously why it’s not working.

Have to dig a bit deeper into the mediasoup code to see why this is going wrong…

So this worked. Then you should check how the mediasoup-demo client app calls to getUserMedia(). You’ll realize that it request a specific video resolution that may be your webcam cannot provide, and hence the OverconstrainedError.

This is somehow explained in the corresponding W3 Media Capture and Streams specification. Did you check it?

The things here is that we don’t want that this forum becomes a generic WebRTC forum, like it or not. And getUserMedia is not part of mediasoup or mediasoup-client at all.

Now imagine that what I’ve explained in this response is true, so my previous response was in the good direction. The fact that you didn’t properly got it does not mean that my answer was not constructive.

1 Like

@smardaus just to add that FF and Chrome based browsers behave differently. If you request exact dimentions you might get those OverconstraintError, especially on FF.

One way to test it by running https://webcamtests.com/resolution. If you compare FF and Chrome you’ll see some diferences.

1 Like

Hi, just now was able to revisit this issue and I found the following:

When the site is opened, one of the first things that happens is that _updateWebcams() is called which calls navigator.mediaDevices.enumerateDevices(). This function returns a videoinput with an empty deviceId.

It seems that the enumerateDevices() function only returns the correct data for the webcam if navigator.mediaDevices.getUserMedia() has been called first, which triggers the browser to prompt for the permission to use the camera.
So enumerateDevices() needs permission to enumerate video devices.

I have checked this on two different machines and it only started working correctly after I had added

await navigator.mediaDevices.getUserMedia({audio: true, video: true})

at the start of the enableWebcam() function.

Not sure why the online-version of the media-soup demo doesn’t have this flaw if indeed the provided code is the same as the one from the online version.

Anyway… case closed.

Ya this is new on Chrome 81. Glad you’re sorted :slight_smile: