API Phát hiện hình dạng: một hình ảnh đáng giá hàng nghìn từ, khuôn mặt và mã vạch

Shape Detection API phát hiện khuôn mặt, mã vạch và văn bản trong hình ảnh.

Thomas Steiner

Shape Detection API là gì?

Với các API như navigator.mediaDevices.getUserMedia và công cụ chọn ảnh của Chrome dành cho Android, việc chụp ảnh hoặc dữ liệu video trực tiếp từ camera của thiết bị hoặc tải ảnh cục bộ lên đã trở nên khá dễ dàng. Cho đến nay, mã không thể truy cập vào dữ liệu hình ảnh động này cũng như hình ảnh tĩnh trên một trang, mặc dù hình ảnh thực sự có thể chứa nhiều đối tượng thú vị như khuôn mặt, mã vạch và văn bản.

Ví dụ: trước đây, nếu muốn trích xuất các tính năng như vậy trên máy khách để tạo trình đọc mã QR, nhà phát triển phải dựa vào các thư viện JavaScript bên ngoài. Điều này có thể tốn kém về hiệu suất và làm tăng trọng lượng tổng thể của trang. Mặt khác, các hệ điều hành như Android, iOS và macOS, cũng như các chip phần cứng có trong mô-đun camera, thường đã có các trình phát hiện đối tượng hiệu suất cao và được tối ưu hoá cao, chẳng hạn như FaceDetector Android hoặc trình phát hiện đối tượng chung của iOS, CIDetector.

Shape Detection API (API Phát hiện hình dạng) hiển thị những cách triển khai này thông qua một bộ giao diện JavaScript. Hiện tại, các tính năng được hỗ trợ là phát hiện khuôn mặt thông qua giao diện FaceDetector, phát hiện mã vạch thông qua giao diện BarcodeDetector và phát hiện văn bản (Nhận dạng ký tự quang học (OCR)) thông qua giao diện TextDetector.

Các trường hợp sử dụng được đề xuất

Như đã trình bày ở trên, Shape Detection API hiện hỗ trợ việc phát hiện khuôn mặt, mã vạch và văn bản. Danh sách sau đây chứa các ví dụ về trường hợp sử dụng cho cả 3 tính năng.

Phát hiện khuôn mặt

  • Các trang web chia sẻ ảnh hoặc mạng xã hội trực tuyến thường cho phép người dùng chú thích người trong ảnh. Bằng cách làm nổi bật ranh giới của các khuôn mặt được phát hiện, bạn có thể dễ dàng thực hiện nhiệm vụ này.
  • Các trang web nội dung có thể cắt hình ảnh một cách linh hoạt dựa trên những khuôn mặt có thể được phát hiện thay vì dựa vào các phương pháp phỏng đoán khác, hoặc làm nổi bật những khuôn mặt được phát hiện bằng hiệu ứng lia máy và thu phóng giống như hiệu ứng Ken Burns trong các định dạng giống như câu chuyện.
  • Các trang web nhắn tin đa phương tiện có thể cho phép người dùng phủ các đối tượng vui nhộn như kính râm hoặc ria mép lên các điểm đánh dấu khuôn mặt được phát hiện.

Phát hiện mã vạch

  • Các ứng dụng web đọc mã QR có thể mở ra những trường hợp sử dụng thú vị như thanh toán trực tuyến hoặc điều hướng trên web, hoặc sử dụng mã vạch để thiết lập các mối quan hệ xã hội trên các ứng dụng nhắn tin.
  • Ứng dụng mua sắm có thể cho phép người dùng quét mã vạch EAN hoặc UPC của các mặt hàng trong một cửa hàng thực tế để so sánh giá trực tuyến.
  • Các sân bay có thể cung cấp ki-ốt trên web để hành khách có thể quét mã Aztec trên thẻ lên máy bay để xem thông tin riêng liên quan đến chuyến bay của họ.

