getUserMedia使用错误的deviceId

Question

我有以下代码循环遍历机器上的所有视频输入设备，并应显示该输入设备的流。

$.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);
        });
    }
});

在选择器中，我使用了{video: { exact: value.deviceId }}，根据the documentation，它应该“需要特定的相机”。

我最初使用的是{ video: { deviceId: value.deviceId } }，它实际上按照我想要的方式工作，但是文档说：“ 上面的[使用deviceId而不是确切的名称]将返回您请求的相机或其他相机如果该特定相机不再可用”。我不希望它“如果该特定摄像机不再可用，则返回其他摄像机”，因此我切换到使用exact关键字。

问题是，这不能正常工作。即使我传递了2个不同的deviceId，它也为同一设备创建了2个单独的流。

这是该函数运行时控制台日志的图片，您可以看到有2个具有不同deviceId的摄像头设备，并且创建了2个不同的流，但是，页面来自同一台摄像机。

为什么getUserMedia使用exact关键字从同一摄像机创建2个单独但相同的流，而不是从2个摄像机中创建2个独立的流？

Answer 1

您的选择器格式错误。您错过了两者之间的deviceId。

应为：{ video: { deviceId: { exact: value.deviceId } } }