Wie kann ich über eine Web-App auf die Kamera eines Mobiltelefons zugreifen?

190

In meiner Web-App (keine native App) für Handys möchte ich ein Foto aufnehmen und hochladen, aber ich möchte Adobe Flash nicht verwenden. Gibt es eine Möglichkeit, dies zu tun?

html mobile camera 夏 期 劇場
quelle
2
"Webseite" bedeutet, dass von jeder Art von Clients / Geräten aus problemlos darauf zugegriffen werden kann. Soll ich also Einschränkungen festlegen?
期 劇場
1
Ich nehme an, Sie möchten auf die Hardware-Kamera zugreifen, oder?
Dennis Traub
Hmm .. "Kamera" der Handys / etc .. von der Webseite.
期 劇場
Hallo, das ist ein Fach, das ich gerade für meine eigenen Projekte studiere. Mit PWAs können Sie native Gerätefunktionen in modernen Browsern verwenden: developer.google.com/web/updates/2016/12/imagecapture
palmaone

Antworten:

260

In iPhone iOS6 und ab Android ICS verfügt HTML5 über das folgende Tag, mit dem Sie Bilder von Ihrem Gerät aufnehmen können:

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

Capture kann Werte wie Kamera, Camcorder und Audio annehmen.

Ich denke, dieses Tag wird definitiv nicht in iOS5 funktionieren, nicht sicher.

Ashish
quelle
32
Hier ist ein tolles Tutorial: html5rocks.com/de/tutorials/getusermedia/intro
Micah
2
GetUserMedia ist hier nicht erforderlich.
Ray Nicholus
Ich erhalte ein "getUserMedia (), das von diesem Gerät nicht unterstützt wird" - aber ich bin auf Safari und habe ios7 - warum? - Dan gerade bearbeiten
Dan
10
Ich denke, vielleicht sollte der Code <input type="file" accept="image/*;capture=camera">stattdessen sein. Laut MDN gibt es kein captureAttribut für ein inputElement.
Kenny Evitt
9
Sowohl capture="camera"(String) als auch die älteren accept="image/*;capture=camera"wurden 2012 durch capture="capture"(Boolean) ersetzt. Das Attribut wird verwendet, um die Erfassung zu erzwingen, anstatt aus der Bibliothek auszuwählen. Siehe die Spezifikation und die korrekte Syntax für HTML Media Capture
Octavian Naicu
36

Heutzutage ist es zumindest mit Android relativ einfach. Verwenden Sie einfach das normale Dateieingabetag. Wenn der Benutzer darauf klickt, fragt das Telefon, ob der Benutzer eine Kamera (oder Dateimanager usw.) zum Hochladen einer Datei verwenden möchte. Nehmen Sie einfach ein Foto mit der Kamera auf und es wird automatisch hinzugefügt und hochgeladen.

Keine Ahnung von iPhone. Vielleicht kann jemand darüber aufklären. EDIT: Iphone funktioniert ähnlich.

Beispiel für das Eingabe-Tag:

<input type="file" accept="image/*" capture="camera">
Tuxie
quelle
können Sie dies für mehrere Dateien tun wie: multiple = "multiple"
parseguy
Beispiel: <input type = "file" accept = "image / *" multiple = "multiple" capture = "camera">
Parseguy
multiplefunktioniert sowohl unter Android als auch unter iOS, siehe Richtige Syntax für HTML Media Capture
Octavian Naicu
Nicht sicher für andere Apple-Geräte, zumindest funktioniert diese Lösung jetzt auch auf dem iPad.
Cytsunny
29

Um dies zu aktualisieren, lautet der Standard jetzt:

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

um auf die nach hinten gerichtete Kamera zuzugreifen, und 

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

für benutzerbezogene (Front-) Kamera. Um auf Video zuzugreifen, ersetzen Sie "Bild" im Namen durch "Video".

Getestet auf dem iPhone 5c unter iOS 10.3.3, Firmware 760, funktioniert einwandfrei.

https://www.w3.org/TR/html-media-capture/

user3204365
quelle
23

Safari & Chrome unter iOS 6+ und Android 2.2+ unterstützen HTML Media Capture, mit dem Sie Bilder mit der Kamera Ihres Geräts aufnehmen oder eine vorhandene auswählen können:

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

So funktioniert es unter iOS 10:

Geben Sie hier die Bildbeschreibung ein

Android 3.0+ und Safari unter iOS 10.3 + unterstützen auch das captureAttribut, mit dem direkt zur Kamera gesprungen wird.

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

capture="camera"(String) und accept="image/*;capture=camera"(Parameter) waren Teil alter Spezifikationen und wurden durch ersetztcapture (Boolean) die W3C-Kandidatenempfehlung ersetzt.

Support-Dokumentation: Dieses O'Reilly-Buch 2013 und meine Tests