Phát hiện văn bản

  • Các trang mạng xã hội trực tuyến có thể cải thiện khả năng tiếp cận nội dung hình ảnh do người dùng tạo bằng cách thêm văn bản được phát hiện làm thuộc tính alt cho thẻ <img> khi không có nội dung mô tả nào khác.
  • Các trang web nội dung có thể sử dụng tính năng phát hiện văn bản để tránh đặt tiêu đề lên trên hình ảnh chính có chứa văn bản.
  • Các ứng dụng web có thể sử dụng tính năng phát hiện văn bản để dịch văn bản, chẳng hạn như thực đơn nhà hàng.

Trạng thái hiện tại

Bước Trạng thái
1. Tạo video giải thích Hoàn tất
2. Tạo bản nháp ban đầu của quy cách Hoàn tất
3. Thu thập ý kiến phản hồi và lặp lại quy trình thiết kế Đang tiến hành
4. Bản dùng thử theo nguyên gốc Hoàn tất
5. Chạy Phát hiện mã vạch Hoàn tất
Phát hiện khuôn mặt Đang tiến hành
Phát hiện văn bản Đang diễn ra

Cách sử dụng Shape Detection API

Nếu muốn thử nghiệm Shape Detection API cục bộ, hãy bật cờ #enable-experimental-web-platform-features trong about://flags.

Giao diện của cả 3 bộ nhận diện, FaceDetector, BarcodeDetector và TextDetector đều tương tự nhau. Tất cả đều cung cấp một phương thức không đồng bộ duy nhất có tên là detect(), nhận ImageBitmapSource làm dữ liệu đầu vào (tức là CanvasImageSource, Blob hoặc ImageData).

Đối với FaceDetector và BarcodeDetector, các tham số không bắt buộc có thể được truyền đến hàm khởi tạo của bộ nhận diện, cho phép cung cấp gợi ý cho các bộ nhận diện cơ bản.

Vui lòng kiểm tra kỹ ma trận hỗ trợ trong phần giải thích để biết thông tin tổng quan về các nền tảng.

Làm việc với BarcodeDetector

BarcodeDetector trả về các giá trị thô của mã vạch mà nó tìm thấy trong ImageBitmapSource và các hộp giới hạn, cũng như những thông tin khác như định dạng của mã vạch được phát hiện.

const barcodeDetector = new BarcodeDetector({
  // (Optional) A series of barcode formats to search for.
  // Not all formats may be supported on all platforms
  formats: [
    'aztec',
    'code_128',
    'code_39',
    'code_93',
    'codabar',
    'data_matrix',
    'ean_13',
    'ean_8',
    'itf',
    'pdf417',
    'qr_code',
    'upc_a',
    'upc_e'
  ]
});
try {
  const barcodes = await barcodeDetector.detect(image);
  barcodes.forEach(barcode => searchProductDatabase(barcode));
} catch (e) {
  console.error('Barcode detection failed:', e);
}

Làm việc với FaceDetector

FaceDetector luôn trả về các hộp giới hạn của khuôn mặt mà API này phát hiện được trong ImageBitmapSource. Tuỳ thuộc vào nền tảng, có thể có thêm thông tin về các điểm đánh dấu trên khuôn mặt như mắt, mũi hoặc miệng. Điều quan trọng cần lưu ý là API này chỉ phát hiện khuôn mặt. Tính năng này không xác định khuôn mặt thuộc về ai.

const faceDetector = new FaceDetector({
  // (Optional) Hint to try and limit the amount of detected faces
  // on the scene to this maximum number.
  maxDetectedFaces: 5,
  // (Optional) Hint to try and prioritize speed over accuracy
  // by, e.g., operating on a reduced scale or looking for large features.
  fastMode: false
});
try {
  const faces = await faceDetector.detect(image);
  faces.forEach(face => drawMustache(face));
} catch (e) {
  console.error('Face detection failed:', e);
}

Làm việc với TextDetector

TextDetector luôn trả về các hộp giới hạn của văn bản được phát hiện và các ký tự được nhận dạng trên một số nền tảng.

const textDetector = new TextDetector();
try {
  const texts = await textDetector.detect(image);
  texts.forEach(text => textToSpeech(text));
} catch (e) {
  console.error('Text detection failed:', e);
}

Phát hiện đối tượng

