Mengenali teks dalam gambar dengan ML Kit di iOS

Anda dapat menggunakan ML Kit untuk mengenali teks dalam gambar atau video, seperti teks rambu jalan. Karakteristik utama dari fitur ini adalah:

Cobalah

• Cobalah aplikasi contoh untuk melihat contoh penggunaan API ini.
• Coba kode sendiri dengan codelab ini.

Sebelum memulai

1. Sertakan pod ML Kit berikut di Podfile Anda:

   # To recognize Latin script
   pod 'GoogleMLKit/TextRecognition', '3.2.0'
   # To recognize Chinese script
   pod 'GoogleMLKit/TextRecognitionChinese', '3.2.0'
   # To recognize Devanagari script
   pod 'GoogleMLKit/TextRecognitionDevanagari', '3.2.0'
   # To recognize Japanese script
   pod 'GoogleMLKit/TextRecognitionJapanese', '3.2.0'
   # To recognize Korean script
   pod 'GoogleMLKit/TextRecognitionKorean', '3.2.0'
   

2. Setelah Anda menginstal atau mengupdate Pod project, buka project Xcode menggunakan .xcworkspace. ML Kit didukung di Xcode versi 12.4 atau yang lebih baru.

1. Membuat instance TextRecognizer

// When using Latin script recognition SDK
let latinOptions = TextRecognizerOptions()
let latinTextRecognizer = TextRecognizer.textRecognizer(options:options)

// When using Chinese script recognition SDK
let chineseOptions = ChineseTextRecognizerOptions()
let chineseTextRecognizer = TextRecognizer.textRecognizer(options:options)

// When using Devanagari script recognition SDK
let devanagariOptions = DevanagariTextRecognizerOptions()
let devanagariTextRecognizer = TextRecognizer.textRecognizer(options:options)

// When using Japanese script recognition SDK
let japaneseOptions = JapaneseTextRecognizerOptions()
let japaneseTextRecognizer = TextRecognizer.textRecognizer(options:options)

// When using Korean script recognition SDK
let koreanOptions = KoreanTextRecognizerOptions()
let koreanTextRecognizer = TextRecognizer.textRecognizer(options:options)

// When using Latin script recognition SDK
MLKTextRecognizerOptions *latinOptions = [[MLKTextRecognizerOptions alloc] init];
MLKTextRecognizer *latinTextRecognizer = [MLKTextRecognizer textRecognizerWithOptions:options];

// When using Chinese script recognition SDK
MLKChineseTextRecognizerOptions *chineseOptions = [[MLKChineseTextRecognizerOptions alloc] init];
MLKTextRecognizer *chineseTextRecognizer = [MLKTextRecognizer textRecognizerWithOptions:options];

// When using Devanagari script recognition SDK
MLKDevanagariTextRecognizerOptions *devanagariOptions = [[MLKDevanagariTextRecognizerOptions alloc] init];
MLKTextRecognizer *devanagariTextRecognizer = [MLKTextRecognizer textRecognizerWithOptions:options];

// When using Japanese script recognition SDK
MLKJapaneseTextRecognizerOptions *japaneseOptions = [[MLKJapaneseTextRecognizerOptions alloc] init];
MLKTextRecognizer *japaneseTextRecognizer = [MLKTextRecognizer textRecognizerWithOptions:options];

// When using Korean script recognition SDK
MLKKoreanTextRecognizerOptions *koreanOptions = [[MLKKoreanTextRecognizerOptions alloc] init];
MLKTextRecognizer *koreanTextRecognizer = [MLKTextRecognizer textRecognizerWithOptions:options];

2. Menyiapkan gambar input

Buat objek VisionImage menggunakan UIImage atau objek CMSampleBuffer.

Jika Anda menggunakan UIImage, ikuti langkah-langkah berikut:

• Buat objek VisionImage dengan UIImage. Pastikan untuk menentukan .orientation yang benar.

  Swift

  let image = VisionImage(image: UIImage)
  visionImage.orientation = image.imageOrientation

  Objective-C

  MLKVisionImage *visionImage = [[MLKVisionImage alloc] initWithImage:image];
  visionImage.orientation = image.imageOrientation;

