อ่าน QR Code บน iPhone ด้วย ZBar Barcode Reader

เพื่อไม่ให้ตก trend ตอนนี้ที่อะไร ๆ ก็มี QR code หรือ 2D barcode ไปแปะกันให้ทั่ว และโชคดีผมมี iPhone ที่พร้อมสำหรับการอ่าน QR code เสมอในทุกที่ที่ผมเจอ

ตามหา QR code reader ที่เป็น library ของ Objective-c พบว่ามีอยู่หลายตัว ตัวหนึ่งที่ลองเล่นแล้วรู้สึกง่ายดีคือ ZBar Barcode Reader

วิธีใช้ไม่ยาก แต่วิธีติดตั้งและ link library ที่จำเป็นต้องออกแรงนิดนึงก่อน

Setup the Library

1. download และติดตั้ง Mercurial
2. เปิด terminal ขึ้นมา แล้ว clone zbar จาก repository ลงมาดังนี้

$ hg clone http://zbar.hg.sourceforge.net:8000/hgroot/zbar/zbar myapp/zbar

หลังจาก clone ลงมาเสร็จแล้ว ให้ลองทดสอบ library ด้วยการลองรันโปรแกรมชื่อ readertest และมันต้องใช้งานได้ดีด้วยการ

• เปิดไฟล์ zbar/test/iphone/readertest.xcodeproj
• ให้เลือก build ลง device จากนั้น Build and Go ได้เลย
• ลอง scan QR code ดูหากได้ผลลัพธ์ออกมาถูกต้องแล้วก็ไปขั้นตอนต่อไปได้เลย

Build Settings

ต่อไปเป็นการนำ library เข้ามาใช้ใน project ซึ่งต้องลงไม้ลงมือดังต่อไปนี้

1. click ขวาที่โปรเจ็คแล้วเลือก Add -> Existing Files... จากนั้น browse ไปที่ zbar/iphone/zbar.xcodeproj
2. เพิ่ม resource ของหน้า help ลงไปในโปรเจ็ค (ตัว view controller ที่ใช้ในการอ่านภาพ QR code จะมี help ให้ด้วย ซึ่ง help ที่มีให้จะมาอ่าน resource ตรงนี้) 
• click ขวาที่ Resources แล้วเลือก Add Existing Files... จากนั้น browse ไปที่ zbar/iphone/res/zbar-*.{html,png}
• หมายเหตุ* ในกรณีที่เราใช้ help ที่ library มีมาให้ แต่ถ้าจะทำหน้า help เองก็ไม่จำเป็นต้องทำขั้นตอนนี้ก็ได้
3. expand node zbar.xcodeproj เราจะเห็น libzbar.a อยู่ จากนั้นเปิด node Targets และชื่อ App ของเรา เราจะเห็น Link Binary with Libraries จากนั้นให้ลาก libzbar.a ลงมาใส่ใน Link Binary with Libraries
4. ใน App target settings

• ที่ General Tag ตรง Direct Dependencies ให้กดเพิ่ม zbar เข้าไป
• ที่ Linked Libraries ให้เพิ่ม library ต่อไปนี้เข้าไป
• QuartzCore.framework
• libiconv.dylib
• AVFoundation.framework (Weak)
• CoreMedia.framework (Weak)
• CoreVideo.framework (Weak)
• ที่ Build tab, show All Setting for "All Configurations" ให้กำหนด Header Search Path ไปหา directory นี้
• zbar/include (not recursive)
• ที่ "All Settings" และ "Release" ให้กำหนดที่ Preprocessor Macros ดังนี้
• NDEBUG=1

ใน myapp_Prefix.pch ให้เพิ่มบรรทัดนี้ลงไป

#import <zbar/ZBarReaderViewController.h>

ลองสั่ง build ดู หากไม่พบ error หรือ warning อะไรเกิดขึ้นเลยให้ไปต่อได้

ที่ผ่านมาเป็นการกำหนดค่าต่างๆ ที่จำเป็น เพื่อบอก xcode เมื่อเรา build โปรเจ็คว่าต้องไปหาอะไรที่ไหนบ้าง ต่อไปจะเป็นการนำ library ไปใช้ ซึ่งจะได้ code หน้าตาแบบนี้ออกมา

- (IBAction) readQRCode{

ZBarReaderViewController *reader = [ZBarReaderViewController new];

    // (optional) to scan from images, replace with:

    //ZBarReaderController *reader = [ZBarReaderController new];

    reader.readerDelegate = self;

    ZBarImageScanner *scanner = reader.scanner;

    // TODO: (optional) additional reader configuration here

    // EXAMPLE: disable rarely used I2/5 to improve performance

    [scanner setSymbology: ZBAR_I25

   config: ZBAR_CFG_ENABLE

       to: 0];

    // present and release the controller

    [self presentModalViewController: reader animated: YES];

    [reader release];

}

เมื่อเรียก method ด้านบนแล้ว กล้องจะเปิดขึ้นและ scan ภาพที่กล้องกำลังจับอยู่ เมื่อพบว่ามี QR code delegate method ต่อไปนี้จะทำงานทันที

- (void) imagePickerController: (UIImagePickerController*) reader

 didFinishPickingMediaWithInfo: (NSDictionary*) info

{

    // TODO: (optional) this is the image of the barcode...

    //UIImage *image =

    //  [info objetForKey: UIImagePickerControllerOriginalImage];

    // get the results

    id <NSFastEnumeration> results = [info objectForKey: ZBarReaderControllerResults];

    ZBarSymbol *symbol = nil;

NSLog(@"results = %@", results);

    for(symbol in results)

        // EXAMPLE: just grab the first barcode

        break;

    if(!symbol)

        // this should not occur, but doesn't hurt to check

        return;

    // see ZBarSymbol.h for other symbol properties

NSLog(@"result = %@", symbol.data);

    // dismiss the controller (NB: dismiss from the *picker*)

    [reader dismissModalViewControllerAnimated: YES];

}

อ่านเพิ่มเติม

• HOWTO: Add a barcode reader to an iPhone app

Related Link from Roti