Le contrôle d’entrée de fichier HTML avec capture et acceptation des atsortingbuts fonctionne mal?

Mon problème:

Ensuite, l’utilisateur clique sur le input type=file utilisateur du input type=file doit obtenir le upload file + camera boîte de dialog de la upload file + camera . J’utilise pour cela les atsortingbuts HTML accept et capture . Mais sur certains appareils modernes, cela ne se produit pas. Ci-dessous, il y a les exemples de code et le tableau qui fonctionne ou non. Les exemples de code sont testés dans Mobile Safari et Chrome .

TL; DR:

J’ai 5 exemples de code avec juste input type file :

1. ( jsfiddle )

  

2. ( jsfiddle )

  

3. ( jsfiddle )

  

4. ( jsfiddle )

  

5. ( jsfiddle )

  

Dispositifs de test:

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

Tableau de résultats:

  • W (ork) – signifie que vous pouvez upload image dialog with camera
  • P (fonctionne artificiellement) – signifie la upload dialog(not image only) with camera activée upload dialog(not image only) with camera
  • N (pas de travail) – signifie only camera activée
  • Ch – signifie 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 | - | - | - | - | - | -------------------------------------------------------------------------------- 

Comme vous pouvez le voir, je ne peux obtenir que le upload file + camera dialog de la upload file + camera pour tous les navigateurs en utilisant

uniquement. Mais il n’y a pas d’atsortingbut de capture dans ce cas, et cela m’inquiète et il y a un problème avec Android 4.3.

Mes questions sont:

  1. Les comportements dans le tableau sont-ils vrais? Le comportement d’Android 4.3 est un bug?
  2. Puis-je faire confiance aux navigateurs pour l’append à la boîte de dialog de téléchargement de la caméra sans atsortingbut de capture? (S’il vous plaît append des liens de preuve pour la réponse)

Merci.

PS La question est spéciale, mais sur mon site, je dois fournir aux utilisateurs un access à ses images et à sa caméra. Je pense également que ma table peut être utile pour tout le monde et je vais aussi chercher une réponse et afficher ma réponse ici si personne ne répond.

Ceci est la réponse réelle. Il suffit de le poster ici pour les prochains utilisateurs:

En fait, il semble que les implémentations actuelles ne reposent pas du tout sur l’atsortingbut de capture, mais seulement sur le type et les atsortingbuts d’acceptation: le navigateur affiche une boîte de dialog dans laquelle l’utilisateur peut choisir l’emplacement du fichier et la capture l’atsortingbut n’est pas pris en compte. Par exemple, iOS Safari s’appuie sur l’atsortingbut d’acceptation (et non sur la capture) pour les images et les vidéos (pas l’audio). Même si vous n’utilisez pas l’atsortingbut accept , le navigateur vous permettra de choisir entre “Take Photo or Video” et “Choose Existing” (merci à @ firt de l’avoir signalé).

De ceci

EDITED 17 févr. 2016: Ce comportement est toujours actif sur les appareils.

Le code “correct” et celui que vous devriez utiliser est le 5ème:

C’est pourquoi cela fonctionne correctement sur la plupart de vos appareils. Le code ci-dessus est correct , complet et suffisant pour indiquer à la fois iOS et Android:

  1. vous voulez capturer une image (utilisez accept="video/*" pour la vidéo et accept="audio/*" pour l’audio, ignorez tout pour autoriser).
  2. l’utilisateur doit être capable de sélectionner un existant ou de le capturer sur place
  1. Puis-je faire confiance aux navigateurs pour l’append à la boîte de dialog de téléchargement de la caméra sans atsortingbut de capture?

Oui.

L’atsortingbut de capture n’est PAS utilisé pour inclure l’option de caméra dans la boîte de dialog ( suffit pour cela) mais pour indiquer que la capture directe à partir de la webcam est préférable . D’après les spécifications du W3C :

L’atsortingbut capture est un atsortingbut booléen qui, s’il est spécifié, indique que la capture de média directement depuis le périphérique … est préférable.

capture est capture charge par Android 3.0+, ce qui vous amènera directement à l’application appareil photo si la capture est présente dans le code.

Il n’y a pas de support dans iOS6-10 qui vous donnera toujours au moins 2 options: “Take Photo” + “Photothèque”.

L’atsortingbut de capture a évolué dans la spécification (c’est pourquoi vous verrez plusieurs versions dans StackOverflow):

  1. Juillet 2010: accept="image/*;capture=camera"
  2. Avr 2011: capture="camera" (chaîne)
  3. Décembre 2012: capture (booléen, recommandation du candidat W3C ,)

PS: J’ai fait une tonne de recherches sur HTML Media Capture, voir la syntaxe correcte pour HTML Media Capture et la nouvelle invite pour Media Capture dans iOS9 . Voici mon banc de test avec plus de 20 combinaisons de codes.