CODEWITHSUNDEEP
javascriptnavigatormediadevices
thesquaregroot
thesquaregroot

Reputation: 1452

Determine device ID of a camera with a specified facing mode

I am working on code to allow for an in-page select element to choose a camera. The default camera should be the "environment" camera while the rest should be listed after.

Using the following call I am able to stream video from an appropriate "environment"-facing camera:

navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment"} }).then(function (stream) {
    // display stream on web page
    ...
});

Similarly, I can get the list of available devices using the following:

navigator.mediaDevices.enumerateDevices().then(
    devices => {
        // build list of options
    }
);

I store the deviceId for each option and use that to display the feed from that camera which works well.

However, the option selected by default is not necessarily the "environment" camera. And the stream object returned from getUserMedia doesn't seem to have an easy way to determine the deviceId of the device providing that stream. Nor can I seem to find any other way to determine the "environment"-facing camera.

Is this not possible or is there some kind of getDeviceIdForFacingMode function that I've just missed?

Upvotes: 3

Views: 3892

Answers (1)

thesquaregroot
thesquaregroot

Reputation: 1452

After digging through the objects a bit more I was ultimately able to find that the following works to get the deviceId from the stream:

stream.getVideoTracks()[0].getSettings().deviceId

I would assume that in other cases you may need to get careful about the [0] if for some reason your stream involved multiple video tracks but for my purposes this worked well. In general I would expect you could get whatever information you need between stream.getVideoTracks()[i] (MediaStreamTrack) and stream.getVideoTracks()[i].getSettings() (MediaTrackSettings).

Upvotes: 8

Related Questions