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à công cụ chọn ảnh của Chrome dành cho Android, bạn có thể dễ dàng chụp ảnh/dữ liệu video trực tiếp từ máy ảnh của thiết bị hoặc tải hình ảnh trên máy lên. Cho đến nay, dữ liệu hình ảnh động này (cũng như hình ảnh tĩnh trên một trang) vẫn chưa thể truy cập được bằng mã, mặc dù hình ảnh thực sự có thể chứa nhiều đặc điểm 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 ứng dụng khách để tạo trình đọc mã QR, thì họ phải dựa vào thư viện JavaScript bên ngoài. Xét về hiệu suất thì việc này có thể gây tốn kém và có thể làm tăng trọng số tổng thể của trang. Mặt khác, các hệ điều hành bao gồm Android, iOS và macOS cũng như các chip phần cứng trong các mô-đun máy ảnh, thường đã có các trình phát hiện tính năng hoạt động hiệu quả và được tối ưu hoá cao như Android FaceDetector hoặc trình phát hiện tính năng chung dành cho iOS CIDetector.

API Phát hiện hình dạng cho thấy những cách triển khai này thông qua một tập hợp các 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.

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

Như trình bày ở trên, API Phát hiện hình dạng hiện hỗ trợ tính năng 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 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 mọi người trong hình ả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ợ nhiệm vụ này.
  • Các trang web nội dung có thể tự động cắt hình ảnh dựa trên các khuôn mặt có khả năng phát hiện được thay vì dựa vào các thông tin 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 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 vật thể vui nhộn như kính râm hoặc ria mép lên các điểm mốc trên 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 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 tại cửa hàng thực tế để so sánh giá trên mạng.
  • Sân bay có thể cung cấp các quầy trên web để hành khách quét mã Aztec của thẻ lên máy bay để hiện thông tin được cá nhân hoá liên quan đến chuyến bay của họ.

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

  • Các trang web 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 phát hiện được dưới dạng thuộc tính alt cho các thẻ <img> khi không có nội dung mô tả nào khác được cung cấp.
  • 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 đề ở đầu hình ảnh chính có chứa văn bản.
  • Các ứng dụng web có thể 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 của nhà hàng.

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

Bước Trạng thái
1. Tạo thông báo 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à cải tiến thiết kế Đang tiến hành
4. Bản dùng thử theo nguyên gốc Hoàn tất
5. Ra mắt Phát hiện mã vạch Hoàn tất
Đang bật tính năng phát hiện khuôn mặt
Đang phát hiện văn bản

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

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

Giao diện của cả 3 trình phát hiện (FaceDetector, BarcodeDetector và TextDetector) là 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 đến hàm khởi tạo của trình phát hiện, cho phép đưa ra gợi ý cho các trình phát hiện cơ sở.

Vui lòng xem kỹ ma trận hỗ trợ trong nội dung 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 tìm thấy trong ImageBitmapSource và hộp giới hạn, cũng như các thông tin khác như định dạng của các mã vạch đã 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ề hộp giới hạn các khuôn mặt mà nó phát hiện trong ImageBitmapSource. Tuỳ thuộc vào nền tảng, có thêm thông tin về các điểm mốc 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. Hệ thống 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 các văn bản đã phát hiện và các ký tự được xác định 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 tính năng

Nếu chỉ kiểm tra sự tồn tại của các hàm khởi tạo để tính năng phát hiện API Phát hiện hình dạng thì chưa đủ. Sự hiện diện của 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 đang hoạt động như dự kiến. Đó là lý do tại sao 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))();

Cập nhật giao diện BarcodeDetector để bao gồm một 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"
  ]
*/

Nhờ vậy, bạn có thể 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 hiệu quả hơn việc ẩn giao diện vì ngay cả trên nhiều 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 những chức năng (chẳng hạn như một định dạng mã vạch hoặc điểm mốc trên khuôn mặt cụ thể) 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. 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 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 đợi một khoảng thời gian để trình phát hiện hoạt động.

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ể 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 ví dụ này trong thực tế.

Không phải phương thức 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 huống hỗ trợ và sử dụng API 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 cho mỗi người nhưng không hỗ trợ tính năng phát hiện điểm mốc (mắt, mũi, miệng, v.v.); hoặc có thể nhận dạng được 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.

Ý kiế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.

Cho chúng tôi biết về thiết kế của API

Có điều gì về API không hoạt động như bạn mong đợi không? Hay 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 không? 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 thấy lỗi khi triển khai Chrome không? Hay cách triển khai có khác với thông số kỹ thuật không?

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

Bạn định sử dụng API?

Bạn định sử dụng API Phát hiện hình dạng trên trang web của mình? Dịch vụ hỗ trợ công khai của bạn giúp chúng tôi ưu tiên các tính năng, đồng thời cho các nhà cung cấp trình duyệt khác biết tầm quan trọng của việc hỗ trợ họ.

Các đường liên kết hữu ích