Machen Sie ein Bild von html5

Question

Ich lese viele Möglichkeiten, um ein Bild von einer html5 Seite zu erhalten. Ich bin immer noch nicht sicher, was ist das Beste für meine Bedürfnisse:

• breite Unterstützung für Browser und Betriebssystem: mindestens: Chrome, Firefox, android Standard, Safari
• ich Echtzeiterfassung nicht brauchen. Der Benutzer muss eine Taste drücken, um ein Bild aufzunehmen, Anwendung der Systemkamera anfordernden

Es gibt mindestens drei Lösungen:

• <input type="file" accept="image/*;capture=camera">
• Navigator.getUserMedia() (es scheint veraltet)
• MediaDevices.getUserMedia() (es scheint experimentell)

Wie auch immer, ich sehe viele Beispiele les, um die Kamera in die Seite (w/ getUserMedia) einzubetten, so weiß ich nicht, ob ich mich nur auf die erste Methode verlassen kann.

Answer 1

die WebRTC getUserMedia-API wird alle modernen Browser außer Safari decken: http://caniuse.com/#feat=stream

Here ist ein Beispiel-Seite, die getUserMedia ein Standbild nehmen verwendet (mit einem Link zu einem page den Code beschreibt). Die meisten getUserMedia-Demos zeigen den Video-Stream in einem sichtbaren Canvas-Bereich, aber das ist nicht erforderlich. Sie können ein Bild mit getUserMedia erfassen, ohne den Videostream in einer sichtbaren Arbeitsfläche anzuzeigen.

Leider war Apple langsam, WebRTC APIs zu adoptieren, also denke ich, dass das Dateieingabetag ungefähr das Beste ist, auf das Sie dort hoffen können, es sei denn Sie sind bereit, etwas wie Cordova zu verwenden. Here ist eine Beschreibung der Verwendung des Dateieingabe-Tags.

Die Media Capture API ist ein Kandidat Empfehlung, was bedeutet, es ist auf dem Weg einen Standard zu werden, aber ich weiß nicht von irgendwelchen Browsern, die die aktuelle W3C-Empfehlung (unter Verwendung eines bloßes Capture-Attributs in dem Input-Tag) implementieren. Der Stil <input type="file" accept="image/*"> wird derzeit anscheinend nur von mobilen Browsern unterstützt.

Zusammenfassend, wenn Sie in naher Zukunft eine breite Browserunterstützung haben möchten, müssen Sie beide Methoden unterstützen, bis Apple WebRTC APIs unterstützt oder bis andere Desktopbrowser die Media Capture API (oder die Variante) unterstützen mit dem Capture-Attribut, das derzeit von mobilen Browsern unterstützt wird).