Jika Anda menggunakan CMSampleBuffer, ikuti langkah-langkah berikut:

• Tentukan orientasi data gambar yang terdapat dalam CMSampleBuffer.

  Untuk mendapatkan orientasi gambar:

  Swift

  func imageOrientation(
    deviceOrientation: UIDeviceOrientation,
    cameraPosition: AVCaptureDevice.Position
  ) -> UIImage.Orientation {
    switch deviceOrientation {
    case .portrait:
      return cameraPosition == .front ? .leftMirrored : .right
    case .landscapeLeft:
      return cameraPosition == .front ? .downMirrored : .up
    case .portraitUpsideDown:
      return cameraPosition == .front ? .rightMirrored : .left
    case .landscapeRight:
      return cameraPosition == .front ? .upMirrored : .down
    case .faceDown, .faceUp, .unknown:
      return .up
    }
  }
        

  Objective-C

  - (UIImageOrientation)
    imageOrientationFromDeviceOrientation:(UIDeviceOrientation)deviceOrientation
                           cameraPosition:(AVCaptureDevicePosition)cameraPosition {
    switch (deviceOrientation) {
      case UIDeviceOrientationPortrait:
        return cameraPosition == AVCaptureDevicePositionFront ? UIImageOrientationLeftMirrored
                                                              : UIImageOrientationRight;
  
      case UIDeviceOrientationLandscapeLeft:
        return cameraPosition == AVCaptureDevicePositionFront ? UIImageOrientationDownMirrored
                                                              : UIImageOrientationUp;
      case UIDeviceOrientationPortraitUpsideDown:
        return cameraPosition == AVCaptureDevicePositionFront ? UIImageOrientationRightMirrored
                                                              : UIImageOrientationLeft;
      case UIDeviceOrientationLandscapeRight:
        return cameraPosition == AVCaptureDevicePositionFront ? UIImageOrientationUpMirrored
                                                              : UIImageOrientationDown;
      case UIDeviceOrientationUnknown:
      case UIDeviceOrientationFaceUp:
      case UIDeviceOrientationFaceDown:
        return UIImageOrientationUp;
    }
  }
        

• Buat objek VisionImage menggunakan Objek dan orientasi CMSampleBuffer:

  Swift

  let image = VisionImage(buffer: sampleBuffer)
  image.orientation = imageOrientation(
    deviceOrientation: UIDevice.current.orientation,
    cameraPosition: cameraPosition)

  Objective-C

   MLKVisionImage *image = [[MLKVisionImage alloc] initWithBuffer:sampleBuffer];
   image.orientation =
     [self imageOrientationFromDeviceOrientation:UIDevice.currentDevice.orientation
                                  cameraPosition:cameraPosition];

3. Memproses gambar

Lalu, teruskan gambar ke metode process(_:completion:):

textRecognizer.process(visionImage) { result, error in
  guard error == nil, let result = result else {
    // Error handling
    return
  }
  // Recognized text
}

[textRecognizer processImage:image
                  completion:^(MLKText *_Nullable result,
                               NSError *_Nullable error) {
  if (error != nil || result == nil) {
    // Error handling
    return;
  }
  // Recognized text
}];

4. Ekstrak teks dari blok teks yang dikenali

Jika operasi pengenalan teks berhasil, metode ini akan mengembalikan Objek Text. Objek Text berisi teks lengkap dikenali dalam gambar, dan nol atau lebih TextBlock objek terstruktur dalam jumlah besar.

Setiap TextBlock mewakili blok teks persegi panjang, yang berisi nol atau beberapa objek TextLine. Setiap TextLine berisi nol atau beberapa objek TextElement, yang mewakili kata dan entitas mirip kata seperti tanggal dan angka.

Untuk setiap TextBlock, TextLine, dan TextElement, Anda bisa mendapatkan teks yang dikenali di region dan koordinat pembatas wilayah tersebut.

Contoh:

