Advertisement
  1. Code
  2. Android
Code

Đọc Mã QR bằng Mobile Vision API

by
Difficulty:IntermediateLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Giới thiệu

Mã QR đã trở nên phổ biến rộng rãi trong những năm gần đây. Tôi chắc là bạn đã từng nhìn thấy một cái trên một quảng cáo ở trên báo hoặc trên một tấm bảng quảng cáo. Nói một cách thông thường, mã QR, giống như tất cả các mã vạch khác, đều là những hình ảnh được thiết kế để được đọc bởi máy tính. Thông thì, chúng đại diện cho một chuỗi nhỏ, chẳng hạn như một URL rút gọn hoặc số điện thoại. Đây là một mã QR mẫu có chứa URL dẫn đến trang chủ Tuts+:

Tuts+ URL as a QR code

Không giống với mã vạch truyền thống, cần phần cứng chuyên dụng, mã QR có thể được đọc một cách chính xác bởi bất kỳ smartphone nào với camera kha khá.

Bản phát hành mới nhất của Google Play services SDK bao gồm Mobile Vision API, cùng với những thứ khác, giúp các nhà phát triển Android dễ dàng tạo ra các ứng dụng có khả năng phát hiện và đọc mã QR theo thời gian thực. Trong hướng dẫn này, tôi sẽ giúp bạn làm quen với nó.

Yêu cầu

Để làm theo hướng dẫn này, bạn sẽ cần:

  • phiên bản Android Studio mới nhất
  • một thiết bị Android có camera

1. Cài đặt Google Play Services SDK

Trước khi bạn sử dụng Mobile Vision API trong ứng dụng của mình, bạn nên thêm Google Play services 7.8 trở lên như là phụ thuộc compile trong tập tin build.gradle của mô-đun app.

Khi bạn nhấn vào nút Sync Now, bạn sẽ thấy một lỗi giống như sau:

Install repository error

Nhấp vào liên kết Install repository and sync project để cài đặt SDK.

2. Chỉnh sửa Tập tin Manifest của Ứng dụng

Hãy thêm dòng sau đây vào AndroidManifest.xml của ứng dụng để tự động cài đặt các thư viện phát hiện mã vạch trên các thiết bị cố gắng chạy ứng dụng của bạn:

Ngoài ra, vì bạn sẽ sử dụng camera của thiết bị để chụp mã QR, nên bạn cần yêu cầu cấp quyền android.permission.CAMERA.

3. Đọc mã QR từ một Bức ảnh

Bây giờ hãy viết một số code mà có thể đọc mã QR từ một tấm ảnh được lưu trữ trong thư mục assets của ứng dụng. Tôi sẽ đặt tên cho tấm ảnh là myqrcode.jpg. Nếu bạn không có bất kỳ hình ảnh nào có chứa mã QR, bạn có thể lấy về một số hình từ Flickr.

Bước 1: Chuyển đổi Tấm ảnh thành một Bitmap

Bởi vì Mobile Vision API cần một ảnh Bitmap như là đầu vào của nó, nên trước tiên bạn nên chuyển đổi tấm ảnh của bạn thành một Bitmap. Để làm như vậy, hãy mở bức ảnh bằng phương thức open của lớp AssetManager và truyền InputStream trở lại phương thức decodeStream của BitmapFactory. Để cho đơn giản, hãy thực hiện điều đó bên trong phương thức onCreate của Activity.

Bước 2: Tạo một Barcode Detector

Để phát hiện mã QR (và các loại mã vạch khác), bạn nên sử dụng một đối tượng của lớp BarcodeDetector. Đoạn code sau đây chỉ ra cho bạn cách tạo một đối tượng bằng BarcodeDetector.Builder:

Hãy lưu ý rằng, mặc định detector sẽ, phát hiện mã vạch thuộc tất cả các định dạng được hỗ trợ. Tôi sử dụng phương thức setBarcodeFormats để chỉ định rõ rõ ràng rằng detector chỉ phát hiện mã QR.

Bước 3: Đọc Mã QR

Sử dụng Frame.Builder để tạo một Frame bằng cách sử dụng Bitmap mà bạn đã tạo ra trước đó.

Gọi phương thức detect của BarcodeDetector để tạo ra một SparseArray có chứa tất cả các mã QR mà BarcodeDetector đã phát hiện trong bức ảnh của bạn

Mỗi phần tử trong SparseArray có chứa một đối tượng Barcode. Để truy xuất nội dung thô của mã QR, bạn có thể sử dụng trường rawValue của đối tượng Barcode. Tuy nhiên, tôi khuyên bạn nên sử dụng cách dễ hơn để đọc trường displayValue. Đây là một số code in ra nội dung của mã QR đầu tiên mà API đã phát hiện:

