Сделайте снимок с html5

Question

Я прочитал много способов получить изображение с страницы html5. Я все еще не уверен, что это лучше для моих потребностей:

• широкая поддержка браузеров и ОС: по крайней мере: Chrome, Firefox, Android по умолчанию, сафари
• мне не нужно приобретение в режиме реального времени. Пользователь должен нажать на кнопку, чтобы сделать снимок, приложение, запрашивающее системы для камер

Есть по крайней мере три решения:

• <input type="file" accept="image/*;capture=camera">
• Navigator.getUserMedia() (это кажется устаревшим)
• MediaDevices.getUserMedia() (кажется экспериментальным)

В любом случае, я вижу много примеров les, чтобы вставить камеру на страницу (w/ getUserMedia), поэтому я не знаю, могу ли я полагаться только на первый метод.

Answer 1

Использование API WebRTC GetUserMedia будет охватывать все современные браузеры, кроме Safari: http://caniuse.com/#feat=stream

Here пример страницы, которая использует GetUserMedia, чтобы сделать снимок (со ссылкой на page, описывающую код). Большинство демонстраций getUserMedia показывают видеопоток в видимой области холста, но это не требуется. Вы можете захватить изображение с помощью getUserMedia без отображения видеопотока в видимом холсте.

К сожалению, Apple медленно применяет API-интерфейсы WebRTC, поэтому я думаю, что тег ввода файла - это лучшее, на что вы можете надеяться, если вы не хотите использовать что-то вроде Кордовы. Here - описание использования тега ввода файла.

Media Capture API - рекомендация кандидата, которая означает, что она уже на пути к стандарту, однако я не знаю ни одного браузера, который реализует текущую рекомендацию W3C (используя атрибут голого захвата во входном теге). Стиль <input type="file" accept="image/*"> в настоящее время поддерживается только мобильными браузерами.

Таким образом, если вы хотите иметь широкую поддержку браузера в ближайшем будущем, вам нужно будет поддерживать оба метода, пока Apple не начнет поддерживать API WebRTC или пока другие настольные браузеры не начнут поддерживать API Media Capture (или вариант с атрибутом захвата, который в настоящее время поддерживается мобильными браузерами).