Mein Problem:

Dann klicken Benutzer auf den input type=fileBenutzer muss den upload file + cameraDialog erhalten. Ich benutze für diese HTML-Attribute acceptund capture. Bei einigen modernen Geräten ist dies jedoch nicht der Fall. Unten finden Sie die Codebeispiele und die Tabelle, welche davon funktioniert oder nicht. Codebeispiele werden in Mobile Safariund getestet Chrome.

TL; DR:

Ich habe 5 Codebeispiele mit nur 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/*">

Testgeräte:

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

Ergebnistabelle:

• W (ork) - bedeutet aktiviert upload image dialog with camera
• P (künstlich funktioniert) - bedeutet aktiviert upload dialog(not image only) with camera
• N (keine Arbeit) - bedeutet only cameraaktiviert
• Ch - bedeutet Chrome
• MS - bedeutet 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  |  -  |  -  |  -  |  -  |  -  |
--------------------------------------------------------------------------------

Wie Sie sehen, kann ich nur upload file + cameraDialoge für alle Browser verwenden

<input type="file" accept="image/*">nur. Aber capturein diesem Fall gibt es kein Attribut, und das beunruhigt mich und es gibt ein Problem mit Android 4.3.

Meine Fragen sind:

1. Sind die Verhaltensweisen in der Tabelle wahr? Android 4.3 Verhalten ist ein Fehler?
2. Kann ich Browsern vertrauen, dass sie immer eine Kamera zum Hochladen von Dialogen ohne Erfassungsattribut hinzufügen? (Bitte fügen Sie Proof-Links für die Antwort hinzu)

Vielen Dank.

PS Frage ist etwas Besonderes, aber auf meiner Website muss ich Benutzern Zugriff auf seine Bilder und Kamera gewähren. Ich denke auch, dass mein Tisch für jeden hilfreich sein kann und ich werde nach einer Antwort suchen und meine Antwort hier posten, wenn niemand antwortet.

Dies ist die eigentliche Antwort. Poste es einfach hier für die nächsten Benutzer:

Tatsächlich scheinen aktuelle Implementierungen überhaupt nicht auf dem Erfassungsattribut zu beruhen, sondern nur auf den Typ- und Akzeptanzattributen: Der Browser zeigt ein Dialogfeld an, in dem der Benutzer auswählen kann, wo die Datei aufgenommen werden soll, und das captureAttribut wird nicht berücksichtigt. Beispielsweise verwendet iOS Safari das Attribut accept (keine Erfassung) für Bilder und Videos (nicht Audio). Auch wenn Sie das acceptAttribut nicht verwenden , können Sie im Browser zwischen "Foto oder Video aufnehmen" und "Vorhanden auswählen" wählen (danke an @ firt für diesen Hinweis).

aus diesem

EDITED 17 Feb 2016: Dieses Verhalten ist auf Geräten noch aktiv.

Der "richtige" Code und der, den Sie verwenden sollten, ist der fünfte:

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

Aus diesem Grund funktioniert es auf den meisten Ihrer Geräte ordnungsgemäß. Der obige Code ist korrekt , vollständig und reicht aus , um sowohl iOS als auch Android Folgendes mitzuteilen:

1. Sie möchten ein Bild aufnehmen ( accept="video/*"für Video und accept="audio/*"Audio verwenden, ganz überspringen, um etwas zuzulassen).
2. Der Benutzer sollte in der Lage sein , ein vorhandenes auszuwählen ODER es vor Ort zu erfassen

2. Kann ich Browsern vertrauen, dass sie immer eine Kamera zum Hochladen von Dialogen ohne Erfassungsattribut hinzufügen?

Ja.

Das captureAttribut wird NICHT verwendet, um die Kameraoption in den Dialog aufzunehmen ( <input type="file">reicht dafür aus), sondern um anzuzeigen, dass die direkte Erfassung von der Webcam bevorzugt wird . Aus der W3C-Empfehlungsspezifikation :

Das Erfassungsattribut ist ein boolesches Attribut, das, falls angegeben, angibt, dass die Erfassung von Medien direkt vom Gerät ... bevorzugt wird.

capturewird von Android 3.0+ unterstützt, mit dem Sie direkt zur Kamera-App gelangen, wenn captureder Code vorhanden ist.

In iOS6-10 gibt es keine Unterstützung, die Ihnen immer mindestens zwei Optionen bietet: "Foto aufnehmen" + "Fotobibliothek".

Das captureAttribut wurde in der Spezifikation weiterentwickelt (weshalb in StackOverflow mehrere Versionen angezeigt werden):

1. Juli 2010: accept="image/*;capture=camera"
2. Apr 2011: capture="camera"(String)
3. Dezember 2012: capture(Boolean, W3C-Kandidatenempfehlung ,)

PS: Ich habe eine Menge Nachforschungen über HTML Media Capture angestellt, siehe Korrekte Syntax für HTML Media Capture und Die neue Eingabeaufforderung für Media Capture in iOS9 . Hier ist mein Prüfstand mit mehr als 20 Codekombinationen.

Für andere ist dies das Verhalten auf Chrome unter Android 9 ab heute (Februar 2020):

  Must be selected from album
  <input type="file" accept="image/*">

  Must be captured from camera
  <input type="file" accept="image/*" capture="">

  Allowed user to choose either from album or camera
  <input type="file" accept="image/*;capture=camera">