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

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:

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

3

Sie möchten getUserMedia verwenden, um auf die Kamera zuzugreifen.

Dieses Tutorial beschreibt die Grundlagen des Zugriffs auf eine Gerätekamera über den Browser: https://medium.com/@aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf

Hinweis: Dies funktioniert auf den meisten Android-Geräten und unter iOS nur in Safari.

— Aaron Benjamin
quelle

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