NHN Cloud > SDK User Guide >OCR > Credit Card (iOS)

事前準備

  1. NHN Cloud SDKをインストールします。
  2. NHN Cloud Consoleで[AI Service > OCR]サービスを有効にします。
  3. OCRコンソールでAppKeyとSecretKeyを確認します。


サポート環境

NHN Cloud OCRはiOS 11.0以上で動作します。

NHN Cloud OCR構成

iOS用NHN Cloud OCR SDKの構成は次のとおりです。

Service Cocoapods Pod Name Framework Dependency Build Settings
IAP NHNCloudOCR NHNCloudOCR.framework * Vision.framework
* AVFoundation.framework
Mandatory NHNCloudCore
NHNCloudCommon		 NHNCloudCore.framework
NHNCloudCommon.framework		 OTHER_LDFLAGS = (
"-ObjC",
"-lc++"
);

NHN Cloud OCR SDKをXcodeプロジェクトに適用

1. Cococapodsを利用した適用

  • Podfileを作成してNHN Cloud SDKに対するPodを追加します。
platform :ios, '11.0'
use_frameworks!

target '{YOUR PROJECT TARGET NAME}' do
    pod 'NHNCloudOCR'
end

2. Swift Package Managerを使用してNHN Cloud SDK適用

  • XCodeでFile > Add Packages...メニューを選択します。
  • Package URLに'https://github.com/nhn/nhncloud.ios.sdk'を入れてAdd Packageボタンを選択します。
  • NHNCloudOCRを選択します。

swift_package_manager

プロジェクト設定

  • Build Settingsの Other Linker Flagsに-lc++と-ObjC項目を追加します。
    • Project Target > Build Settings > Linking > Other Linker Flags other_linker_flags

3. バイナリをダウンロードしてNHN Cloud SDK適用

フレームワーク設定

  • NHN Cloud Downloadsページで全てのiOS SDKをダウンロードできます。
  • Xcode ProjectにNHNCloudOCR.framework、 NHNCloudCore.framework、 NHNCloudCommon.framework、 vision.framework、 AVFoundation.frameworkを追加します。
  • vision.frameworkとAVFoundation.frameworkは、以下の方法で追加できます。 linked_vision_frameworks linked_avfoundation_frameworks linked_frameworks_ocr

プロジェクト設定

  • Build SettingsのOther Linker Flagsに-lc++と-ObjC項目を追加します。
    • Project Target > Build Settings > Linking > Other Linker Flags other_linker_flags

NHNCloudOCR SDK初期化

  • NHN Cloud Consoleで発行されたAppKeyとSecretをNHNCloudOCRConfigurationオブジェクトに設定します。
  • AI Service -> OCR -> Document OCR -> クレジットカード
  • NHNCloudOCRは初期化にNHNCloudOCRConfigurationオブジェクトをパラメータとして使用します。
  • カメラ使用権限を取得するためにinfo.plistに以下の内容を追加します。
Key : NSCameraUsageDescription
Value： [カメラ権限リクエストメッセージ]

初期化API仕様

// 初期化
+ (void)initWithConfiguration:(NHNCloudOCRConfiguration *)configuration;

// Delegate設定
+ (void)setCreditCardRecognizerDelegate:(nullable id<NHNCloudCreditCardRecognizerDelegate>)delegate;

Delegate API仕様

  • NHNCloudCreditCardRecognizerDelegateを登録すると、認識結果に対する通知を受け取ることができます。
  • OCRが実行中の時、画面のスクリーンキャプチャと動画録画イベントを受信できません。
  • SDKで提供する基本画面使用時(NHNCloudCreditCardRecognizerViewController継承実装)閉じる、確認イベントを受信できます。
@protocol NHNCloudCreditCardRecognizerDelegate <NSObject>

// クレジットカード認識結果を返す
- (void)didDetectCreditCardInfo:(nullable NHNCloudCreditCardInfo *)cardInfo error:(nullable NSError *)error;

@optional

// スクリーンキャプチャイベント受信
- (void)didDetectCreditCardSecurityEvent:(NHNCloudSecurityEvent)event;

// 閉じるボタンイベント受信(NHNCloudCreditCardRecognizerViewController継承実装時にのみ受信可能)
- (void)creditCardRecognizerViewControllerCancel;

