Ionic – Kamera des Smartphones nutzen

Nach dem Setup letzte Woche kann ich nun versuchen ein Plugin von Cordova einzubauen, um auf die nativen Funktionen eines Smartphones zuzugreifen. Den ersten Versuch starte ich an der Kamera, mit welcher man innerhalb der App ein Foto schießen können soll.

pfeildings

Cordova bietet die wichtigsten Plugins, wie das Kamera Plugin, selbst an. Diese sind auf dieser Seite unten zu finden. Darüber hinaus kann jeder auch selbst Plugins entwickeln. Für speziellere Wünsche lohnt sich ein Blick in das Cordova Plugin Registry. Ein Beispiel wäre hier ein Barcode Scanner. 

Minimales Setup

Stelle sicher, dass du alle Schritte im letzten Post abgeschlossen hast. Cordova, Java, eine Plattform wie Anroid müssen installiert sein und dann kann’s losgehen.

  1. Installieren: Zuerst wird das gewünschte Plugin mit einem Befehl ganz leicht installiert: 
    ionic plugin add cordova-plugin-camera

    Im Internet findet sich auch ein ähnlicher Befehl mit Punkten, doch der scheint veraltet sein. Also aufpassen.

  2. Einbinden: Zuerst binde ich den Cordova Service in meiner App ein: 
    angular.module('starter', ['ionic', 'ngCordova'])

    Check auch noch einmal ob dieses in der index.html eingebunden ist. Sollte so aussehen: 

    <!-- cordova script (this will be a 404 during development) -->
    <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>
  3. Camera Controller: Endlich mal ein bisschen Code! Irgendwo in einer der ion-view tags braucht es jetzt einen Controller, mit dem wir arbeiten können. Da ich als Starter das tabs-Layout gewählt habe, nenne ich einen davon einfach um. Es sollte dann irgendwie so aussehen: 
    <ion-view view-title="Camera">
      <ion-content ng-controller="CameraCtrl">
    
      </ion-content>
    </ion-view>

    Falls du auch einen Tab umbenennst, musst du das natürlich auch in der tabs.html und in der app.js machen. Dieser Controller braucht nun den Camera Service, der oben mit $cordovaCamera eingebunden wird: 

    .controller('CameraCtrl', function($scope, $cordovaCamera) {
    
    });
    

    Der Controller muss jetzt noch befüllt werden: 

    .controller('CameraCtrl', function($scope, $cordovaCamera) {
        $scope.takePicture = function() {
            var options = {
                quality: 80,
                destinationType: Camera.DestinationType.DATA_URL,
                sourceType: Camera.PictureSourceType.CAMERA,
                allowEdit: true,
                encodingType: Camera.EncodingType.JPEG,
                targetWidth: 250,
                targetHeight: 250,
                popoverOptions: CameraPopoverOptions,
                saveToPhotoAlbum: false
            };
    
            $cordovaCamera.getPicture(options).then(function(imageData) {
                $scope.srcImage = "data:image/jpeg;base64," + imageData;
            }, function(err) {
                // error
            });
        }
    });

    Die erste Funktion takePicture werden wir gleich mit einem Button triggern. Diese wird eine ganze Reihe von Optionen initialisieren, mit welchen dann die Kamera geöffnet werden kann. Normalerweise will man ein aufgenommenes Bild dann als Datei speichern, doch in dem minimalen Beispiel wird das Bild als Base64 String zurückgegeben, welches wir im letzten Schritt auf der Seite anzeigen werden. Mehr Informationen gibt es hier.

  4. View erstellen: Für dieses kleine Beispiel braucht es lediglich einen Button und einen Platzhalter um das aufgenommene Bild anzuzeigen:
    <ion-view view-title="Camera">
      <ion-content ng-controller="CameraCtrl">
    
        <img ng-src="{{srcImage || 'img/placeholder.png'}}" id="srcImage" width="250 " height="250" style="display: block; margin: 0 auto;"/><br/>
        <button class="button button-assertive " ng-click="takePicture() ">Bild machen</button><br/>
    
      </ion-content>
    </ion-view>

     

  5. Fertig! App generieren und ansehen: Alles was mit Cordova Apps zu tun hat, lässt sich nicht einfach im Browser testen. Es muss erst ein Build generiert werden. Interessant ist, dass man neben Android usw. auch eine Browser Plattform hinzufügen kann. In diesem Build fragt der Browser dann nach einem Zugriff auf die Webcam. Doch hier geht es nun um die Android Version:
    ionic build android
    #ionic build browser gibt es auch

     

Screenshot_2016-11-09-14-50-55 Screenshot_2016-11-09-14-52-05

 

 

pfeildings

Fett. Links habe ich noch ein Platzhalterbild eingefügt. Rechts ist das fertige Bild. Dazwischen wird fullscreen die Kamera geöffnet. Vom Bild her könnte man meinen, die Kamera wäre live in der App, doch das ist nicht so. Dafür gibt es ein anderes Plugin.

pfeildings

Das soll mir für diese Woche reichen, ich hoffe es klappt auch bei dir uuuund bis bald!

*zieht Hose an*