Видео автоматически изменяет размер меня - PullRequest
Новая
       32

Видео автоматически изменяет размер меня

1 голос
/ 08 марта 2019

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

navigator.mediaDevices.getUserMedia({
    video: {

      // Indicates the possible video quality.
      width: { min: 640, ideal: 1024, max: 1920 },
      height: { min: 480, ideal: 720, max: 1080 }
    }})
    .then(stream => {
     // Code over here
        }));
      };
    })
    .catch(error => {
     // Error over here
      }));
    });
}

В моем CSS у меня есть это. 

#video {
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  width: 100%!important;
  height: auto!important;
  -webkit-transform: scaleX(-1); //avoid mirror effect
  transform: scaleX(-1);

}

«Ошибка» появляется, когда я хочу, чтобы качество видео было другимчем 640x480, то размер видео> автоматически изменяется и не работает должным образом, потому что я обрезаю изображение, затем анализирую его и другие вещи, которые сейчас не важны.

Можно ли улучшить качествобез изменения размера видео?

С уважением!

1 Ответ

0 голосов
/ 10 марта 2019

Как только вы установите размер видеовхода с помощью getUserMedia, вы не сможете изменить его фактический размер, только размер элемента <video> - размеры входа (входа камеры) не изменятся, что может привести к обрезке и пикселизации вашего видео.display.

Я предполагаю, что вы используете команду video.srcObject = stream; для установки входа (потока) на элемент <video>.

Если вы хотите изменить размер фактического размера ввода, выпотребуется снова присоединить srcObject к новому объекту потока после повторного вызова getUserMedia с новыми измерениями.

Например: 

var constraints = {
    audio: true,
    video: {
        mandatory: {
            minWidth: CANVAS_WIDTH,
            minHeight: CANVAS_HEIGHT,
            maxWidth: CANVAS_WIDTH,
            maxHeight: CANVAS_HEIGHT
        }
    }
};

navigator.mediaDevices.getUserMedia(constraints).then( ... )
...