// 確認ボタンイベント受信(NHNCloudCreditCardRecognizerViewController継承実装時にのみ受信可能)
- (void)creditCardRecognizerViewControllerConfirm;

@end

検出イメージリターン設定を行う

  • OCR結果であるNHNCloudCreditCardInfoデータに検出されたイメージを一緒に返すことができます。
    • デフォルト値は無効です。

検出イメージリターン設定API仕様

@interface NHNCloudOCR : NSObject
//..
+ (void)setDetectedImageReturn:(BOOL)enable;
+ (BOOL)isEnableDetectedImageReturn;
//..
@end

認識領域を表示する

認識領域返却API

  • OCR結果であるNHNCloudCreditCardInfoデータに認識された領域の座標情報を返すことができます。
@interface NHNCloudCreditCardInfo : NSObject

// カード番号認識領域
@property(nonatomic, strong, readonly, nullable) NSArray<NSValue *> *numberBoundingBoxes;

// 有効期限認識領域
@property(nonatomic, assign, readonly) CGRect validThruBoundingBox;

@end

認識領域ImageViewに描画


- (void)viewDidLoad {
    [super viewDidLoad];

    // 認識した画像を返すように設定
    [NHNCloudOCR setDetectedImageReturn:YES];
}

// クレジットカードの認識結果を返す
- (void)didDetectCreditCardInfo:(nullable NHNCloudCreditCardInfo *)cardInfo error:(nullable NSError *)error {

    if (cardInfo.detectedImage != nil) {
        UIImageView *imageView = [[UIImageView alloc] initWithImage:cardInfo.detectedImage.image];
        imageView.contentMode = UIViewContentModeScaleAspectFit;

        UIGraphicsBeginImageContextWithOptions(imageView.frame.size, NO, 0.0);
        CGContextRef context = UIGraphicsGetCurrentContext();

        [imageView.image drawInRect:CGRectMake(0, 0, imageView.frame.size.width, imageView.frame.size.height)];

        // カード番号の認識領域を描画する。
        for (NSValue *rectValue in cardInfo.numberBoundingBoxes) {
            CGRect scaledBoundingBox = [self dividedRect:rectValue.CGRectValue
                                                 // デバイスの解像度を考慮してscaleの値で座標を分割します。
                                                   scale:[UIScreen mainScreen].scale];
            CGContextSetStrokeColorWithColor(context, [UIColor orangeColor].CGColor);
            CGContextSetLineWidth(context, 5.0);
            CGContextStrokeRect(context, scaledBoundingBox);
        }

        CGRect scaledValidThruBoundingBox = [self dividedRect:cardInfo.validThruBoundingBox
                                                        scale:[UIScreen mainScreen].scale];
        // 有効期限の認識領域を描画する。                 
        CGContextSetStrokeColorWithColor(context, [UIColor orangeColor].CGColor);
        CGContextSetLineWidth(context, 5.0);
        CGContextStrokeRect(context, scaledValidThruBoundingBox);

        UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();

        imageView.image = newImage;

        [self.view addSubview:imageView];
    }
}

- (CGRect)dividedRect:(CGRect)rect
                scale:(CGFloat)scale {
    return CGRectMake(rect.origin.x / scale, rect.origin.y / scale,
                      rect.size.width / scale, rect.size.height / scale);
}

初期化プロセス例

#import <NHNCloudOCR/NHNCloudOCR.h>

@interface ViewController () <NHNCloudCreditCardRecognizerDelegate>
@end

@implementation ViewController

- (void)initializeOCR {
    // 初期化およびDelegate設定
    NHNCloudOCRConfiguration *configuration = [NHNCloudOCRConfiguration configurationWithAppKey:@"{AppKey}" secret:@"{Secret}"];

    // 検出イメージリターン設定 
    [NHNCloudOCR setDetectedImageReturn:YES];

    // 初期化  
    [NHNCloudOCR initWithConfiguration:configuration];

    // Delegate設定
    [NHNCloudOCR setCreditCardRecognizerDelegate:self];
}

// クレジットカード認識結果を返す
- (void)didDetectCreditCardInfo:(nullable NHNCloudCreditCardInfo *)cardInfo error:(nullable NSError *)error {
    NSLog(@"didDetectCreditCardInfo : cardInfo : %@", cardInfo);
    NSLog(@"didDetectCreditCardInfo : error : %@", error);
}

