Как получить поток с веб-камеры с соотношением сторон 1: 1 и максимально доступным разрешением

В основном вопрос в заголовке. Речь идет о функции WebRTC и getUserMedia. Аналогичный вопрос был здесь: Как сохранить Видео с соотношением сторон 1: 1 постоянно в WebRTC. Но в моем случае мне нужно записать поток с помощью MediaRecorder, просто обрезать видеоэлемент с помощью css недостаточно. Я немного смущен ограничениями getUserMedia. Есть параметр aspectRatio, но мне не удалось с его помощью добиться желаемого результата. Что сработало для меня, так это определение ограничений таким образом:

const constraints = {
  audio: true,
  video: {
    width: { exact: 720 },
  }
};

Но он не определяет максимальное разрешение автоматически. У вас есть идеи, как это сделать с умом?


javascript webrtc getusermedia
person Vitalii Ivanov    schedule 19.06.2017    source источник
comment
Возможный дубликат Как сохранить 1: 1 видео с соотношением сторон постоянно в WebRTC   -  person jib    schedule 19.06.2017
comment
@jib да, этот вопрос похож, но мне нужен поток для его записи с помощью MediaRecorder. Просто обрезать видеоэлемент с помощью css недостаточно.   -  person Vitalii Ivanov    schedule 19.06.2017
comment
aspectRatio еще не реализован в Chrome или Firefox. Однако похоже, что вы ожидаете, что getUserMedia () изменит масштаб вывода камеры за вас. Не все браузеры делают это, вместо этого позволяя вам обнаруживать собственные режимы вашей камеры, поэтому вместо этого может возникнуть ошибка OverconstrainedError.   -  person jib    schedule 20.06.2017
comment
Кажется, что aspectRatio сейчас работает над последней версией Chrome, хотя я не могу найти никакой информации об этом. Однако, по крайней мере, ограничения min и max у меня работали в Chrome.   -  person Piet    schedule 26.02.2018

Ответы (1)


arrow_upward
5
arrow_downward

Не все камеры будут поддерживать все форматы изображения. 1:1 - определенно странное соотношение сторон.

Что вам нужно сделать, так это сделать собственное кадрирование и создать свой собственный поток. Вы можете сделать это, установив srcObject видео в getUserMediaStream, затем каждый кадр (используйте requestAnimationFrame()), рисуйте это видео на холсте любым обрезанным способом, который вы хотите. Оттуда используйте CanvasCaptureMediaStream, чтобы вернуть отредактированное видео в виде потока, который вы можете использовать в своем вызове WebRTC.

person Brad    schedule 19.06.2017