2010-09-23 15 views
8

Ich muss ein Bild von einer Webcam (Tethered Kamera, etc.) in ein Formular oder html5 Canvas erfassen, so dass ich das Bild auf dem Server speichern kann. Außerdem würde ich gerne in der Lage sein, das Bild live auf der Seite zu sehen.Capture Bild von der Kamera in Form oder html5 Leinwand

Zum Beispiel habe ich einen Browser bei einer Registrierung einchecken Station ausgeführt. Ich möchte ein Foto des Teilnehmers machen, der gerade vor dem Tisch steht, und dieses Bild in die Datenbank einreichen. Dann kann ich dieses Bild verwenden, um das Abzeichen des Teilnehmers mit seinem Bild darauf zu drucken.

Ich benutze Schienen und Büroklammer, obwohl ich bezweifle, dass das zählt.

Wer hat das schon einmal gemacht, oder haben Sie ein paar Ideen, wie es geht?

+0

Für andere, die von Google kommen werden: Die reine HTML5-Lösung funktioniert jetzt in allen gängigen Browsern. Siehe http://www.html5rocks.com/en/tutorials/getusermedia/intro/. –

+0

@HubertOG http://www.html5rocks.com/de/tutorials/getusermedia/intro/#toc-screenshot funktioniert nicht für mich –

Antwort

9

Es gibt ein Plugin für jQuery namens 'jQuery Webcam Plugin', das eine freundliche und einfache Möglichkeit bietet, mit einer Webcam zu interagieren. Es basiert auf einer kleinen Flash-Komponente (leider), aber es macht eine großartige Arbeit, um die Interaktion einfach zu machen - und bietet auch Funktionen zum Kopieren von Bildern direkt in einen HTML5-Canvas.

Wieder ist es bedauerlich, dass es auf Flash beruht, aber ich denke, dass jede zuverlässige Lösung zu diesem Zeitpunkt Flash benötigen wird.

Das Plugin ist hier verfügbar: http://www.xarg.org/project/jquery-webcam-plugin/

+0

Ausgezeichnete Lösung. Einverstanden, dass der Flash Req ein notwendiges Übel ist. – Karl

3

Derzeit, wenn Sie mit einer Web-Cam von einer Webseite interagieren wollen, müssen Sie mit einem Plug-in zu betrachten. Flash hat eine ausgereifte Schnittstelle zu Webcams, so dass es meine erste Wahl von Werkzeug wäre.

Früher gab es eine Spezifikation für native Webcam-Unterstützung in HTML 5, aber es wurde in its own, independent, specification ausgegliedert. Derzeit there is no browser support dafür außerhalb von experimental Opera builds.

+0

leider stimme ich zu, dass Flash hier die beste Wahl ist. – Peter

+0

Jetzt unterstützt Chrome 18+ dies. Siehe Beispiel in www.html5rocks.com – Spiff

1

Android> = 3,0 (auf vielen Tabletten und ein Telefon in Kürze) soll dies unterstützen. Wenn Sie nach "html media capture" und "device api" suchen, erhalten Sie viel mehr Informationen.

Auf der nicht-even-alpha blutenden Seite gibt es Dinge wie webrtc und das mozilla regenbogen Plugin.