Блог

У меня есть следующий код, который перебирает все устройства видеовхода на компьютере и должен отображать поток этого устройства ввода.

 $.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] вернет запрошенную вами камеру или другую камеру, если эта конкретная камера больше не доступна«. Я не хочу, чтобы он «возвращал другую камеру, если эта конкретная камера больше не доступна», поэтому я переключился на использование exact ключевого слова.

Проблема в том, что это не работает должным образом. Несмотря на то, что я передаю 2 разных DeviceID, это создает 2 отдельных потока для одного и того же устройства.

Вот изображение моих консольных журналов с момента запуска функции, вы можете видеть, что есть 2 устройства камеры с разными DeviceID, и есть 2 разных потока, которые создаются, однако, 2 видеопотока, отображаемые на странице, с одной и той же камеры.

Почему getUserMedia, используя exact ключевое слово, создает 2 отдельных, но идентичных потока с одной камеры вместо 2 отдельных потоков с 2 отдельных камер?

Ваш формат селектора неверен. Вы пропустили deviceId промежуточное.

Это должно быть: { video: { deviceId: { exact: value.deviceId } } }