let resultText = result.text
for block in result.blocks {
    let blockText = block.text
    let blockLanguages = block.recognizedLanguages
    let blockCornerPoints = block.cornerPoints
    let blockFrame = block.frame
    for line in block.lines {
        let lineText = line.text
        let lineLanguages = line.recognizedLanguages
        let lineCornerPoints = line.cornerPoints
        let lineFrame = line.frame
        for element in line.elements {
            let elementText = element.text
            let elementCornerPoints = element.cornerPoints
            let elementFrame = element.frame
        }
    }
}

NSString *resultText = result.text;
for (MLKTextBlock *block in result.blocks) {
  NSString *blockText = block.text;
  NSArray<MLKTextRecognizedLanguage *> *blockLanguages = block.recognizedLanguages;
  NSArray<NSValue *> *blockCornerPoints = block.cornerPoints;
  CGRect blockFrame = block.frame;
  for (MLKTextLine *line in block.lines) {
    NSString *lineText = line.text;
    NSArray<MLKTextRecognizedLanguage *> *lineLanguages = line.recognizedLanguages;
    NSArray<NSValue *> *lineCornerPoints = line.cornerPoints;
    CGRect lineFrame = line.frame;
    for (MLKTextElement *element in line.elements) {
      NSString *elementText = element.text;
      NSArray<NSValue *> *elementCornerPoints = element.cornerPoints;
      CGRect elementFrame = element.frame;
    }
  }
}

Panduan gambar input

• Agar ML Kit dapat mengenali teks secara akurat, gambar input harus berisi teks yang diwakili oleh data piksel yang memadai. Idealnya, setiap karakter minimal harus 16x16 piksel. Umumnya tidak ada akurasi keuntungan akurasi untuk karakter yang menjadi lebih besar dari 24x24 {i>pixel<i}.

  Jadi, misalnya, gambar 640x480 mungkin cocok untuk memindai kartu nama yang menempati lebar penuh gambar. Untuk memindai dokumen yang dicetak pada kertas berukuran huruf, gambar 720x1280 piksel mungkin diperlukan.

• Fokus gambar yang buruk dapat memengaruhi akurasi pengenalan teks. Jika Anda tidak mendapatkan hasil yang dapat diterima, coba minta pengguna untuk mengambil ulang gambar.

• Jika Anda mengenali teks dalam aplikasi {i>real-time<i}, Anda harus mempertimbangkan dimensi keseluruhan gambar input. Lebih kecil gambar dapat diproses lebih cepat. Untuk mengurangi latensi, pastikan teks menempati sebanyak gambar sebaik mungkin, dan ambil gambar dengan resolusi yang lebih rendah (mengingat akurasi persyaratan yang disebutkan di atas). Untuk informasi selengkapnya, lihat Tips untuk meningkatkan performa.

Tips untuk meningkatkan performa

• Untuk memproses frame video, gunakan API sinkron results(in:) dari detektor. Telepon metode ini dari class AVCaptureVideoDataOutputSampleBufferDelegate captureOutput(_, didOutput:from:) untuk mendapatkan hasil dari video yang diberikan secara sinkron {i>frame<i}. Simpan AVCaptureVideoDataOutput alwaysDiscardsLateVideoFrames sebagai true untuk men-throttle panggilan ke detektor. Jika frame video tersedia saat detektor sedang berjalan, dan frame tersebut akan dihapus.
• Jika Anda menggunakan output detektor untuk menempatkan grafik gambar input, pertama-tama dapatkan hasilnya dari ML Kit, lalu render gambar dan overlay dalam satu langkah. Dengan demikian, Anda merender ke permukaan tampilan hanya sekali untuk setiap {i> frame<i} input yang diproses. Lihat updatePreviewOverlayViewWithLastFrame dalam contoh panduan memulai ML Kit sebagai contoh.
• Sebaiknya ambil gambar dengan resolusi yang lebih rendah. Namun, perlu diingat persyaratan dimensi gambar API ini.
• Untuk menghindari potensi penurunan performa, jangan jalankan beberapa Instance TextRecognizer dengan opsi skrip yang berbeda secara serentak.