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 }}，根据文档，它应该“需要特定的相机”。

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

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

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

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

Answer 1

您的选择器格式错误。你错过了deviceId中间的那段时光。

它应该是：{ video: { deviceId: { exact: value.deviceId } } }