Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Mobile Apps mit Cordova

Kamerafunktionen nutzen

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Über ein eigenes Plug-in steht das camera-Objekt von Cordova zur Verfügung. Damit greifen Sie auf die Funktionen der Standardkamera eines mobilen Geräts zu und können Bilder oder Videos aufnehmen und im Photoalbum speichern.
09:33

Transkript

Sie sehen in diesem Video den Zugriff auf die Kamera eines Smartphones über ein passendes Plugin. Ich habe hier eine App vorbereitet, und in einen Emulator geladen, womit wir auf die Kamera zugreifen können, natürlich nur die simulierte Kamera von diesem Emulator. Aber grundsätzlich haben Sie hier die Möglichkeit, auf den Button hier zu klicken: Foto aufnehmen. Und dann wird die Simulation der Kamera im Emulator geladen. Das wäre sozusagen die reale Kamera in Ihrem Smartphone. Ich klicke hier irgendwo hin und ich habe das Bild jetzt geschossen. Ich kann entweder ein Bild verwerfen und wieder neu aufnehmen, mit "retake", zumindestens hier sieht es so im Emulator "retake" aus, in anderen Geräten wird das anders beschriftet, oder ich kann es akzeptieren. Und hier sehen Sie in einer Vorschau jetzt das Bild, das ich dort aufgenommen habe. Ich kann ein Foto auch wieder löschen und kann jetzt mal ein weiteres Foto aufnehmen. Ich kann das Foto auch speichern und dann noch ein weiteres Foto aufnehmen, auch akzeptieren, Foto wieder speichern. Wenn ich jetzt diese App beende, dann fügen sich hier die aufgenommenen Fotos in meinem Speicher, also alle die, die ich gespeichert habe. Das ist die Grundfunktionalität von dieser App: Man benutzt die interne Kamera App eines mobilen Geräts und steuert aber, was man tun möchte, über eine darauf aufbauende App, die mit Cordova programmiert wurde. Die Basis von dieser Funktionalität ist das Plugin "camera". Sie müssen dieses wieder einem Projekt hinzufügen und in der Regel wird man dann auch Dialoge noch haben, also sollten Sie auch noch "dialogs" hinzufügen, also Alles, was Sie sonst noch so brauchen, um etwas Vernüftiges um diese Kamera Application herumzubauen. Es gibt nun eine Mehtode: "getPicture", über die man ein Bild aufnehmen kann. Und es gibt hier ein Callback, für den Erfolg, für den Fehler und Sie können Optionen angeben; die klassische Struktur, die man in Cordova immer wieder sieht. Die Optionen sind sehr umfangreich und nicht ganz trivial, aber so grundsätzlich sehen Sie hier, wie das funktioniert. Man ruft "getPicture" auf, gibt hier zum Beispiel eine gewisse Qualität vor, "destinationType", also von wo man das Bild aufnimmt. Stellen Sie sich vor, Sie haben zwei Kameras an Ihrem Smartphone eine vorne, eine hinten. Könnte da zum Beispiel eine Rolle spielen. Oder Sie können auch von anderen Quellen aufnehmen. Das ist der Erfolgs-Callback. Der hat einen Standardparameter, "imageData" und das ist das aufgenommene Bild. Der Fehler-Callback hat eine Standard- Fehlermeldung, die kann man ausgeben. In der Regel wird das dem Anwender aber nicht so wichtig sein. Man sagt einfach "Fehler" oder so irgendetwas. Hier sehen Sie die Möglichkeit, im JSON-Format diese ganzen Optionen vorzugeben. Und in der Dokumentation sind die verschiedenen Optionen beschrieben. Die Qualität des Bildes, "destinationType", also woher, wie gesagt, das Bild aufgenommen wird. Man kann auch einen URI angeben, das heißt irgendeine Inernetquelle. Oder noch besser: Irgendetwas auf dem mobilen Gerät selbst, irgendein Pfad. Man kann angeben, ob das Bild editiert werden kann, was ist das für ein Typ, also JPEG oder PNG oder so irgendetwas. Was ist das für ein Media Type? Normalerweise wird man ein Bild aufnehmen, aber man kann natürlich auch ein Video aufnehmen. Man kann angeben, ob das Bild gespeichert werden soll im Album. Das haben wir ja gerade gesehen. Die Ausrichtung der Kamera. Gerade der Zugriff auf die Kamera ist teils sehr stark abhängig vom zugrundeliegenden Betriebssystem, aber auch vom konkreten Gerät selbst. Da müssen Sie wirklich genau schauen, was funktioniert, was funktioniert nicht. Da gibt es die entsprechenden Hinweise auch, diese Quarx Angaben. Die Grundfunktionalität ist aber bei allen Plattformen vorhanden und hier sehen Sie jetzt meinen Quellcode, wie ich das gemacht habe. Ich habe in der Webseite, wo wir üblicher Weise unsere Apps unterbringen, in der Standardschablone, eine Überschrift untergebracht und drei Buttons. Diese drei Buttons sollen die verschiedenen Aktionen auslösen, also Foto aufnehmen, Foto löschen, Foto speichern. Die haben dazu spezifische IDs. Dann noch ein Meldungsbereich, wo ich etwas anzeigen kann, Fehler beispielsweise. Und das ist hier ein Bild, das wird mit einem Bild aus dem Image, aus dem IMG Ordner vorbelegt und das wird dann später gefüllt, sobald ich ein Bild aufgenommen habe. Das is meine HTML-Datei. In der CSS-Datei habe ich ein paar Er- weiterungen vorgenommen, insbesondere habe ich für die Buttons und für das Bild und die Überschrift gewisse Formatierungen vorgenommen, aber die sind nebensächlich in diesem Fall. Die Erweiterung in der generierten Standard-Javascript-Datei besteht darin, dass ich hier eine Funktion "init" aufrufe. Dort werde ich die Event Handlers registrieren für die Buttons und ähnliche Dinge. Die eigentliche Arbeit findet in dieser Javascript-Datei statt. Und hier haben Sie diese Funktion "init". Dort sehen Sie, dass ich bei dem Button "aufnahme", also mit der ID "aufnahme" einen Event Handler registriere, bei dem mit der ID "loeschen" und mit der ID "speichern". Wenn ich auf den Button für die Aufnahme klicke, wird eben diese Methode "getPicture" aufgerufen. Und ich gebe zwei Optionen vor: die Qualität für die Aufnahme und den "destinationType". Das hier ist der Erfolgs-Callback, das ist der Fehler-Callback. Ich habe hier nur einen Fehler-Callback, standardisiert hier für alle Fälle. Der ist hier unten zu finden. Aber, da ich einmal aufhnehme und auch andere Aktionen mache, habe ich verschiedene Erfolgs-Callbacks hier. Beim Löschen wird nicht viel gemacht, da wird schlicht und einfach die Bildanzeige gelöscht. Aber beim Speichern nehme ich wieder die Methode "getPicture", habe aber einen alternativen Erfolgs-Callback und vor Allem die Optionen sind interessant. Ich habe einen ganz anderen "destinationType", nämlich "FILE_URI" und ich habe die Option "saveToPhotoAlbum", auf "true" gesetzt. Dadurch wird das jetzt eben in meinem Fotoalbum gespeichert, das Bild. Callback 1, das ist der, wo ich einfach ein Bild aufgenommen habe. Der legt die Source Eigenschaft von dem HTML-Element fest. Beachten Sie, dass Sie hier vorne diese "mime type"-Angabe brauchen, dass das ein Bild ist. Und das sind die aufgenommenen Daten, die von der Kamera selbst kommen. Ich mache Display-Blog, das heißt, ich zeige das Ding an und zeige eine Meldung an. Und wenn ich die Daten gespeichert habe, die Bilder, oder das Bild genauer genommen, dann zeige ich nur eine Meldung an, dass die Aufnahme erfolgreich gespeichert wurde. Und das ist der Fehler-Callback. In jedem Fehlerfall wird dann einfach angezeigt, was schief gelaufen ist. Sie haben also in diesem Video gesehen, dass es nicht ganz so trivial ist, auf die Kamera zuzugreifen, weil man doch einige Optionen angeben muss. Der Code wird etwas länglich, aber grundsätzlich ist es mit Cordova möglich, über das Plugin, das Kamera Plugin auch Bilder aufzunehmen, und dann bei Bedarf auch zu speichern oder hier einfach irgendwie anzuzeigen und andere Dinge dann damit zu machen, im Rahmen Ihrer App.

Mobile Apps mit Cordova

Schreiben Sie mit Cordova mobile Apps, die nicht nur auf einer bestimmten mobilen Plattform laufen, sondern in verschiedenen Umgebungen.

3 Std. 58 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!