// スクリーンキャプチャイベント受信
- (void)didDetectCreditCardSecurityEvent:(NHNCloudSecurityEvent)event {

    // スクリーンキャプチャ警告Alert出力例
    if (event == NHNCloudSecurityEventScreenshot || event == NHNCloudSecurityEventScreenRecordingOn) {
        UIAlertController *alert = [UIAlertController alertControllerWithTitle:nil message:@"キャプチャが検出されました。" preferredStyle:UIAlertControllerStyleAlert];
        [alert addAction:[UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:nil]];

        [self presentViewController:alert animated:YES completion:nil];
    }

    // 動画録画時、空の画面出力例
    if (event == NHNCloudSecurityEventScreenRecordingOn || event == NHNCloudSecurityEventScreenRecordingOff) {
        if ([[UIScreen mainScreen] isCaptured] ) {
            [[[UIApplication sharedApplication] windows] firstObject].hidden = YES;
        } else {
            [[[UIApplication sharedApplication] windows] firstObject].hidden = NO;
        }
    }
}

// 確認ボタンイベント受信(NHNCloudCreditCardRecognizerViewController継承実装時にのみ受信可能)
- (void)creditCardRecognizerViewControllerConfirm {
    // クレジットカード認識結果画面で確認ボタンを押した場合の処理
}

// 閉じるボタンイベント受信(NHNCloudCreditCardRecognizerViewController継承実装時にのみ受信可能)
- (void)creditCardRecognizerViewControllerCancel {
    // クレジットカードの認識または結果画面で閉じるボタンを押した時の処理
}

@end

Credit Card適用方法

NHNCloudCreditCardRecognizerViewController

1. Credit-Card Recognizer ViewControllerを使用する

  • NHNCloudCreditCardRecognizerViewControllerを継承実装したClassをStoryboardのViewControllerに接続して基本UIが適用されたCredit-Card Recognizerを簡単に使用できます。

2. Class作成

default_viewcontroller * NHNCloudCreditCardRecognizerViewControllerをsubclassに持つViewController Classを作成します。

3. Storyboardに接続

create_viewcontroller * StoryboardにViewControllerを追加します。

custom_class * 追加したViewControllerにCustom Classに作成したClassを設定します。

segue_viewcontroller * ViewController Segue Eventを設定します。

  • Delegateを設定し、実装します。

NHNCloudCreditCardRecognizerServiceViewControllerカスタマイズ

  • NHNCloudCreditCardRecognizerServiceViewControllerを使用してUIをカスタマイズできます。
  • Credit-Cardガイドの場合、あらかじめ定義された値を使用するため、変更ができません。

1. NHNCloudCreditCardRecognizerServiceViewController継承

  • NHNCloudCreditCardRecognizerServiceViewControllerを継承実装してカスタマイズできます。
Override関数の仕様

// ビューがメモリに作成される時、初期設定やデータの準備作業を実行
- (void)viewDidLoad;

// ビューが画面に表示される直前に最後の処理を実行
- (void)viewWillAppear:(BOOL)animated;

// ビューが画面から消える直前にクリーンアップを実行
- (void)viewWillDisappear:(BOOL)animated;

// ビューが画面から完全に消えた後、追加のクリーンアップを実行
- (void)viewDidDisappear:(BOOL)animated;

// Custom UI更新 
- (void)didUpdateCreditCardGuide:(CGRect)rect orientation:(NHNCloudCreditCardOrientation)orientation;

// クレジットカード認識時、UI更新
- (void)imageDidDetect:(BOOL)detected;
Override使用例

@interface OCRViewController : NHNCloudCreditCardRecognizerServiceViewController <NHNCloudCreditCardRecognizerDelegate>

@end

@implementation OCRViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    [NHNCloudOCR setCreditCardRecognizerDelegate:self];
    // Custom UI作成
}

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];

    [self startRunning];
}

- (void)viewWillDisappear:(BOOL)animated {
    [super viewWillDisappear:animated];
}

- (void)viewDidDisappear:(BOOL)animated {
    [super viewDidDisappear:animated];
}

- (void)didUpdateCreditCardGuide:(CGRect)rect orientation:(NHNCloudCreditCardOrientation)orientation {
    [super didUpdateCreditCardGuide:rect orientation:orientation];

    // Custom UI更新 
}

