Control de entrada de archivos HTML con capturar y aceptar atributos funciona mal?

Mi problema:

A continuación, haga clic en el input type=file usuario de input type=file debe obtener el upload file + camera diálogo. Estoy utilizando para este html atributos accept y capture . Pero en algunos dispositivos modernos esto no sucede. Debajo están los ejemplos de código y la tabla que de sus obras o no. Los ejemplos de código se prueban en Mobile Safari y Chrome .

TL, DR:

Tengo 5 ejemplos de código con sólo 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/*"> 

Dispositivos de prueba:

  • 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)

Tabla de resultados:

  • W (ork) – significa habilitado para upload image dialog with camera
  • P (funciona artificialmente) – significa el upload dialog(not image only) with camera habilitado upload dialog(not image only) with camera
  • N (ot work) – significa only camera habilitada
  • Ch – significa Chrome
  • MS – significa 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 | - | - | - | - | - | -------------------------------------------------------------------------------- 

Como puedes ver, solo puedo upload file + camera diálogo de upload file + camera para todos los navegadores que usen

<input type="file" accept="image/*"> sólo. Pero no hay atributo de capture en este caso, y esto me preocupa y hay un problema con Android 4.3.

Mis preguntas son:

  1. ¿Son verdaderos los comportamientos en la tabla? ¿El comportamiento de Android 4.3 es un error?
  2. ¿Puedo confiar en los navegadores lo que siempre agregará cámara para subir diálogo sin atributo de captura? (Por favor agregue enlaces de prueba para la respuesta)

Gracias.

PS Pregunta es especial, pero en mi sitio debo proporcionar a los usuarios el acceso a sus imágenes y cámara. También pienso que mi tabla puede ser provechosa para cualquier persona y también buscaré la respuesta a y fijaré mi respuesta aquí si nadie contesta.

Esta es la respuesta real. Simplemente publícala aquí para los siguientes usuarios:

En realidad, parece que las implementaciones actuales no se basan en el atributo de captura en absoluto, sino sólo en los atributos de tipo y aceptación: el navegador muestra un cuadro de diálogo en el que el usuario puede elegir dónde se debe tomar el archivo y la capture Atributo no se tiene en cuenta. Por ejemplo, iOS Safari se basa en el atributo accept (no captura) para imágenes y videos (no audio). Incluso si no utiliza el atributo accept , el navegador le permitirá elegir entre "Take Photo o Video" y "Choose Existing" (gracias a @ firt por señalar esto).

De esto

EDITED 17 Feb 2016: Este comportamiento sigue activo en los dispositivos.

El código "correcto" y el que debe usar es el 5º:

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

Es por eso que funciona correctamente en la mayoría de sus dispositivos. El código anterior es correcto , completo y suficiente para decir a iOS y Android que:

  1. Desea capturar una imagen (use accept="video/*" para video y accept="audio/*" para audio, salte por completo para permitir cualquier cosa).
  2. El usuario debe ser capaz de seleccionar uno existente o capturarlo en el acto
  1. ¿Puedo confiar en los navegadores lo que siempre agregará cámara para subir diálogo sin atributo de captura?

Sí.

El atributo de capture NO se utiliza para incluir la opción de cámara en el cuadro de diálogo ( <input type="file"> es suficiente para eso), sino para indicar que se prefiere capturar directamente desde la webcam. De la especificación de Recomendación del W3C :

El atributo de captura es un atributo booleano que, si se especifica, indica que se prefiere la captura de medios directamente desde el dispositivo ….

capture es compatible con Android 3.0 + que le llevará directamente a la aplicación de cámara si la capture está presente en el código.

No hay soporte en iOS6-10 que siempre le dará al menos dos opciones: "Tomar fotos" + "Photo Library".

El atributo de capture ha evolucionado en la especificación (por lo que verá varias versiones en StackOverflow):

  1. Julio de 2010: accept="image/*;capture=camera"
  2. Apr 2011: capture="camera" (cadena)
  3. Dic 2012: capture (Boolean, Recomendación del candidato al W3C )

PS: He hecho un montón de investigación sobre la Captura de Medios HTML, vea Sintaxis Correcta para la Captura de Medios HTML y la Nueva Solicitud de Captura de Medios en iOS9 . Aquí está mi banco de pruebas con más de 20 combinaciones de código.

  • ¿Cómo usar correctamente -webkit-device-pixel-ratio en iOS y Android?
  • ¿Puede un APK ser reempaquetado después de una edición de texto menor?
  • Plugin de androide phonegap ActionBar wrapper
  • Campo de entrada HTML: muestra automáticamente el método de entrada numérica
  • JavaScript cómo comprobar el agente de usuario para Mobile / Tablet
  • ¿Cómo puedo colocar un objeto en el otro lado de la pantalla
  • Comportamiento de Android 4.2 - Environment.getExternalStorageDirectory (). GetPath ()
  • ¿Limpiar la caché de la aplicación mediante programación?
  • SMS raw pdu en Android
  • ¿Creación de aplicaciones iOS y Android desde un sencillo html5 + javascript?
  • Detección de transmisión HTTP Live en móviles
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.