จดจำจุดสังเกตได้อย่างปลอดภัยด้วย Cloud Vision โดยใช้การตรวจสอบสิทธิ์และฟังก์ชันของ Firebase บน Android

หากต้องการเรียก Google Cloud API จากแอป คุณต้องสร้าง REST API ระดับกลางที่จัดการการให้สิทธิ์และปกป้องค่าลับ เช่น คีย์ API จากนั้นคุณต้อง เขียนโค้ดในแอปบนอุปกรณ์เคลื่อนที่เพื่อตรวจสอบสิทธิ์และสื่อสารกับบริการระดับกลางนี้

วิธีหนึ่งในการสร้าง REST API นี้คือการใช้ Firebase Authentication และ Functions ซึ่งจะให้เกตเวย์แบบไม่มีเซิร์ฟเวอร์ที่จัดการได้ไปยัง Google Cloud API ที่จัดการการตรวจสอบสิทธิ์และสามารถเรียกใช้จากแอปบนอุปกรณ์เคลื่อนที่ด้วย SDK ที่สร้างไว้ล่วงหน้า

คู่มือนี้แสดงวิธีใช้เทคนิคนี้เพื่อเรียก Cloud Vision API จากแอป วิธีนี้จะช่วยให้ผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์ทั้งหมดเข้าถึงบริการที่มีการเรียกเก็บเงินของ Cloud Vision ผ่านโปรเจ็กต์ Cloud ของคุณได้ ดังนั้น โปรดพิจารณาว่ากลไกการตรวจสอบสิทธิ์นี้เพียงพอสำหรับกรณีการใช้งานของคุณหรือไม่ก่อนดำเนินการต่อ

ก่อนเริ่มต้น

กำหนดค่าโปรเจ็กต์

  1. หากยังไม่ได้เพิ่ม เพิ่ม Firebase ลงในโปรเจ็กต์ Android

  2. หากยังไม่ได้เปิดใช้ Cloud-based API สำหรับโปรเจ็กต์ ให้ทำดังนี้

    1. เปิดหน้า Firebase ML APIs ในคอนโซล Firebase

    2. หากยังไม่ได้อัปเกรดโปรเจ็กต์เป็น แพ็กเกจราคา Blaze แบบจ่ายตามการใช้งาน ให้คลิก อัปเกรด เพื่อดำเนินการ (ระบบจะ แจ้งให้คุณอัปเกรดก็ต่อเมื่อโปรเจ็กต์ไม่ได้ใช้ แพ็กเกจราคา Blaze)

      เฉพาะโปรเจ็กต์ที่ใช้แพ็กเกจราคา Blaze เท่านั้นที่ใช้ Cloud-based API ได้

    3. หากยังไม่ได้เปิดใช้ Cloud-based API ให้คลิก เปิดใช้ Cloud-based API
  3. กำหนดค่าคีย์ API ของ Firebase ที่มีอยู่ไม่ให้เข้าถึง Cloud Vision API:
    1. เปิดหน้า ข้อมูลเข้าสู่ระบบ ของ Cloud Console
    2. สำหรับคีย์ API แต่ละรายการในรายการ ให้เปิดมุมมองการแก้ไข แล้วในส่วนข้อจำกัดคีย์ ให้เพิ่ม API ที่มีทั้งหมด ยกเว้น Cloud Vision API ลงในรายการ

ทำให้ฟังก์ชันที่เรียกใช้ได้ใช้งานได้

จากนั้นทำให้ Cloud Function ที่จะใช้เชื่อมแอปกับ Cloud Vision API ใช้งานได้ ที่เก็บ functions-samples มีตัวอย่าง ที่คุณใช้ได้

โดยค่าเริ่มต้น การเข้าถึง Cloud Vision API ผ่านฟังก์ชันนี้จะอนุญาตให้ เฉพาะผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์ของแอปเข้าถึง Cloud Vision API ได้ คุณสามารถ แก้ไขฟังก์ชันให้ตรงกับข้อกำหนดต่างๆ ได้

วิธีทำให้ฟังก์ชันใช้งานได้

  1. โคลนหรือดาวน์โหลดที่เก็บ functions-samples แล้วเปลี่ยนเป็นไดเรกทอรี Node-1st-gen/vision-annotate-image โดยทำดังนี้ 
    git clone https://github.com/firebase/functions-samples
cd Node-1st-gen/vision-annotate-image
  2. ติดตั้งทรัพยากร Dependency โดยทำดังนี้ 
    cd functions
