Как добиться соотношения 16: 9 с getUserMedia на всех устройствах?

Question

Как добиться соотношения 16: 9 с getUserMedia на всех устройствах?

1

Мне нужно использовать getUserMedia пока видео установлено для записи с разрешением 16: 9.

Мой код работает на большинстве настольных компьютеров и на Android 7 и выше:

navigator.getUserMedia( {
   audio: true,
   video: {
      mandatory: {
          minWidth: 380,
          minHeight: 214,
          maxWidth: 380,
          maxHeight: 214
      }
   }
})

Но на Android 6 и ниже, а также на некоторых настольных компьютерах (не может точно определить, какие именно), getUserMedia ломается, и изображение не доступно с камеры.

Это работает на всех устройствах и на рабочем столе, но с коэффициентом разрешения по умолчанию 4: 3, тогда как мне нужно 16: 9:

navigator.getUserMedia( {
   audio: true,
   video: true
})

Я пробовал отказаться от mandatory, не повезло.

Чтобы добавить к моей путанице, устройствам iOS (11 бета) и Android необходимо facingMode аргумент facingMode:

video: { facingMode: 'user' }

Таким образом, кажется, что передача аргументов width и height прерывает getUserMedia на некоторых настольных компьютерах и устройствах, таких как Android 5 и 6.

Есть ли способ заставить соотношение 16: 9 на всех устройствах? Каков правильный и обычный способ захвата видео с определенными размерами?

Koby Douek 20 авг. 2017, в 14:32

Источник

0

Существует также ключевое слово под названием «точный». Вы пробовали это? Смотрите здесь: developer.mozilla.org/en-US/docs/Web/API/MediaDevices/… как это используется.
Bernd 20 авг. 2017, в 12:15
0

Да, попробовал это тоже без удачи @Bernd
Koby Douek 20 авг. 2017, в 12:17

Теги:

javascript

android

ios

webrtc

getusermedia

1 ответ

Ещё вопросы

Существует также ключевое слово под названием «точный». Вы пробовали это? Смотрите здесь: developer.mozilla.org/en-US/docs/Web/API/MediaDevices/… как это используется.
Да, попробовал это тоже без удачи @Bernd

jib · Accepted Answer · 2017-08-21T22-25-00.000Z

Вы предполагаете, что все камеры поддерживают 16: 9, или что все браузеры обрезают видео для вас. Не так. Вы также используете устаревший API. Попробуйте последний API (скрипка, образцы):

var constraints = {video: {width: 320, height: 180, facingMode: "user"}};

navigator.mediaDevices.getUserMedia(constraints)
.then(stream => video.srcObject = stream)
.then(() => new Promise(resolve => video.onloadedmetadata = resolve))
.then(() => log(video.videoWidth +"x"+ video.videoHeight))
.catch(e => console.log(e));

getUserMedia - это API-интерфейс для обнаружения камеры/микрофона: все min, max, exact, ideal ключевые слова существуют для описания ваших ограничений, т.е. ваша толерантность к тому, что вы не получаете то, что хотите.

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

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

Обратите внимание, что даже Chrome не будет масштабироваться, поэтому, если вы используете Chrome на Android, вы можете попросить более высокое разрешение, чем может выводить устройство Android 6. OverconstrainedError этом случае проверьте OverconstrainedError и повторите попытку с более низкими значениями.

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

Но HTMLVideoElement уменьшает масштабы воспроизведения в любом случае, и вы можете использовать CSS для обрезки.

На данный момент проголосовали, необходимо дополнительное тестирование, чтобы принять этот ответ.