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

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

Thomas Steiner

API Phát hiện hình dạng là gì?

Với các API như navigator.mediaDevices.getUserMedia và trình chọn ảnh của Chrome cho Android, bạn có thể dễ dàng chụp ảnh hoặc quay video trực tiếp từ máy ảnh của thiết bị hoặc tải ảnh cục bộ lên. 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 tính năng thú vị như khuôn mặt, mã vạch và văn bản.

Ví dụ: trước đây, nếu nhà phát triển muốn trích xuất các tính năng như vậy trên ứng dụng để tạo trình đọc mã QR, họ 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 tổng trọng lượng trang. Mặt khác, các hệ điều hành bao gồm Android, iOS và macOS, cũng như các khối phần cứng có trong mô-đun máy ảnh, thường đã có trình phát hiện tính năng hiệu quả và được tối ưu hoá cao, chẳng hạn như FaceDetector của Android hoặc trình phát hiện tính năng chung của iOS, CIDetector.

API Phát hiện hình dạng hiển thị các phương thức triển khai này thông qua một nhóm 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ư đã nêu ở trên, API Phát hiện hình dạng hiện hỗ trợ phát hiện khuôn mặt, mã vạch và văn bản. Danh sách dấu đầu dòng sau đây chứa ví dụ về các trường hợp sử dụng cho cả ba tính năng.

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

  • Các trang web mạng xã hội hoặc trang web chia sẻ ảnh 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ể hỗ trợ việc này.
  • Các trang web nội dung có thể tự động cắt hình ảnh 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 kéo và thu phóng giống như Ken Burns ở đị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 đặc trưng trên khuôn mặt đã phát hiện.

Phát hiện mã vạch

  • Các ứng dụng web đọc mã QR có thể mở ra các trường hợp sử dụng thú vị như thanh toán trực tuyến hoặc điều hướng web, hoặc sử dụng mã vạch để thiết lập kết nối 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 cửa hàng thực tế để so sánh giá trực tuyến.
  • Sân bay có thể cung cấp các ki-ốt web để hành khách quét mã Aztec trên thẻ lên máy bay để hiển thị thông tin cá nhân 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 hỗ trợ tiếp cận của 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 dưới dạng 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 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
Tính năng phát hiện khuôn mặt Đang diễn ra
Tính năng phát hiện văn bản Đang diễn ra

Cách sử dụng API Phát hiện hình dạng

Nếu bạn muốn thử nghiệm với API Phát hiện hình dạng trên máy, hãy bật cờ #enable-experimental-web-platform-features trong about://flags.

Giao diện của cả ba trình phát hiệ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(). Phương thức này lấy ImageBitmapSource làm dữ liệu đầu vào (tức là CanvasImageSource, Blob hoặc ImageData).

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

Vui lòng kiểm tra kỹ ma trận hỗ trợ trong bài viết 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ư các 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à nó phát hiện trong ImageBitmapSource. Tuỳ thuộc vào nền tảng, có thể có thêm thông tin về các điểm đặc trưng 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. Công nghệ này không xác định được 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 đã phát hiện và trên một số nền tảng là các ký tự được nhận dạ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 tính năng

Chỉ kiểm tra sự tồn tại của hàm khởi tạo để phát hiện tính năng API phát hiện hình dạng là chưa đủ. Việc có 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. Cơ chế này đang 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 phát hiện tính năng 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 để bao gồ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, ví dụ: 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 giao diện vì ngay cả trên các nền tảng, các chức năng cũng có thể khác nhau. Vì vậy, nhà phát triển nên kiểm tra chính xác chức năng (chẳng hạn như định dạng mã vạch cụ thể hoặc điểm đánh dấu 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 hoạt động trên macOS, ChromeOS và Android. Bạn cần có Dịch vụ Google Play trên Android.

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

Tất cả các trình phát hiện đều hoạt động không đồng bộ, tức là 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 để trình phát hiện thực hiện công việc của mình.

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

Không phải cách triển khai nền tảng nào cũng hỗ trợ tất 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 làm tính năng nâng cao dần 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 đặc trưng trên khuôn mặt (mắt, mũi, miệng, v.v.); hoặc 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 được 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 API Phát hiện hình dạng.

Giới thiệu cho chúng tôi về thiết kế API

API có hoạt động như mong đợi không? Hay bạn còn thiếu phương thức hoặc thuộc tính nào cần thiết để triển khai ý tưởng của mình? Bạn có câu hỏi hoặc nhận xét 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 lỗi khi triển khai Chrome không? Hay cách triển khai khác với thông số kỹ thuật?

  • Gửi lỗi tại https://new.crbug.com. Hãy nhớ cung cấp càng nhiều thông tin chi tiết càng tốt, hướng dẫn đơn giản để tái tạo và đặt Components (Thành phần) thành Blink>ImageCapture. Glitch rất hữu ích để chia sẻ các bản tái hiện nhanh chóng và dễ dàng.

Bạn có dự định sử dụng API này không?

Bạn có dự định sử dụng API Phát hiện hình dạng 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 đó.

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