javascript - 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 个不同的流，但是，这 2 个视频流显示在页面来自同一相机。

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

Answer 1

您的选择器格式错误。您错过了中间的 deviceId。

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