Kamerazugriff über Browser

150

Wir erstellen eine HTML5-Website für Handys und müssen über den Webbrowser auf die Kamera zugreifen können, ohne eine native App zu sein. Wir haben Probleme damit, dass dies unter iOS funktioniert. Ist jemandem eine Lösung dafür bekannt?

ios html camera Julia
quelle

Antworten:

124

Sie könnten dies versuchen:

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

Aber es muss iOS 6+ sein, um zu funktionieren. Dadurch erhalten Sie einen schönen Dialog, in dem Sie auswählen können, ob Sie ein Bild aufnehmen oder eines von Ihrem Album hochladen möchten

Screenshot

Ein Beispiel finden Sie hier: Erfassen von Kamera- / Bilddaten ohne PhoneGap

Xeroxoid
quelle
5
Dies ist auch auf Android super!
Matt
1
Schöne Demo zum Hochladen auf einen Server. Weiß jemand, wie man dies ändert, um das Bild in einem lokalen Album auf dem Gerät zu speichern?
K. Niemczyk
2
Das einzige Problem ist, dass zumindest auf dem iPhone (ios 7.0.4) zumindest im Moment ein temporäres Image mit dem Namen immer erstellt wird 'image.jpg'. Wenn Sie also einige Bilder in derselben Form hochladen, überschreiben sie sich aufgrund ihres gleichen Namens gegenseitig, es sei denn, Sie tun etwas, um sie umzubenennen. Seien Sie vorsichtig!
Aleation
@ K.Niemczyk: hast du das jemals herausgefunden? Wenn ja, würde mich die Lösung interessieren. Ich fand dies: dev.w3.org/2009/dap/camera (siehe Beispiele 6-7 für die lokale Speicherung)
lamarant
1
Brillant. Hier ist eine Geige für alle, die diesen Code auf ihrem Gerät testen möchten.
Simon East
33

Ab 2015 funktioniert es jetzt einfach .

<input type="file">

Dadurch wird der Benutzer zum Hochladen einer beliebigen Datei aufgefordert. Unter iOS 8.x kann dies ein Kamera-Video, ein Kamera-Foto oder ein Foto / Video aus der Fotobibliothek sein.

Hochladen von Fotos / Videos / Dateien für iOS / iPhone

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

Dies ist wie oben, beschränkt jedoch das Hochladen auf Fotos nur von der Kamera oder Bibliothek, keine Videos.

Simon East
quelle
1
Gibt es eine Möglichkeit, Benutzer daran zu hindern, eine Datei aus der Fotobibliothek auszuwählen? Ich möchte nur ein neu aufgenommenes Bild akzeptieren.
Daryl
@Daryl nicht unter iOS. Android unterstützt das captureAttribut, das genau das tut. Siehe Richtige Syntax für HTML Media Capture
Octavian Naicu
soll ich dieses Popup "Foto oder Video und Fotobibliothek aufnehmen" nach einiger Zeit schließen, wenn der Benutzer nicht darauf klickt?
Pritish
sieht es so aus, als ob die Videofunktionen nicht mehr da sind?
Martian2049
25

In iOS6 unterstützt Apple dies über das <input type="file">Tag. Ich konnte nicht eine nützliche Verbindung in Apples Entwickler - Dokumentation finden, aber es ist ein Beispiel hier .

Es sieht so aus, als ob Overlays und erweiterte Funktionen noch nicht verfügbar sind, dies sollte jedoch für viele Anwendungsfälle funktionieren.

BEARBEITEN : Das w3c hat eine Spezifikation, von der iOS6 Safari eine Teilmenge von zu implementieren scheint. Das captureAttribut fehlt insbesondere.

user295691
quelle
10

Ich denke, dieser funktioniert. Video oder Audio aufnehmen;

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

oder (neue Methode)

<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
  function update(stream) {
    document.querySelector('video').src = stream.url;
  }
</script>

Wenn dies nicht der Fall ist, funktioniert dies wahrscheinlich auf ios6. Weitere Informationen finden Sie unter get user media

Siniradam
quelle
4

Mit der Picup- App können Sie Bilder von einer HTML5-Seite aufnehmen und auf Ihren Server hochladen. Es erfordert einige zusätzliche Programmierung auf dem Server, aber abgesehen von PhoneGap habe ich keinen anderen Weg gefunden.

Rakensi
quelle
5
In iOS8 benötigen Sie Picup nicht mehr. HTML5 unterstützt <input type = "file" accept = "image / *" id = "capture" capture = "camera">. Verifiziert in Safari und Chrome.
Rakensi
1

Diese Frage ist bereits einige Jahre alt, aber in dieser Zeit haben sich einige zusätzliche Möglichkeiten entwickelt, wie der direkte Zugriff auf die Kamera, das Anzeigen einer Vorschau und das Aufnehmen von Schnappschüssen (z. B. zum Scannen von QR-Codes).

Dieser Artikel von Google Developers enthält eine ausführliche Erläuterung aller (?) Möglichkeiten, wie Bild- / Kameradaten in eine Webanwendung übertragen werden können, von "überall arbeiten" (auch in Desktop-Browsern) bis "nur auf modernen, modernen Geräten arbeiten" -Date mobile Geräte mit Kamera ". Zusammen mit vielen nützlichen Tipps.

Erklärte Methoden:

  • Fragen Sie nach einer URL
  • Dateieingabe (von den meisten anderen Beiträgen hier abgedeckt)
  • Drag & Drop (nützlich für Desktop-Browser)
  • Einfügen aus der Zwischenablage
  • Greifen Sie interaktiv auf die Kamera zu (erforderlich, wenn die Anwendung sofort Feedback zu dem geben muss, was sie "sieht", z. B. QR-Codes).
Christoph
quelle