Navigator.MediaDevices.getUsermedia () портретный режим в мобильном устройстве - видео -трека не обрезана и не изменяетс ⇐ Javascript

[Anonymous]

В небольшом веб -проекте я пытаюсь получить видеоэлемен >

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

Где размеры, которые я написал, просто чтобы показать, что я хочу отобразить элемент с соотношением сторон «портрета».
Следуя тому, что указано здесь:
https://developer.mozilla.org/en-us/doc ... tusermedia
В сценарии у меня есть что -то вроде этого: < /p>
const constraints = {
audio: false,
video: {
width: 300,
height: 600
},
};

navigator.mediaDevices
.getUserMedia(constraints)
.then((mediaStream) => {
const video = document.querySelector("video");
video.srcObject = mediaStream;
video.onloadedmetadata = () => {
video.play();
};
})
.catch((err) => {
// always check for errors at the end.
console.error(`${err.name}: ${err.message}`);
});
< /code>
Когда я открываю веб -страницу на мобильном устройстве в режиме портрета, я понимаю: < /p>

Видео -элемент имеет Запрашиваемый размер; < /li>
Видео -трека, отображаемая внутри видео элемента, на требуемой ширине, но его высота намного меньше, чем требуется, и, в частности, точно равно требуемому времени ширины соотношение сторон, полученное с помощью необходимых ограничений. Таким образом, в случае примера я предоставил высоту видеотека Веб -страница на настольном компьютере или на мобильном устройстве, хранящемся в режиме ландшафта, я могу получить видео -дорожку с точной шириной и высотой, и, в свою очередь, соответствует его видео элементу. < /p>
i Пытались также установить ширину и диапазоны высоты, а также идеальные значения, а также точное значение соотношения сторон через следующее определение ограничений: < /p>
constraints : {
audio: false,
video : {
width: {
min: 200,
max: 700,
ideal: 300
},
height: {
min: 400,
max: 1400,
ideal: 600
},
aspectRatio : {exact:0.5},
resizeMode: "crop-and-scale",
}
}
< /code>
Но я всегда получаю тот же результат, что и описанный выше.
Это поведение, по -видимому, связано с мобильным устройством, которое, когда в режиме портрета не «обрезает и Измените размер «видео -трек, чтобы заполнить видео -элемент. Похоже, что мобильное устройство не расширяет ширину видеолепа по доступной ширине видео элемента, но заставляет его иметь максимальную ширину, равную ширине видео элемента. < /P>
Я мог бы получить эфемерный результат только с помощью следующих ограничений: < /p>
constraints = {
audio: false,
video: {
width: 300,
aspectRatio: 0.5
},
};
< /code>
i.e. Запрашивая ширину видеолега, равную ширине видео элемента, оставляя высоту вообще не ограниченной и запрашивая конкретное соотношение сторон.
с этой настройкой, видеотека Из объекта MediaStream обслуживается), обрезается и изменяется по мере просьба (изображение заполняет видео элемент), но сразу после того, как видеотерока снова установлена ​​с его высотой, равной его ширине, соотношение сторон (300*0,5 = 150) .
Есть ли известный способ сохранить видео -трек обрезан и изменен?

Подробнее здесь: https://stackoverflow.com/questions/794 ... -video-tra