Javascript navigator.mediaDevices.getUserMedia получить ширину и высоту в источнике

Question

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

  navigator.mediaDevices.getUserMedia({
    audio: false,
    video: {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: desktop_id,
        minWidth: 990,
        maxWidth: 990,
        minHeight: 770,
        maxHeight: 770
      }
    }
  }).then(gotStream).catch(getUserMediaError);

Полученное захваченное изображение, конечно, имеет размер 990x770, но в результате получается изображение с черной рамкой вокруг него.Реальное видео получено в формате 995x744, но в результате заданных ограничений он получает этот новый размер с черными границами.Если я не устанавливаю никаких ограничений, то выдается ошибка, говорящая, что ширина равна 0, поэтому необходимо установить некоторую ширину.

Даже ручной ввод размера источника видео 995x744 в ограничения не работает, так какКажется, для захвата нужна область, большая, чем источник.Не уверен, почему это не может быть захвачено именно так, как есть?Может быть, что-то еще я делаю неправильно, что может исправить это?

Как я могу получить размер видео во время его захвата, чтобы ограничения могли быть установлены на фактический размер видео?Таким образом, захваченное изображение имеет точно такой же размер, что и исходное видео, без черных границ и т. Д.

Answer 1

Ответ довольно прост.

В простой математической операции вы можете увидеть, что:

990 / 770 = 1.28
995 / 744 = 1.33

Итак - когда вам требуется mandatory соотношение 1.28 - конечно, вы получите черные границы. Вы нарушаете истинное соотношение сторон 1.33, которое поддерживается камерой.

Единственный способ избежать черной границы - указать width и height с отношением сторон к 1.33.

Надеюсь, это поможет.