CODEWITHSUNDEEP
javascriptgetusermedia
GrumpyCrouton
GrumpyCrouton

Reputation: 8621

getUserMedia creating stream for wrong camera using exact: deviceId

I've got the following code which loops through all videoinput devices on a machine and should display a stream of that input device.

$.each(devices, function( index, value ) {
    if(value.kind == 'videoinput') {

        console.log(value);

        navigator.mediaDevices.getUserMedia({video: { exact: value.deviceId }}).then(function(stream) {

            console.log(stream);

            var video = document.createElement('video');
            video.srcObject = stream;
            video.autoplay = true;

            var elem = '\
                <div>\
                    <div class="view_camera_' + index + ' uk-card uk-card-default uk-card-body uk-card-small"></div>\
                </div>\
            ';
            outputs.append(elem);

            $('.view_camera_' + index).append(video);

        }).catch(function(err) {
            console.log(err);
        });
    }
});

Notice in my selector, I used {video: { exact: value.deviceId }}, which should, according to the documentation, should "require the specific camera".

I was originally using { video: { deviceId: value.deviceId } } which actually worked the way I wanted it to, but the documentation says "The above [using deviceId instead of exact] will return the camera you requested, or a different camera if that specific camera is no longer available". I do not want it to "return a different camera if that specific camera is no longer available", so I switched over to using the exact keyword.

The problem is, this is not working properly. Even though I am passing 2 different deviceId's, it is creating 2 separate streams for the same device.

Here is a picture of my console logs from when the function is running, you can see that there are 2 camera devices with different deviceId's, and there are 2 different streams that are created, however, the 2 video streams displayed on the page are from the same camera.

enter image description here

Why is getUserMedia using the exact keyword creating 2 separate but identical streams from the same camera, instead of 2 separate streams from the 2 separate cameras?

Upvotes: 1

Views: 1875

Answers (1)

Prerak Sola
Prerak Sola

Reputation: 10009

Your selector format is wrong. You missed the deviceId in between.

It should be: { video: { deviceId: { exact: value.deviceId } } }

Upvotes: 6

Related Questions