npm install
cd ..
  3. หากยังไม่มี Firebase CLI ให้ติดตั้ง
  4. เริ่มต้นโปรเจ็กต์ Firebase ในไดเรกทอรี vision-annotate-image โดยทำดังนี้ เมื่อได้รับข้อความแจ้ง ให้เลือกโปรเจ็กต์ในรายการ 
    firebase init
  5. ทำให้ฟังก์ชันใช้งานได้โดยทำดังนี้ 
    firebase deploy --only functions:annotateImage

เพิ่ม Firebase Auth ลงในแอป

ฟังก์ชันที่เรียกใช้ได้ซึ่งทำให้ใช้งานได้ข้างต้นจะปฏิเสธคำขอจากผู้ใช้แอปที่ไม่ได้ผ่านการตรวจสอบสิทธิ์ คุณจะต้องเพิ่ม Firebase Auth ลงในแอปหากยังไม่ได้ดำเนินการ

เพิ่มทรัพยากร Dependency ที่จำเป็นลงในแอป

  • เพิ่มทรัพยากร Dependency สำหรับ Cloud Functions for Firebase (ไคลเอ็นต์) และไลบรารี gson สำหรับ Android ลงใน ไฟล์ Gradle ระดับโมดูล (ระดับแอป) (โดยปกติจะเป็น <project>/<app-module>/build.gradle.kts หรือ <project>/<app-module>/build.gradle) 
    implementation("com.google.firebase:firebase-functions:22.1.1")
implementation("com.google.code.gson:gson:2.8.6")

    • 1. เตรียมรูปภาพอินพุต

    หากต้องการเรียก Cloud Vision รูปภาพต้องจัดรูปแบบเป็นสตริงที่เข้ารหัส Base64 วิธีประมวลผลรูปภาพจาก URI ของไฟล์ที่บันทึกไว้
    1. รับรูปภาพเป็นออบเจ็กต์ Bitmap โดยทำดังนี้

      Kotlin

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

      Java

      Bitmap bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), uri);
    2. เลือกที่จะลดขนาดรูปภาพเพื่อประหยัดแบนด์วิดท์ ดูขนาดรูปภาพที่แนะนำสำหรับ Cloud Vision

      Kotlin

      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

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

      Java

      // Scale down bitmap size
bitmap = scaleBitmapDown(bitmap, 640);
    3. แปลงออบเจ็กต์บิตแมปเป็นสตริงที่เข้ารหัส Base64 โดยทำดังนี้

      Kotlin

      // 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. รูปภาพที่แสดงโดยออบเจ็กต์ Bitmap ต้อง ตั้งตรงและไม่จำเป็นต้องหมุนเพิ่มเติม

    2. เรียกใช้ฟังก์ชันที่เรียกใช้ได้เพื่อจดจำสถานที่สำคัญ

    หากต้องการจดจำสถานที่สำคัญในรูปภาพ ให้เรียกใช้ฟังก์ชันที่เรียกใช้ได้โดยส่งคำขอ Cloud Vision ในรูปแบบ JSON

    1. ขั้นแรก ให้เริ่มต้นอินสแตนซ์ของ Cloud Functions โดยทำดังนี้

      Kotlin 

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

      Java 

      private FirebaseFunctions mFunctions;
// ...
mFunctions = FirebaseFunctions.getInstance();

    2. กำหนดเมธอดสำหรับการเรียกใช้ฟังก์ชันโดยทำดังนี้

      Kotlin 

      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. สร้างคำขอ JSON ที่มี ประเภท LANDMARK_DETECTION โดยทำดังนี้

      Kotlin 

      // 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. สุดท้าย ให้เรียกใช้ฟังก์ชันโดยทำดังนี้

      Kotlin 

      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. ดูข้อมูลเกี่ยวกับสถานที่สำคัญที่จดจำได้

    หากการดำเนินการจดจำสถานที่สำคัญสำเร็จ ระบบจะแสดงผลการตอบกลับ JSON ของ BatchAnnotateImagesResponse ในผลลัพธ์ของงาน แต่ละออบเจ็กต์ในอาร์เรย์ landmarkAnnotations จะแสดงสถานที่สำคัญที่จดจำได้ในรูปภาพ สำหรับสถานที่สำคัญแต่ละแห่ง คุณจะดูพิกัดขอบเขตในรูปภาพอินพุต ชื่อของสถานที่สำคัญ ละติจูดและลองจิจูด รหัสเอนทิตี Knowledge Graph (หากมี) และคะแนนความเชื่อมั่นของการจับคู่ได้ เช่น

    Kotlin 

    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();
    }
}