Управление вводом HTML файла с атрибутами захвата и приема работает неправильно?

Моя проблема:

Затем пользователь нажимает кнопку input type=file, чтобы получить диалог upload file + camera. Я использую для этого html-атрибуты accept и capture. Но на некоторых современных устройствах этого не происходит. Ниже приведены примеры кода и таблица, какая из них работает или нет. Примеры кода тестируются в Mobile Safari и Chrome.

TL; ДР:

У меня есть 5 примеров кода только с input type file:

1. (jsfiddle)

<input type="file" accept="image/*" capture>

2. (jsfiddle)

<input type="file" accept="image/*" capture="camera">

3. (jsfiddle)

<input type="file" capture="camera">

4. (jsfiddle)

<input type="file" capture>

5. (jsfiddle)

<input type="file" accept="image/*">

Тестируемые устройства:

  • Samsung S3 (Android 4.1.2)
  • Samsung S3 (Android 4.3)
  • Samsung Galaxy Tab 2 7.0 (Android 4.2.2)
  • Samsung Note (Android 4.1.2)
  • iPhone 5 (iOS 7.0.4)
  • Nexus 4 (Android 4.4)

Таблица результатов:

  • W (ork) - означает включенность upload image dialog with camera
  • P (искусственно работает) - означает включено upload dialog(not image only) with camera
  • N (ot work) - означает only camera включен
  • Ch - означает Chrome
  • MS - означает Mobile Safari

#

--------------------------------------------------------------------------------
|devices/example   | Ch 1| Ch 2| Ch 3| Ch 4| Ch 5| MS 1| MS 2| MS 3| MS 4| MS 5| 
--------------------------------------------------------------------------------
|Samsung S3/4.1    |  N  |  N  |  P  |  P  |  W  |  W  |  N  |  P  |  P  |  W  |
--------------------------------------------------------------------------------
|Samsung S3/4.3    |  N  |  N  |  P  |  P  |  P  |  N  |  N  |  P  |  P  |  P  |
--------------------------------------------------------------------------------
|Samsung Galaxy Tab|  N  |  N  |  P  |  P  |  W  |  W  |  N  |  P  |  P  |  W  |
--------------------------------------------------------------------------------
|Samsung Note      |  N  |  N  |  P  |  P  |  W  |  W  |  N  |  P  |  P  |  W  |
--------------------------------------------------------------------------------
|iPhone 5          |  W  |  W  |  P  |  P  |  W  |  W  |  Y  |  P  |  P  |  W  |
--------------------------------------------------------------------------------
|Nexus 4           |  N  |  N  |  P  |  P  |  W  |  -  |  -  |  -  |  -  |  -  |
--------------------------------------------------------------------------------

Как вы можете видеть, я могу получить только диалог upload file + camera для всех браузеров, использующих

<input type="file" accept="image/*">. Но в этом случае нет атрибута capture, и это беспокоит меня, и есть проблема с Android 4.3.

Мои вопросы:

  • Являются ли поведение в таблице истинным? Android 4.3 является ошибкой?
  • Могу ли я доверять браузерам, что он всегда будет добавлять камеру для загрузки   диалог без атрибута захвата? (Добавьте ответные ссылки для ответа)

Спасибо.

P.S. Вопрос особенный, но на моем сайте я должен предоставить пользователям доступ к своим изображениям и камере. Также я думаю, что мой стол может быть полезен для всех, а также я буду искать ответ и отправлю свой ответ здесь, если никто не ответит.

ОТВЕТЫ

Ответ 1

Это реальный ответ. Просто отправьте его здесь для следующих пользователей:

На самом деле, кажется, что текущие реализации не полагаются на атрибут захвата вообще, но только для атрибутов типа и принятия: браузер отображает диалоговое окно, в котором пользователь может выбрать, где файл должен быть взят, а атрибут capture не принят. Например, iOS Safari полагается на атрибут (не захват) для изображений и видео (не аудио). Даже если ты не используйте атрибут accept, браузер позволит вам выбрать между "Take Photo или Video" и "Choose Existing" (благодаря @firt для указания этого).

От

EDITED 17 февраля 2016 года: Это поведение по-прежнему активно на устройствах.

Ответ 2

"Правильный" код и тот, который вы должны использовать, - это пятый:

<input type="file" accept="image/*">

Именно поэтому он работает правильно на большинстве ваших устройств. Вышеприведенный код является правильным, полным и достаточно, чтобы сказать iOS и Android, что:

  • вы хотите захватить изображение (используйте accept="video/*" для видео и accept="audio/*" для аудио, пропустите все, чтобы что-то разрешить).
  • пользователь должен иметь возможность выбрать существующий ИЛИ захватить его на месте
  1. Могу ли я доверять браузерам, что он всегда будет добавлять камеру для загрузки диалога без атрибута захвата?

Да.

Атрибут capture НЕ используется для включения опции камеры в диалоговом окне (для этого достаточно <input type="file">), но для указания предпочтительности прямого захвата с веб-камеры. Из спецификация рекомендации W3C:

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

capture поддерживается Android 3.0+, который приведет вас прямо к приложению камеры, если в коде присутствует capture.

В iOS6-10 нет поддержки, которая всегда будет давать вам как минимум 2 варианта: "Take Photo" + "Photo Library".

Атрибут capture эволюционировал в спецификации (поэтому вы увидите несколько версий в StackOverflow):

  • Июль 2010: accept="image/*;capture=camera"
  • Apr 2011: capture="camera" (String)
  • Декабрь 2012: capture (Boolean, Рекомендация кандидата W3C,)

PS: Я потратил немало исследований на HTML Media Capture, см. Исправить синтаксис для HTML Media Capture и Новая подсказка для захвата медиа в iOS9. Здесь мой тестовый стенд с 20 + кодовыми комбинациями.