Erkennen Sie Sehenswürdigkeiten sicher mit Cloud Vision und Firebase Auth and Functions auf Android

Um eine Google Cloud API von Ihrer App aus aufzurufen, müssen Sie eine zwischengeschaltete REST-API erstellen, die die Autorisierung übernimmt und geheime Werte wie API-Schlüssel schützt. Anschließend müssen Sie Code in Ihre mobile App schreiben, um sich bei diesem Zwischendienst zu authentifizieren und mit ihm zu kommunizieren.

Eine Möglichkeit, diese REST-API zu erstellen, ist die Verwendung von Firebase Authentication and Functions. Damit erhalten Sie ein verwaltetes, serverloses Gateway zu Google Cloud-APIs, das die Authentifizierung übernimmt und mit vorgefertigten SDKs von Ihrer mobilen App aus aufgerufen werden kann.

In dieser Anleitung wird gezeigt, wie Sie mit dieser Technik die Cloud Vision API aus Ihrer App aufrufen. Mit dieser Methode können alle authentifizierten Benutzer über Ihr Cloud-Projekt auf die abgerechneten Cloud Vision-Dienste zugreifen. Überlegen Sie daher, ob dieser Authentifizierungsmechanismus für Ihren Anwendungsfall ausreichend ist, bevor Sie fortfahren.

Bevor Sie beginnen

Konfigurieren Sie Ihr Projekt

  1. Falls noch nicht geschehen, fügen Sie Firebase zu Ihrem Android-Projekt hinzu .
  2. Wenn Sie cloudbasierte APIs für Ihr Projekt noch nicht aktiviert haben, tun Sie dies jetzt:

    1. Öffnen Sie die Seite „Firebase ML APIs“ der Firebase-Konsole.
    2. Wenn Sie Ihr Projekt noch nicht auf den Blaze-Preisplan aktualisiert haben, klicken Sie dazu auf „Upgrade“ . (Sie werden nur dann zum Upgrade aufgefordert, wenn Ihr Projekt nicht im Blaze-Plan enthalten ist.)

      Nur Projekte auf Blaze-Ebene können cloudbasierte APIs verwenden.

    3. Wenn Cloud-basierte APIs noch nicht aktiviert sind, klicken Sie auf Cloud-basierte APIs aktivieren .
  3. Konfigurieren Sie Ihre vorhandenen Firebase-API-Schlüssel, um den Zugriff auf die Cloud Vision API zu verhindern:
    1. Öffnen Sie die Seite „Anmeldeinformationen“ der Cloud-Konsole.
    2. Öffnen Sie für jeden API-Schlüssel in der Liste die Bearbeitungsansicht und fügen Sie im Abschnitt „Schlüsseleinschränkungen“ alle verfügbaren APIs außer der Cloud Vision-API zur Liste hinzu.

Stellen Sie die aufrufbare Funktion bereit

Stellen Sie als Nächstes die Cloud-Funktion bereit, die Sie zum Überbrücken Ihrer App und der Cloud Vision-API verwenden möchten. Das Repository functions-samples enthält ein Beispiel, das Sie verwenden können.

Standardmäßig ermöglicht der Zugriff auf die Cloud Vision API über diese Funktion nur authentifizierten Benutzern Ihrer App Zugriff auf die Cloud Vision API. Sie können die Funktion an unterschiedliche Anforderungen anpassen.

So stellen Sie die Funktion bereit:

  1. Klonen Sie das Repo „functions-samples“ oder laden Sie es herunter und wechseln Sie in das Verzeichnis Node-1st-gen/vision-annotate-image :
    git clone https://github.com/firebase/functions-samples
    cd Node-1st-gen/vision-annotate-image
    
  2. Abhängigkeiten installieren:
    cd functions
    npm install
    cd ..
    
  3. Wenn Sie nicht über die Firebase-CLI verfügen, installieren Sie sie .
  4. Initialisieren Sie ein Firebase-Projekt im Verzeichnis vision-annotate-image . Wenn Sie dazu aufgefordert werden, wählen Sie Ihr Projekt in der Liste aus.
    firebase init
  5. Stellen Sie die Funktion bereit:
    firebase deploy --only functions:annotateImage

Fügen Sie Firebase Auth zu Ihrer App hinzu

Die oben bereitgestellte aufrufbare Funktion lehnt jede Anfrage von nicht authentifizierten Benutzern Ihrer App ab. Falls Sie dies noch nicht getan haben, müssen Sie Firebase Auth zu Ihrer App hinzufügen.

