getUserMedia.bind(navigator) doesn't return a promise

Question

History: I wanted to create an alias/namespace for navigator.getUserMedia. And in that process, I did the following:

let constraints = {}; // Required for setting device constraints

let _getUserMedia = navigator.getUserMedia.bind(navigator);
// It is necessary to bind to the navigator if one makes an alias out of it.

_getUserMedia(constraints).then(res => console.log(res)).catch(err => console.log(err));

I get the following error: Uncaught TypeError: Failed to execute 'getUserMedia' on 'Navigator': 3 arguments required, but only 1 present.

As we know from docs that getUserMedia accepts callbacks for success and failure, and if someone doesn't pass them, a promise response is returned instead. Why does this not return any promise?

Any help on this weird behaviour explanation is highly appreciated.

Answer 1

I've done this a lot. Just use

let _getUserMedia = navigator.MediaDevices.getUserMedia

and forget about the .bind() operation. It's unnecessary.

Answer 2

As we know from docs that getUserMedia accepts callbacks for success and failure, and if someone doesn't pass them, a promise response is returned instead.

This is incorrect. There's no magic single version that does both.

Instead, there are two distinct versions:

1. navigator.getUserMedia (constraints, successCallback, errorCallback) (Deprecated!)
2. navigator.mediaDevices.getUserMedia (constraints) only this one returns a promise.

Everyone should use the latter at this point, since the former is not implemented in Safari and Firefox.

So you're binding the wrong function. Try:

const gUM = navigator.mediaDevices.getUserMedia.bind(navigator.mediaDevices);