List of available Cams - how to pre-select?

[marcw]

Hello!

I have one Logitech cam enabled to my computer. If I run the demo "Stream Diagnostic" this camera is automatically selected. Good!
But if I use the demo "Media Devices" then I must chose from a drop down menu. Pre-selected is here the wrong input "SplitCam Video Driver". My logitec cam is the second option in that list but there still two more software bases/driver options available. How does "Stream Diagnostic" make the correct pre-selection?

Best regards
Marc

 

[Max]

Good day.
Most of the examples uses default camera and mic from browser settings. So if you set a wrong camera in browser, all of them will choose it.
The Media Devices example lists all the available media devices (using navigator.getUserMedia()[ request under the hoods):

    Flashphoner.getMediaDevices(null, true).then(function (list) {
        ...
        list.video.forEach(function (device) {
            console.log(device);
            var video = document.getElementById("videoInput");
            var deviceInList = false;
            for (var i = 0; i < video.options.length; i++) {
                if (video.options[i].value === device.id) {
                    deviceInList = true;
                    break;
                }
            }
            if (!deviceInList) {
                var option = document.createElement("option");
                option.text = device.label || device.id;
                option.value = device.id;
                if (option.text.toLowerCase().indexOf("back") >= 0 && video.children.length > 0) {
                    video.insertBefore(option, video.children[0]);
                } else {
                    video.appendChild(option);
                }
            }
        });
        ...
    }).catch(function (error) {
        $("#notifyFlash").text("Failed to get media devices");
    });

Then, the camera may be chosen from the list and set in publish constraints:

        constraints.video = {
            deviceId: $('#videoInput').val(),
            ...
        };

 

[marcw]

Hi Max!
Thank you! But I need it the other way round. I do NOT want to chose from a list. I want to use the media devices code but want to change out that code part you described with that code which uses the default camera from the browser setting. Can you give me a little bit of help here please? Or, may be better: Listing all devices is okay but the default camera shall be pre-selected. That is not the case. The client code I write is targeted to totally beginners. If a wrong camera is pre-selected most of them are lost.

Best regards
Marc

 

[Max]

I want to use the media devices code but want to change out that code part you described with that code which uses the default camera from the browser setting

You can just replace in Media Devices code

        constraints.video = {
            deviceId: $('#videoInput').val(),
            ...
        };

to

        constraints.video = {
            deviceId: "default",
            ...
        };

In this case, browser will prefer the default camera.
Also, if you don't need a full functionality of Media Devices example, take a look at this page. You'll found some useful code snippets here.