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.

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

Với các API như navigator.mediaDevices.getUserMedia và Chrome dành cho Android công cụ chọn ảnh, việc chụp ảnh hoặc dữ liệu video trực tiếp từ thiết bị trở nên khá dễ dàng camera hoặc để tải lên hình ảnh cục bộ. Cho đến nay, dữ liệu hình ảnh linh hoạt này—cũng như hình ảnh tĩnh trên một trang – không thể truy cập được bằng mã, mặc dù hình ảnh 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 khách hàng xây dựng một trình đọc mã QR, họ đã dựa vào các thư viện JavaScript bên ngoài. Điều này có thể tốn kém do quan điểm về hiệu suất và tăng trọng số tổng thể của trang. Mặt khác tay, hệ điều hành bao gồm Android, iOS và macOS, cũng như phần cứng các khối tìm thấy trong các mô-đun máy ảnh, thường đã có hiệu suất cao và các trình phát hiện tính năng được tối ưu hoá như Android FaceDetector 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 cho thấy những cách triển khai này thông qua một tập hợp giao diện JavaScript. Hiện tại, các tính năng được hỗ trợ là khuôn mặt phát hiện 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 (Ký tự quang học) Nhận dạng, (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, API Phát hiện hình dạng hiện hỗ trợ chức 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 trình bày các ví dụ 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 chia sẻ ảnh trực tuyến thường cho phép người dùng của họ chú thích mọi người trong hình ảnh. Bằng cách đánh dấu ranh giới của các khuôn mặt được phát hiện, thực hiện được 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 dữ liệu có thể phát hiện được khuôn mặt 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 các khuôn mặt được phát hiện có sự tương đồng với Ken Burns Hiệu ứng kéo và thu phóng ở định dạng giống như trong 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 trên các mốc 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ở khoá 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 mạng xã hội kết nối trên các ứng dụng nhắn tin.
  • Các ứng dụng mua sắm có thể cho phép người dùng quét mã EAN hoặc Mã vạch UPC của 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 kiosk trên web để hành khách có thể quét mã lên máy bay thẻ và vé Mã Aztec để hiển thị 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 truy cập 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 làm thuộc tính alt cho 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 đề lên đầu 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ư ví dụ: 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 thông số kỹ thuật 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. Ra mắt 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 tiến hành

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ộ API Phát hiện hình dạng, bật #enable-experimental-web-platform-features gắn cờ trong about://flags.

Giao diện của cả 3 trình phát hiện, FaceDetector, BarcodeDetectorTextDetector cũng tương tự. 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(). Quá trình này sẽ lấy một ImageBitmapSource làm đầu vào (tức là CanvasImageSource, một Blob hoặc ImageData).

Đối với FaceDetectorBarcodeDetector, bạn có thể chuyể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 để cho phép cung cấp gợi ý cho trình phát hiện bên dưới.

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

Làm việc với BarcodeDetector

BarcodeDetector trả về giá trị thô của mã vạch 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ư các định dạng mã vạch phát hiện được.

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 gồm các khuôn mặt mà nó phát hiện ImageBitmapSource. Bạn sẽ thấy thêm thông tin tuỳ thuộc vào nền tảng liên quan đến các mốc 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 được khuôn mặt của 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 ô giới hạn của văn bản đã phát hiện, và trên một số nền tảng, 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 các hàm dựng để phát hiện đặc điểm API Phát hiện hình dạng chưa đủ. Sự hiện diện của giao diện không cho bạn biết 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ự định. Đó là lý do tại sao chúng tôi đề xuất 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 để thêm phương thức getSupportedFormats() và các giao diện tương tự đã được đề xuất trong FaceDetectorcho 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"
  ]
*/

Tính năng này giú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.');
}

Phương pháp này hiệu quả hơn so với việc ẩn giao diện vì ngay cả trên nhiều nền tảng, tính năng vẫn có thể khác nhau do đó, nhà phát triển nên 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 mốc trên khuôn mặt) theo yêu cầu của họ.

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à 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à chúng không chặn chuỗi. 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 cho phép để trình phát hiện thực hiện công việc của mình.

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

Không phải mọi cách 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 tình huống hỗ trợ một cách cẩn thận và sử dụng API như một phương pháp nâng cao. 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 tự động, nhưng không phát hiện điểm mốc trên khuôn mặt (mắt, mũi, miệng, v.v.); hoặc sự tồn tại và vị trí của văn bản có thể được nhận biết, nhưng không thể 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ề với API Phát hiện hình dạng.

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

Có điều gì về API không hoạt động như bạn mong đợi không? Hoặc có thiếu phương thức hoặc thuộc tính nào mà bạn cần để triển khai ý tưởng? Bạn có câu hỏi hoặc nhận xét về mô hình bảo mật này?

Bạn gặp vấn đề trong quá trình triển khai?

Bạn có phát hiện lỗi trong quá trình triển khai Chrome không? Hoặc là triển khai 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 đảm bảo nhập dưới dạng càng chi tiết càng tốt, hướng dẫn đơn giản để tái tạo và thiết lập Thành phần sang Blink>ImageCapture. Nhỏm rất phù hợp để chia sẻ các bản lặp lại nhanh chóng và dễ dàng.

Dự định sử dụng API?

Bạn đang định sử dụng API Phát hiện hình dạng trên trang web của mình? Sự hỗ trợ công khai của bạn giúp chúng tôi sắp xếp mức độ ưu tiên cho các tính năng và cho các nhà cung cấp trình duyệt khác biết cách điều quan trọng là cần hỗ trợ họ.

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