Fügen Sie Ihrer App die erforderlichen Abhängigkeiten hinzu

  • Fügen Sie die Abhängigkeiten für die Cloud Functions for Firebase- (Client) und gson Android-Bibliotheken zu Ihrer Modul-Gradle-Datei (auf App-Ebene) hinzu (normalerweise <project>/<app-module>/build.gradle.kts oder <project>/<app-module>/build.gradle ):
    implementation("com.google.firebase:firebase-functions:20.4.0")
    implementation("com.google.code.gson:gson:2.8.6")
  • 1. Bereiten Sie das Eingabebild vor

    Um Cloud Vision aufzurufen, muss das Bild als Base64-codierte Zeichenfolge formatiert werden. So verarbeiten Sie ein Bild aus einem gespeicherten Datei-URI:
    1. Holen Sie sich das Bild als Bitmap Objekt:

      Kotlin+KTX

      var bitmap: Bitmap = MediaStore.Images.Media.getBitmap(contentResolver, uri)
      

      Java

      Bitmap bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), uri);
    2. Optional können Sie das Bild verkleinern, um Bandbreite zu sparen. Sehen Sie sich die von Cloud Vision empfohlenen Bildgrößen an.

      Kotlin+KTX

      private fun scaleBitmapDown(bitmap: Bitmap, maxDimension: Int): Bitmap {
          val originalWidth = bitmap.width
          val originalHeight = bitmap.height
          var resizedWidth = maxDimension
          var resizedHeight = maxDimension
          if (originalHeight > originalWidth) {
              resizedHeight = maxDimension
              resizedWidth =
                  (resizedHeight * originalWidth.toFloat() / originalHeight.toFloat()).toInt()
          } else if (originalWidth > originalHeight) {
              resizedWidth = maxDimension
              resizedHeight =
                  (resizedWidth * originalHeight.toFloat() / originalWidth.toFloat()).toInt()
          } else if (originalHeight == originalWidth) {
              resizedHeight = maxDimension
              resizedWidth = maxDimension
          }
          return Bitmap.createScaledBitmap(bitmap, resizedWidth, resizedHeight, false)
      }

      Java

      private Bitmap scaleBitmapDown(Bitmap bitmap, int maxDimension) {
          int originalWidth = bitmap.getWidth();
          int originalHeight = bitmap.getHeight();
          int resizedWidth = maxDimension;
          int resizedHeight = maxDimension;
      
          if (originalHeight > originalWidth) {
              resizedHeight = maxDimension;
              resizedWidth = (int) (resizedHeight * (float) originalWidth / (float) originalHeight);
          } else if (originalWidth > originalHeight) {
              resizedWidth = maxDimension;
              resizedHeight = (int) (resizedWidth * (float) originalHeight / (float) originalWidth);
          } else if (originalHeight == originalWidth) {
              resizedHeight = maxDimension;
              resizedWidth = maxDimension;
          }
          return Bitmap.createScaledBitmap(bitmap, resizedWidth, resizedHeight, false);
      }

      Kotlin+KTX

      // Scale down bitmap size
      bitmap = scaleBitmapDown(bitmap, 640)

      Java

      // Scale down bitmap size
      bitmap = scaleBitmapDown(bitmap, 640);
    3. Konvertieren Sie das Bitmap-Objekt in eine Base64-codierte Zeichenfolge:

      Kotlin+KTX

      // Convert bitmap to base64 encoded string
      val byteArrayOutputStream = ByteArrayOutputStream()
      bitmap.compress(Bitmap.CompressFormat.JPEG, 100, byteArrayOutputStream)
      val imageBytes: ByteArray = byteArrayOutputStream.toByteArray()
      val base64encoded = Base64.encodeToString(imageBytes, Base64.NO_WRAP)

      Java

      // Convert bitmap to base64 encoded string
      ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
      bitmap.compress(Bitmap.CompressFormat.JPEG, 100, byteArrayOutputStream);
      byte[] imageBytes = byteArrayOutputStream.toByteArray();
      String base64encoded = Base64.encodeToString(imageBytes, Base64.NO_WRAP);
    4. Das durch das Bitmap Objekt dargestellte Bild muss aufrecht stehen, ohne dass eine zusätzliche Drehung erforderlich ist.

    2. Rufen Sie die aufrufbare Funktion auf, um Orientierungspunkte zu erkennen

    Um Orientierungspunkte in einem Bild zu erkennen, rufen Sie die aufrufbare Funktion auf und übergeben Sie eine JSON Cloud Vision-Anfrage .

    1. Initialisieren Sie zunächst eine Instanz von Cloud Functions:

      Kotlin+KTX

      private lateinit var functions: FirebaseFunctions
      // ...
      functions = Firebase.functions
      

      Java

      private FirebaseFunctions mFunctions;
      // ...
      mFunctions = FirebaseFunctions.getInstance();
      
    2. Definieren Sie eine Methode zum Aufrufen der Funktion:

      Kotlin+KTX

      private fun annotateImage(requestJson: String): Task<JsonElement> {
          return functions
              .getHttpsCallable("annotateImage")
              .call(requestJson)
              .continueWith { task ->
                  // This continuation runs on either success or failure, but if the task
                  // has failed then result will throw an Exception which will be
                  // propagated down.
                  val result = task.result?.data
                  JsonParser.parseString(Gson().toJson(result))
              }
      }
      

      Java

      private Task<JsonElement> annotateImage(String requestJson) {
          return mFunctions
                  .getHttpsCallable("annotateImage")
                  .call(requestJson)
                  .continueWith(new Continuation<HttpsCallableResult, JsonElement>() {
                      @Override
                      public JsonElement then(@NonNull Task<HttpsCallableResult> task) {
                          // This continuation runs on either success or failure, but if the task
                          // has failed then getResult() will throw an Exception which will be
                          // propagated down.
                          return JsonParser.parseString(new Gson().toJson(task.getResult().getData()));
                      }
                  });
      }
      
    3. Erstellen Sie eine JSON-Anfrage mit dem Typ LANDMARK_DETECTION :

      Kotlin+KTX

      // Create json request to cloud vision
      val request = JsonObject()
      // Add image to request
      val image = JsonObject()
      image.add("content", JsonPrimitive(base64encoded))
      request.add("image", image)
      // Add features to the request
      val feature = JsonObject()
      feature.add("maxResults", JsonPrimitive(5))
      feature.add("type", JsonPrimitive("LANDMARK_DETECTION"))
      val features = JsonArray()
      features.add(feature)
      request.add("features", features)
      

      Java

      // Create json request to cloud vision
      JsonObject request = new JsonObject();
      // Add image to request
      JsonObject image = new JsonObject();
      image.add("content", new JsonPrimitive(base64encoded));
      request.add("image", image);
      //Add features to the request
      JsonObject feature = new JsonObject();
      feature.add("maxResults", new JsonPrimitive(5));
      feature.add("type", new JsonPrimitive("LANDMARK_DETECTION"));
      JsonArray features = new JsonArray();
      features.add(feature);
      request.add("features", features);
      
    4. Rufen Sie abschließend die Funktion auf:

      Kotlin+KTX

      annotateImage(request.toString())
          .addOnCompleteListener { task ->
              if (!task.isSuccessful) {
                  // Task failed with an exception
                  // ...
              } else {
                  // Task completed successfully
                  // ...
              }
          }
      

      Java

      annotateImage(request.toString())
              .addOnCompleteListener(new OnCompleteListener<JsonElement>() {
                  @Override
                  public void onComplete(@NonNull Task<JsonElement> task) {
                      if (!task.isSuccessful()) {
                          // Task failed with an exception
                          // ...
                      } else {
                          // Task completed successfully
                          // ...
                      }
                  }
              });
      

    3. Informieren Sie sich über die erkannten Sehenswürdigkeiten

    Wenn die Landmarkenerkennung erfolgreich ist, wird im Ergebnis der Aufgabe eine JSON-Antwort von BatchAnnotateImagesResponse zurückgegeben. Jedes Objekt im landmarkAnnotations Array stellt einen Orientierungspunkt dar, der im Bild erkannt wurde. Für jeden Orientierungspunkt können Sie seine Begrenzungskoordinaten im Eingabebild, den Namen des Orientierungspunkts, seinen Breiten- und Längengrad, seine Knowledge Graph-Entitäts-ID (falls verfügbar) und den Konfidenzwert der Übereinstimmung abrufen. Zum Beispiel:

    Kotlin+KTX

    for (label in task.result!!.asJsonArray[0].asJsonObject["landmarkAnnotations"].asJsonArray) {
        val labelObj = label.asJsonObject
        val landmarkName = labelObj["description"]
        val entityId = labelObj["mid"]
        val score = labelObj["score"]
        val bounds = labelObj["boundingPoly"]
        // Multiple locations are possible, e.g., the location of the depicted
        // landmark and the location the picture was taken.
        for (loc in labelObj["locations"].asJsonArray) {
            val latitude = loc.asJsonObject["latLng"].asJsonObject["latitude"]
            val longitude = loc.asJsonObject["latLng"].asJsonObject["longitude"]
        }
    }
    

    Java

    for (JsonElement label : task.getResult().getAsJsonArray().get(0).getAsJsonObject().get("landmarkAnnotations").getAsJsonArray()) {
        JsonObject labelObj = label.getAsJsonObject();
        String landmarkName = labelObj.get("description").getAsString();
        String entityId = labelObj.get("mid").getAsString();
        float score = labelObj.get("score").getAsFloat();
        JsonObject bounds = labelObj.get("boundingPoly").getAsJsonObject();
        // Multiple locations are possible, e.g., the location of the depicted
        // landmark and the location the picture was taken.
        for (JsonElement loc : labelObj.get("locations").getAsJsonArray()) {
            JsonObject latLng = loc.getAsJsonObject().get("latLng").getAsJsonObject();
            double latitude = latLng.get("latitude").getAsDouble();
            double longitude = latLng.get("longitude").getAsDouble();
        }
    }