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
, BarcodeDetector
và
TextDetector
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 FaceDetector
và BarcodeDetector
, 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 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"
]
*/
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áo cáo vấn đề về thông số kỹ thuật trên kho lưu trữ GitHub API Phát hiện hình dạng, hoặc thêm ý kiến về vấn đề hiện có.
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ọ.
- Chia sẻ cách bạn dự định sử dụng tài khoản này trên chuỗi bài thuyết trình về WICG.
- Gửi một bài đăng đến @ChromiumDev kèm theo hashtag
#ShapeDetection
đồng thời cho chúng tôi biết bạn đang sử dụng ở đâu và như thế nào.
Các đường liên kết hữu ích
- Thông báo giải thích công khai
- Bản minh hoạ API | Nguồn minh hoạ API
- Theo dõi lỗi
- Mục ChromeStatus.com
- Thành phần nháy:
Blink>ImageCapture