Octavian Naicu
quelle
Meins auf Android springt direkt zu Auswählen von Fotos, gibt mir aber nicht die Option für Kamera, selbst wenn ich Capture = "Kamera" eingestellt habe .... total festgefahren
Benyaman
@ Benyaman Versuchen Sie es mit capturestatt capture="camera". Neugierig welches Gerät & Android Version.
Octavian Naicu
Ich habe auf Android 5.0 anscheinend keine integrierte HTML-Erfassung in Phonegap. Es kann also keine Dinge erfassen, kein Camrecord, kein Audio, keine Kamera. Ich musste eine Arbeit bauen.
Benyaman
5

Nun, es gibt eine neue HTML5-Funktion für den Zugriff auf die native Gerätekamera - "getUserMedia API".

HINWEIS: HTML5 kann die Fotoaufnahme von einer Webseite auf Android-Geräten verarbeiten (zumindest in den neuesten Versionen, die vom Honeycomb-Betriebssystem ausgeführt werden; auf iPhones außer iOS 6 jedoch nicht).

Louis
quelle
oh sorry ist call setUserMedia API
Louis
4

Sie können WEBRTC verwenden, aber leider wird es nicht von allen Webbrowsern unterstützt. UNTEN IST DER LINK, DER ZEIGT, WAS BROWSERS unterstützt http://caniuse.com/stream

Über diesen Link erhalten Sie eine Vorstellung davon, wie Sie darauf zugreifen können (Beispielcode). http://www.html5rocks.com/de/tutorials/getusermedia/intro/

Michael Sultana
quelle
2
WebRTC und getUserMediaist übertrieben, <input type="file" accept="image/*">wird den Trick machen.
Octavian Naicu
4

Das AppMobi HTML5 SDK versprach einmal den Zugriff auf native Gerätefunktionen - einschließlich der Kamera - über eine HTML5-basierte App, ist jedoch nicht mehr im Besitz von Google. Versuchen Sie stattdessen die HTML5-basierten Antworten in diesem Beitrag .

Dave Everitt
quelle
1
Ich glaube nicht, dass Google Eigentümer von AppMobi oder deren Produkten ist.
fakeguybrushthreepwood
Ah - mein Fehler, weil es im Chrome Web Store ist - Google-Referenz entfernt. Hier sind die wirklichen Partner: appmobi.com/?page_id=468
Dave Everitt
1

Es ist zu beachten, dass Sicherheitsfunktionen implementiert wurden, bei denen die App entweder lokal unter localhost oder über SSL ausgeführt werden muss, damit GetUserMedia () funktioniert.

Ich habe dies entdeckt, als ich einige der verfügbaren Demos ausprobiert habe, und war enttäuscht, als sie nicht funktionierten! Siehe: Neue Sicherheitsbeschränkungen

Anthony Griggs
quelle
0

Ich glaube nicht, dass Sie das können - es gibt einen W3C-API-Entwurf , um Audio oder Video abzurufen, aber es gibt noch keine Implementierung auf einem der großen mobilen Betriebssysteme.

Zweitbeste Die einzige Möglichkeit besteht darin, Dennis 'Vorschlag zu folgen, PhoneGap zu verwenden. Dies bedeutet, dass Sie eine native App erstellen und zum mobilen App Store / Marktplatz hinzufügen müssen.

Kevin
quelle
Entschuldigung für das Umbuchen - ich habe nachgesehen, ob Sie die NPE-Ausnahme mit dem Jersey-Client auf Android umgangen haben. stecken :(
Nekromant
0

Ich kenne keine Möglichkeit, über den Webbrowser über einen Webbrowser auf die Kamera eines Mobiltelefons zuzugreifen (z. B. Flash oder eine Art Container, der den Zugriff auf die Hardware-API ermöglicht).

Für letztere schauen Sie sich PhoneGap an: http://docs.phonegap.com/phonegap_camera_camera.md.html

Damit sollten Sie zumindest auf iOS- und Android-basierten Geräten auf die Kamera zugreifen können.

Dennis Traub
quelle
4
Dazu muss immer noch eine App auf dem mobilen Gerät installiert sein, was das OP meiner Meinung nach vermeiden möchte.
Michael Petrotta
@ MichaelPetrotta kennst du einen besseren Weg?
Dennis Traub
2
Ich glaube nicht, dass das, was das OP verlangt, möglich ist.
Michael Petrotta
@ MichaelPetrotta das denke ich auch. Und der beste Weg, den ich mir vorstellen kann, wäre PhoneGap, da es unter iOS funktioniert (was Flash nicht tut). Es ist zwar nativ, ermöglicht aber zumindest einen plattformübergreifenden Zugriff auf Kameras von einer Webseite aus.
Dennis Traub