Chỉ kiểm tra sự tồn tại của các hàm khởi tạo để phát hiện tính năng của Shape Detection API là không đủ. Sự hiện diện của một giao diện không cho bạn biết liệu nền tảng cơ bản có hỗ trợ tính năng này hay không. Tính năng này hoạt động như dự kiến. Đó là lý do bạn nên sử dụng phương pháp lập trình phòng thủ bằng cách thực hiện tính năng phát hiện như sau:

const supported = await (async () => 'FaceDetector' in window &&
    await new FaceDetector().detect(document.createElement('canvas'))
    .then(_ => true)
    .catch(e => e.name === 'NotSupportedError' ? false : true))();

Giao diện BarcodeDetector đã được cập nhật để có thêm phương thức getSupportedFormats() và các giao diện tương tự đã được đề xuất cho FaceDetector và cho TextDetector.

await BarcodeDetector.getSupportedFormats();
/* On a macOS computer logs
  [
    "aztec",
    "code_128",
    "code_39",
    "code_93",
    "data_matrix",
    "ean_13",
    "ean_8",
    "itf",
    "pdf417",
    "qr_code",
    "upc_e"
  ]
*/

Điều này cho phép bạn phát hiện tính năng cụ thể mà bạn cần, chẳng hạn như quét mã QR:

if (('BarcodeDetector' in window) &&
    ((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) {
  console.log('QR code scanning is supported.');
}

Cách này tốt hơn so với việc ẩn các giao diện vì ngay cả trên các nền tảng, khả năng có thể khác nhau và do đó, nhà phát triển nên được khuyến khích kiểm tra chính xác khả năng (chẳng hạn như một định dạng mã vạch cụ thể hoặc điểm đánh dấu trên khuôn mặt) mà họ yêu cầu.

Hỗ trợ hệ điều hành

Tính năng phát hiện mã vạch có trên macOS, ChromeOS và Android. Dịch vụ Google Play là yêu cầu bắt buộc trên Android.

Các phương pháp hay nhất

Tất cả các bộ nhận diện đều hoạt động không đồng bộ, tức là chúng không chặn luồng chính. Vì vậy, đừng dựa vào tính năng phát hiện theo thời gian thực mà hãy dành một chút thời gian để bộ phát hiện thực hiện công việc của mình.

Nếu là người hâm mộ Web Workers, bạn sẽ rất vui khi biết rằng các trình phát hiện cũng được hiển thị ở đó. Kết quả phát hiện có thể được chuyển đổi tuần tự và do đó có thể được truyền từ worker sang ứng dụng chính thông qua postMessage(). Bản minh hoạ cho thấy ví dụ thực tế.

Không phải mọi hoạt động triển khai nền tảng đều hỗ trợ tất cả các tính năng, vì vậy, hãy nhớ kiểm tra kỹ tình trạng hỗ trợ và sử dụng API này như một tính năng nâng cao tăng dần. Ví dụ: một số nền tảng có thể hỗ trợ tính năng phát hiện khuôn mặt, nhưng không hỗ trợ tính năng phát hiện điểm đánh dấu trên khuôn mặt (mắt, mũi, miệng, v.v.); hoặc hệ thống có thể nhận dạng sự tồn tại và vị trí của văn bản, nhưng không nhận dạng nội dung văn bản.

Phản hồi

Nhóm Chrome và cộng đồng tiêu chuẩn web muốn biết về trải nghiệm của bạn với Shape Detection API.

Hãy cho chúng tôi biết về thiết kế API

Có vấn đề gì về API khiến bạn không hài lòng không? Hoặc có phương thức hoặc thuộc tính nào bị thiếu mà bạn cần triển khai ý tưởng của mình không? Bạn có câu hỏi hoặc bình luận về mô hình bảo mật?

Bạn gặp vấn đề khi triển khai?

Bạn có phát hiện thấy lỗi trong quá trình triển khai của Chrome không? Hay việc triển khai có khác với quy cách không?

Bạn đang lên kế hoạch sử dụng API này?

Bạn có dự định sử dụng Shape Detection API trên trang web của mình không? Sự ủng hộ công khai của bạn giúp chúng tôi ưu tiên các tính năng và cho các nhà cung cấp trình duyệt khác thấy tầm quan trọng của việc hỗ trợ các tính năng này.

Đường liên kết hữu ích