it-swarm.com.de

Wie greife ich über eine Web-App auf die Kamera eines Mobiltelefons zu?

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

172
夏期劇場

In iPhone iOS6 und ab Android ICS=) hat HTML5 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 aufnehmen.

Ich denke, dieses Tag wird definitiv nicht unter iOS5 funktionieren, da bin ich mir nicht sicher.

236
Ashish

Zumindest heutzutage mit Android) ist es relativ einfach. Verwenden Sie einfach das normale Dateieingabe-Tag, und wenn der Benutzer darauf klickt, fragt das Telefon, ob der Benutzer eine Kamera (oder Dateimanager usw.) zum Hochladen verwenden möchte Nehmen Sie einfach ein Foto mit der Kamera auf und es wird automatisch hinzugefügt und hochgeladen.

Keine Ahnung über das iPhone. Vielleicht kann jemand das klären. EDIT: Iphone funktioniert ähnlich.

Beispiel für das Eingabe-Tag:

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

Safari & Chrome unter iOS 6+ und Android 2.2+ unterstützt 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:

enter image description here

Android 3.0+ und Safari unter iOS 10.3+ unterstützen auch das capture -Attribut, mit dem Sie direkt zur Kamera springen können.

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

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

Unterstützungsdokumentation: dieses 2013 O'Reilly Buch und meine Prüfung

20
Octavian Naicu

Um dies zu aktualisieren, lautet der Standard jetzt:

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

zugriff auf die der Umgebung zugewandte (hintere) Kamera und

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

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

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

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

17
user3204365

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

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

5
Louis

AppMobi HTML5 SDK versprach einst 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 .

4
Dave Everitt

Sie können WEBRTC verwenden, es wird jedoch leider nicht von allen Webbrowsern unterstützt. UNTEN IS DER LINK ZU DEN BROWSERN, die das unterstützen http://caniuse.com/stream

Und dieser Link gibt Ihnen eine Vorstellung davon, wie Sie darauf zugreifen können (Beispielcode). http://www.html5rocks.com/de/tutorials/getusermedia/intro/

4
Michael Sultana

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 entdeckte dies, als ich einige der verfügbaren Demos ausprobierte und war enttäuscht, als sie nicht funktionierten! Siehe: Neue Sicherheitsbeschränkungen

1
Anthony Griggs

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

Dieses Tutorial beschreibt die Grundlagen für den Zugriff 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.

0
Aaron Benjamin

Ich kenne keine Möglichkeit, über den Webbrowser auf die Kamera eines Mobiltelefons zuzugreifen, ohne dass ein zusätzlicher Mechanismus erforderlich ist (z. B. Flash oder ein 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.

0
Dennis Traub

Ich glaube nicht, dass Sie das können - es gibt ein W3C Draft API , um Audio oder Video abzurufen, aber es gibt noch keine Implementierung auf einem der wichtigsten mobilen Betriebssysteme.

Zweitbester Die einzige Möglichkeit ist, Dennis 'Vorschlag zu folgen, PhoneGap zu verwenden. Dies bedeutet, dass Sie eine native App erstellen und zum Store/Marktplatz für mobile Apps hinzufügen müssen.

0
Kevin