- (void)imageDidDetect:(BOOL)detected {
    [super imageDidDetect:detected];

    // クレジットカード認識時、UI更新
}

- (void)didDetectCreditCardInfo:(nullable NHNCloudCreditCardInfo *)cardInfo error:(nullable NSError *)error {

    NSLog(@"didDetectCreditCardInfo : cardInfo : %@", cardInfo);
    NSLog(@"didDetectCreditCardInfo : error : %@", error);
}

テスト環境を使用する

  • NHNCloudOCR SDKでテストのために提供するCredit-Cardガイドを使用してOCRをテストできます。
  • クレジットカードがCredit-Cardガイド内に存在する場合、OCRが始まります。
    • デフォルト値はhiddenで、目に見えないガイドが存在します。
    • enableTestGuideを使用してテスト用のガイドを出力できます。

Credit-CardガイドAPI仕様

@interface NHNCloudOCRConfiguration : NSObject
- (void)enableTestGuide;
@end

Credit-Cardガイドの使用例

- (void)initializeOCR {
    // 初期化およびDelegate設定
    NHNCloudOCRConfiguration *configuration = [NHNCloudOCRConfiguration configurationWithAppKey:@"{AppKey}" secret:@"{Secret}" ];

    [configuration enableTestGuide];

    [NHNCloudOCR initWithConfiguration:configuration];

    [NHNCloudOCR setCreditCardRecognizerDelegate:self];
}

Credit-Card Recognizer ViewControllerを制御する

Credit Card適用方法を見てNHNCloudCreditCardRecognizerViewControllerまたはNHNCloudCreditCardRecognizerServiceViewController継承実装必要

1. Credit-Card Recognizerの開始/停止

  • Credit-Card Recognizerを開始または停止します。

Credit-Card Recognizer開始/停止API仕様

- (void)startRunning;
- (void)stopRunning;
- (BOOL)isRunning;

Credit-Card Recognizer開始/停止の使用例

- (void)start {
  [self startRunning];
}

// クレジットカード認識結果を返す
- (void)didDetectCreditCardInfo:(nullable NHNCloudCreditCardInfo *)cardInfo error:(nullable NSError *)error {
    [self stopRunning];
}

2. Credit-Cardガイドの回転

  • クレジットカードの方向に合うようにCredit-Cardガイドを回転させることができます。

Credit-Cardガイド回転API仕様

@property (assign, nonatomic, readonly) CGRect creditCardGuide;
@property (assign, nonatomic, readonly) NHNCloudCreditCardOrientation creditCardGuideOrientation;
- (void)rotateCreditCardGuideOrientation;

Credit-Cardガイド回転の使用例

typedef NS_ENUM(NSInteger, NHNCloudCreditCardOrientation) {

    NHNCloudCreditCardOrientationPortrait = 0,
    NHNCloudCreditCardOrientationLandscape = 1
};

- (void)rotateButtonAction:(UIButton *)button {

    [self rotateCreditCardGuideOrientation];

    NSLog(@"x: %f y: %f width: %f height: %f", self.creditCardGuide.origin.x,
          self.creditCardGuide.origin.y,
          self.creditCardGuide.size.width,
          self.creditCardGuide.size.height);

    NSLog(@"creditCardGuideOrientation: %ld", self.creditCardGuideOrientation);
}

3. フラッシュ有効/無効

  • デバイスのカメラフラッシュを有効または無効にします。

フラッシュ有効/無効API仕様

- (void)enableTorchMode;
- (void)disableTorchMode;
- (BOOL)isEnableTorchMode;

フラッシュ有効/無効の使用例

- (void)torchButtonAction:(UIButton *)button {    
    if ([self isEnableTorchMode] == YES) {
        [self disableTorchMode];
    } else {
        [self enableTorchMode];
    }
}

4. カメラ有効/無効

  • デバイスのカメラを有効または無効にします。

カメラ有効/無効API仕様

- (void)startRunningCamera;
- (void)stopRunningCamera;
- (BOOL)isRunnginCamera;

カメラ有効/無効使用例

- (void)cameraButtonAction:(UIButton *)button {    
    if ([self isRunnginCamera] == YES) {
        [self stopRunningCamera];
    } else {
        [self startRunningCamera];
    }
}
目次
TOP