Nếu bạn chạy Activity của bạn ngay lúc này, bạn sẽ có thể nhìn thấy thông báo chứa trong mã QR của tấm ảnh.

4. Đọc Mã QR bằng Camera

Mobile Vision API còn giúp bạn dễ dàng phát hiện và đọc mã vạch bằng camera của thiết bị theo thời gian thực. Hãy tạo một Activity mới để thực hiện điều đó.

Bước 1: Xác định Bố cục

Tạo một tập tin bố cục XML mới đặt tên là activity_main.xml. Bố cục nên có một SurfaceView để hiển thị các frame xem trước được chụp bởi camera. Nếu muốn, bạn cũng có thể thêm một TextView để hiển thị nội dung của mã QR mà API phát hiện ra.

Sau khi sử dụng một RelativeLayout để định vị cả hai thành phần, thì tập tin bố cục XML sẽ như sau:

Bước 2: Tạo Activity

Tạo một lớp Java mới đặt tên là MainActivity.java. Làm cho nó trở thành lớp con của Activity và override phương thức onCreate của nó. Bên trong phương thức onCreate, gọi setContentView để áp dụng bố cục mà bạn đã tạo ra ở bước trước. Tiếp theo, sử dụng findViewById để lấy các tham chiếu đến các thành phần được định nghĩa trong bố cục.

Để truy xuất một luồng hình ảnh từ camera của thiết bị và hiển thị chúng trong SurfaceView, hãy tạo một đối tượng mới của lớp CameraSource bằng cách sử dụng CameraSource.Builder. Bởi vì CameraSource cần một BarcodeDetector, nên hãy tạo một cái bằng BarcodeDetector.Builder. Nếu muốn, bạn có thể tinh chỉnh kích thước của camera preview bằng phương thức setRequestedPreviewSize.

Tiếp theo, thêm một callback vào SurfaceHolder của SurfaceView để bạn biết khi nào bạn có thể bắt đầu vẽ các frame xem trước. Callback sẽ cài đặt giao diện SurfaceHolder.Callback.

Bên trong phương thức surfaceCreated, hãy gọi phương thức start của CameraSource để bắt đầu vẽ các frame xem trước. Bởi vì phương thức start mong chờ bạn xử lý một IOException, nên bạn sẽ gọi nó từ bên trong một khối try...catch.

Tương tự, bên trong phương thức surfaceDestroyed, hãy gọi phương thức stop của CameraSource để dừng vẽ các frame xem trước.

Activity của bạn gần như đã sẵn sàng. Tuy nhiên, bạn vẫn cần phải nói cho BarcodeDetector biết những gì cần làm khi nó phát hiện ra một mã QR. Hãy tạo một đối tượng của một lớp cài đặt giao diện Detector.Processor và truyền nó vào phương thức setProcessor của BarcodeDetector. Android Studio sẽ tự động tạo ra các phương thức của giao diện đó.

Bên trong phương thức receiveDetections, hãy lấy các đối tượng SparseArray của Barcode bằng cách gọi phương thức getDetectedItems của lớp Detector.Detections. Bây giờ bạn có thể viết code để làm điều gì đó với mã QR được phát hiện ra, bởi vì tôi đã hướng dẫn cho bạn cách làm việc với các đối tượng SparseArray trước đó trong hướng dẫn này.

Dưới đây là cách bạn có thể hiển thị displayValue của mã QR trong TextView:

Hãy lưu ý rằng, bạn nên nhúng cuộc gọi đến phương thức setText bên trong cuộc gọi đến phương thức post của TextView, bởi vì receiveDetections không chạy trên UI. Nếu không làm như vậy sẽ dẫn đến một lỗi runtime.

Bây giờ bạn có thể biên dịch và chạy ứng dụng của bạn. Trỏ camera của thiết bị vào mã QR và bạn sẽ có thể nhìn thấy nội dung của mã QR ngay lập tức.

Real time detection

Phần Tóm tắt

Trong bài hướng dẫn này, bạn đã học được cách sử dụng Mobile Vision API để đọc mã QR từ các tấm ảnh tĩnh cũng như từ camera trên thiết bị. Mặc dù chúng ta chỉ làm việc với mã QR trong hướng dẫn này, nhưng bạn cũng có thể sử dụng API này để đọc các định dạng mã vạch phổ biến khác chẳng hạn UPC-A và EAN-13.

Để tìm hiểu thêm về Mobile Vision API, tôi khuyên bạn nên truy cập vào tài liệu hướng dẫn của API.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.