Как исправить «растянутый вид» потока камеры на некоторых устройствах (getUserMedia) - PullRequest
0 голосов
/ 06 февраля 2019

Я транслирую свою камеру «окружающей среды» на элемент видео в моем DOM, используя navigator.mediaDevices.getUserMedia.Проблема в том, что на моем тестовом устройстве (Samsung Tab) это видео кажется растянутым.Во время моих тестов я не использую никаких ограничений, кроме FaceMode: «Environment».У меня нет этой проблемы на моем мобильном устройстве.

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

// потоковое кодирование

setup() {
    const constraints = {
      video: {
        facingMode: "environment",
        //tablet
        //width: {min:1280, ideal: width},
        //height: {min:720, ideal: height}
      },
      audio: false
    };

    navigator.mediaDevices.getUserMedia(constraints)
      .then(function (s) {
        video.srcObject = s;
        video.play();
      })
      .catch(function (err) {
        console.log("An error occured! " + err);
      });

    if(!this.get('streaming')) {
      video.addEventListener("canplay", function () {
        _this.set('videoReady', true);
        _this.processMedia();
      }, false);
    }
}
processMedia() {
    let _this = this;
    let video = document.getElementById('videoInput');
    if (!this.get('streaming')) {
      video.width = video.videoWidth;
      video.height = video.videoHeight;
      this.placeIndicators(video.width, video.height);
    }
   //process functionality//
}

Ожидаемое поведение: получить видео элемент с потоком камеры моего окружения с правильным соотношением сторон на всех устройствах.

Фактическое поведение: на моем планшете мой видеопоток «растягивается, когда устройство удерживается в альбомной ориентации, и« сжимается », когда держится портрет

1 Ответ

0 голосов
/ 11 февраля 2019

После дальнейшего тестирования я заметил, что, когда я устанавливаю ограничения видео на Full HD (1920 x 1080), мое видео не растягивается / сжимается.

Используя мой видеоконтейнер для уменьшения моего видео и вычисления с отношением моего видео к контейнеру, мне также удалось правильно расположить мои индикаторы.

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

Предварительный просмотр камеры Android в растянутом виде

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

const constraints = {
    video: {
      width:1920,
      height:1080,
      facingMode: {ideal:"environment"},
    },
    audio: false
  };
...