Видеопоток в приложении React с использованием objectFit: содержит пробелы, но обложка слишком сильно увеличивает масшта ⇐ CSS

[Anonymous]

Я работаю над приложением React, которое включает в себя прямую трансляцию видео с веб-камеры пользователя. Видеопоток отображается с использованием HTML и обрабатывается моделью позы MediaPipe вместе со сценой Three.js для рендеринга 3D-объектов.
Проблема:

• При использовании objectFit: 'cover' видео заполняет контейнер, но масштаб увеличивается слишком сильно.
• При использовании objectFit: 'contain' видео отображается правильно, но появляются пробелы сверху и снизу на мобильных устройствах (или по бокам в альбомном режиме).

Я хочу, чтобы видео отображалось естественно, без слишком большого масштабирования и без пробелов. Я пробовал различные комбинации преобразований ширины, высоты, objectFit и CSS, но не нашел решения, которое бы хорошо работало как на настольных компьютерах, так и на мобильных устройствах.
Код:< /strong>
Вот соответствующая часть моего компонента React:

Код: Выделить всё

Что я пробовал[/b]:

• Использование objectFit: 'cover ': Заполняет контейнер, но в результате получается увеличенное видео, при котором части видео обрезаются.
• Использование objectFit: 'contain': Показывает все видео, но в результате сверху и снизу на мобильных устройствах и по бокам в горизонтальной ориентации остается пустое пространство.
• Настройка ширины, высоты и свойств преобразования не помогает. проблема для всех размеров экрана.

Моя цель:
Я хочу подача видео на:

• Отображать естественно (без увеличения).
• Не добавлять пробелы ни на одном устройстве (на обоих устройствах). мобильные и настольные компьютеры).

Будем благодарны за любые советы о том, как добиться такого поведения!

Подробнее здесь: https://stackoverflow.com/questions/790 ... ces-but-co