Membuat Barcode/QR Code Scanner dan Face Detector di Android Menggunakan Google Mobile Vision

Last Updated on 9 years by Mas Herdi

Hi all, beberapa tahun yang lalu saya pernah menulis tutorial tentang bagaimana cara membuat QR Code scanner sederhana di Android menggunakan ZXing library. Tutorial tersebut sudah ditulis lebih dari dua tahun yang lalu, dan belum saya update, bisa jadi sekarang sudah tidak bisa dijalankan atau librarynya sudah tidak disupport. 😀

Untungnya sekarang Google telah mengeluarkan library baru bernama Mobile Vision, library yang tergabung dalam Google Play Services dan bisa digunakan untuk men-scan macam-macam object yang terdapat pada foto maupun video. objects tersebut bisa berupa QR Code, barcode, maupun wajah (face) seseorang.

Barcode dan QR Code Scanner menggunakan Mobile Vision for Android

Fitur pertama pada Mobile Vision library adalah untuk men-scan barcode maupun QR code. Dan bagusnya lagi kita bisa menggunakan satu kelas, BarcodeDetector, untuk men-scan QR code maupun barcode. Kita pun bisa men-scan multiple barcode dan QR code dalam satu kamera sekaligus.

Kode yang saya gunakan berasal dari Mobile Vision sample yang sudah saya modifikasi. Kode tersebut mendeteksi apakah ada barcode atau QR code dalam suatu foto yang tertangkap pada kamera secara real time. Kita menggunakan beberapa views, seperti GraphicOverlay, SurfaceView dan CameraSource supaya bisa mendapatkan preview feed real time dari kamera di Android.

Untuk class yang berfungsi sebagai detector berasal dari library Mobile Vision seperti BarcodeDetector dan custom class BarcodeDetectorFactory.

Kemudian untuk integrasinya antara komponen-komponen di atas dilakukan pada method onCreate seperti berikut :

        // ...
        // inisialisasi view
        CameraSourcePreview mPreview = (CameraSourcePreview) findViewById(R.id.preview);
        GraphicOverlay mGraphicOverlay = (GraphicOverlay) findViewById(R.id.overlay);

        // inisialisasi barcode detector
        BarcodeDetector barcodeDetector = new BarcodeDetector.Builder(this).build();
        BarcodeTrackerFactory barcodeFactory = new BarcodeTrackerFactory(mGraphicOverlay, new DetectionListener()                        {
            @Override
            public void onDetection(Object o) {
                if(o instanceof Barcode) {

                   // do something if barcode found

                }
            }
        });

        // inisialisasi processor, menggunakan multiprocessor sehingga bisa scan multiple barcode sekaligus               
        barcodeDetector.setProcessor(
                new MultiProcessor.Builder<>(barcodeFactory).build());

        // inisialisasi CameraSource untuk mendapatkan real time preview feed dari kamera
        CameraSource mCameraSource = new CameraSource.Builder(getApplicationContext(), barcodeDetector)
                .setFacing(CameraSource.CAMERA_FACING_BACK)
                .setRequestedPreviewSize(1600, 1024)
                .setRequestedFps(15.0f)
                .build();

        //... rest of on create method

Ketika dijalankan maka aplikasi bisa men-scan multiple barcode dan QR Code sekaligus. Namun kita akan agak kesulitan ketika ingin mendapatkan values dari barcode maupun QR Code yang ada karena feed preview real time dari kamera akan selalu di-refresh setiap beberapa detik/milliseconds. Demo aplikasinya bisa dilihat pada gambar di bawah :

Barcode dan QR Code scanner menggunakan Mobile Vision

Face Detection menggunakan Mobile Vision for Android

Sedangkan untuk Face Detector, prinsip kerjanya sama seperti scan barcode/QR Code ketika kita ingin mendeteksi apakah ada wajah yang terekam pada real time preview feed dari kamera. Kita menggunakan views yang sama seperti SurfaceView, GraphicOverlay dan sebagainya. Hanya metode detektor yang sebelumnya menggunakan BarcodeDetector, kita ganti menjadi FaceDetector untuk mendeteksi wajah.

        //...
        // inisialisasi views
        CameraSourcePreview mPreview = (CameraSourcePreview) findViewById(R.id.preview);
        GraphicOverlay mGraphicOverlay = (GraphicOverlay) findViewById(R.id.overlay);

        // inisialisasi face detector
        FaceDetector faceDetector = new FaceDetector.Builder(this).build();
        FaceTrackerFactory faceFactory = new FaceTrackerFactory(mGraphicOverlay);

        // inisialisasi processor, menggunakan multiprocessor sehingga bisa scan multiple barcode sekaligus
        faceDetector.setProcessor(
                new MultiProcessor.Builder<>(faceFactory).build());
        
        // inisialisasi CameraSource
        CameraSource mCameraSource = new CameraSource.Builder(getApplicationContext(), faceDetector)
                .setFacing(CameraSource.CAMERA_FACING_BACK)
                .setRequestedPreviewSize(1600, 1024)
                .setRequestedFps(15.0f)
                .build();
        //... rest of on create method

Dan ketika dijalankan, aplikasi akan bisa mendeteksi multiple wajah sekaligus yang terdapat pada sebuah foto, seperti saat saya test menggunakan salah satu foto dari instagram-nya dek @TatjanaSaphira.

Multiple Face Detection menggunakan Google Mobile Vision library | (c) instagram @tatjanasaphira

Google Mobile Vision tidak hanya dapat mendeteksi wajah, namun juga bisa mendeteksi smile, fitur2 pembentuk wajah seperti mata, hidung, mulut, dan lain sebagainya yang akan dibahas lain kali pada tutorial selanjutnya.

That’s all. Bagi yang ingin mendownload sample-nya ada pada GitHub saya. Jangan lupa untuk follow dan star projectsnya. 🙂