У меня есть следующий код, который проходит через все устройства ввода видео на машине и должен отображать поток этого устройства ввода.
$.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 разных идентификатора устройства, он создает 2 отдельных потока для одного и того же устройства.
Вот изображение моих журналов консоли, когда функция запущена, вы можете видеть, что есть 2 устройства камеры с разными идентификаторами устройств, и создано 2 разных потока, однако, 2 видеопотокаотображаются на странице с одной и той же камеры.
Почему getUserMedia использует ключевое слово exact, создавая 2 отдельных, но идентичных потока с одной и той же камерывместо 2-х отдельных потоков с 2-х отдельных камер?