Shape Detection API จะตรวจจับใบหน้า บาร์โค้ด และข้อความในรูปภาพ
Shape Detection API คืออะไร
ด้วย API เช่น navigator.mediaDevices.getUserMedia
และ Chrome สำหรับ Android
เครื่องมือเลือกรูปภาพ
การจับภาพหรือข้อมูลวิดีโอสดจากอุปกรณ์นั้นกลายเป็นเรื่องง่าย
หรืออัปโหลดรูปภาพในเครื่อง ข้อมูลรูปภาพแบบไดนามิกนี้ รวมถึง
ภาพนิ่งในหน้าเว็บ ซึ่งไม่สามารถเข้าถึงได้ด้วยโค้ด แม้ว่า
อาจมีคุณลักษณะที่น่าสนใจมากมาย เช่น ใบหน้า
บาร์โค้ด และข้อความ
เช่น ในอดีต หากนักพัฒนาแอปต้องการแยกฟีเจอร์ดังกล่าวในเวอร์ชัน
เพื่อสร้างโปรแกรมอ่านโค้ด QR พวกเขาต้อง
ที่ต้องอาศัยไลบรารี JavaScript ภายนอก ซึ่งอาจมีราคาแพงจาก
มุมมองด้านประสิทธิภาพ และเพิ่มน้ำหนักโดยรวมของหน้าเว็บ ในอีกทาง
ระบบปฏิบัติการ ซึ่งรวมถึง Android, iOS และ macOS แต่รวมถึงฮาร์ดแวร์ด้วย
ชิปที่พบในโมดูลกล้อง มักมีประสิทธิภาพดีอยู่แล้ว
ตัวตรวจจับฟีเจอร์ที่เพิ่มประสิทธิภาพ เช่น Android
FaceDetector
หรือตัวตรวจจับคุณลักษณะทั่วไปของ iOS
CIDetector
Shape Detection API เปิดเผยข้อมูลการใช้งานเหล่านี้ผ่าน
ชุดของอินเทอร์เฟซ JavaScript ปัจจุบัน ฟีเจอร์ที่รองรับได้แก่
ผ่านอินเทอร์เฟซ FaceDetector
การตรวจหาบาร์โค้ดผ่านทาง
อินเทอร์เฟซ BarcodeDetector
และข้อความ (อักขระแบบออปติคัล)
การจดจำ (OCR) ผ่านอินเทอร์เฟซ TextDetector
Use Case ที่แนะนำ
ตามที่ระบุไว้ข้างต้น ปัจจุบัน Shape Detection API รองรับการตรวจหา ทั้งใบหน้า บาร์โค้ด และข้อความ รายการหัวข้อย่อยต่อไปนี้มีตัวอย่าง ของกรณีการใช้งานสำหรับฟีเจอร์ทั้ง 3 รายการ
การตรวจจับใบหน้า
- โดยทั่วไป เว็บไซต์โซเชียลเน็ตเวิร์กหรือการแชร์ภาพถ่ายออนไลน์ช่วยให้ผู้ใช้ ใส่คำอธิบายประกอบในรูปภาพ การไฮไลต์ขอบเขตของใบหน้าที่ตรวจพบ งานนี้อาจช่วยอำนวยความสะดวกได้
- เว็บไซต์เนื้อหาสามารถครอบตัดรูปภาพแบบไดนามิกโดยอิงตามสิ่งที่ตรวจพบได้ ใบหน้าของคุณมากกว่าการพึ่งพาวิธีการอื่นๆ หรือไฮไลต์ใบหน้าที่ตรวจพบ มีลักษณะคล้าย Ken Burns เอฟเฟกต์แบบเลื่อนและซูมในรูปแบบที่เหมือนเรื่องราว
- ไซต์รับส่งข้อความมัลติมีเดียช่วยให้ผู้ใช้สามารถวางซ้อนวัตถุตลกๆ เช่น แว่นกันแดดหรือหนวด ในจุดสังเกตของใบหน้าที่ตรวจพบ
การตรวจหาบาร์โค้ด
- เว็บแอปพลิเคชันที่อ่านคิวอาร์โค้ดสามารถปลดล็อกกรณีการใช้งานที่น่าสนใจได้ เช่น การชำระเงินออนไลน์หรือการนำทางเว็บ หรือใช้บาร์โค้ดเพื่อสร้างสังคมออนไลน์ การเชื่อมต่อในแอปพลิเคชันเมสเซนเจอร์
- แอปช็อปปิ้งช่วยให้ผู้ใช้สแกนได้ EAN หรือ บาร์โค้ด UPC ของ สินค้าในกิจการที่มีหน้าร้านจริงเพื่อเปรียบเทียบราคาทางออนไลน์
- สนามบินมีเว็บคีออสก์ที่ผู้โดยสารสามารถสแกนบอร์ดดิ้งพาสได้ บัตร รหัสแอซเท็กที่จะแสดง ที่เกี่ยวข้องกับเที่ยวบินของตน
การตรวจจับข้อความ
- ไซต์เครือข่ายสังคมออนไลน์สามารถช่วยเพิ่มการเข้าถึง
เนื้อหารูปภาพที่ผู้ใช้สร้างขึ้นโดยการเพิ่มข้อความที่ตรวจพบเป็นแอตทริบิวต์
alt
สำหรับแท็ก<img>
เมื่อไม่ได้ระบุคำอธิบายอื่นๆ - เว็บไซต์เนื้อหาสามารถใช้การตรวจจับข้อความเพื่อหลีกเลี่ยงการวางหัวเรื่องไว้ที่ด้านบนของ รูปภาพหลักพร้อมด้วยข้อความที่มีอยู่
- เว็บแอปพลิเคชันสามารถใช้การตรวจจับข้อความเพื่อแปลข้อความได้ เช่น เช่น เมนูอาหารของร้าน
สถานะปัจจุบัน
ขั้นตอน | สถานะ |
---|---|
1. สร้างคำอธิบาย | เสร็จสมบูรณ์ |
2. สร้างข้อกำหนดคร่าวๆ เบื้องต้น | เสร็จสมบูรณ์ |
3. รวบรวมความคิดเห็นและ ทำซ้ำในการออกแบบ | กำลังดำเนินการ |
4. ช่วงทดลองใช้จากต้นทาง | เสร็จสมบูรณ์ |
5. เปิดตัว | การตรวจหาบาร์โค้ด เสร็จสมบูรณ์ |
การตรวจจับใบหน้าอยู่ระหว่างดำเนินการ | |
การตรวจหาข้อความอยู่ระหว่างดำเนินการ |
วิธีใช้ Shape Detection API
หากต้องการทดสอบกับ Shape Detection API ในเครื่อง
เปิดใช้ #enable-experimental-web-platform-features
ธงในabout://flags
อินเทอร์เฟซของตัวตรวจจับทั้ง 3 รายการ ได้แก่ FaceDetector
, BarcodeDetector
และ
TextDetector
มีความคล้ายคลึงกัน ทุกเมตริกจะมีเมธอดแบบไม่พร้อมกันเพียงวิธีเดียว
ที่เรียกว่า detect()
ที่ใช้เวลา
ImageBitmapSource
เป็นอินพุต (ซึ่งก็คือ
CanvasImageSource
,
Blob
หรือ
ImageData
)
สำหรับ FaceDetector
และ BarcodeDetector
พารามิเตอร์ที่ไม่บังคับสามารถส่งได้
ให้กับเครื่องมือสร้างของตัวตรวจจับ ซึ่งช่วยให้สามารถให้คำแนะนำ
ตัวตรวจจับพื้นฐาน
โปรดตรวจสอบเมทริกซ์การสนับสนุนใน คำอธิบายสำหรับ ของแพลตฟอร์มต่างๆ
ทํางานร่วมกับ BarcodeDetector
BarcodeDetector
จะแสดงผลค่าดิบของบาร์โค้ดที่พบในไฟล์
ImageBitmapSource
และกรอบล้อมรอบ รวมถึงข้อมูลอื่นๆ เช่น
รูปแบบของบาร์โค้ดที่ตรวจพบ
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);
}
ทํางานร่วมกับ FaceDetector
FaceDetector
จะแสดงกรอบล้อมรอบของใบหน้าที่ตรวจพบเสมอ
ImageBitmapSource
ข้อมูลเพิ่มเติมขึ้นอยู่กับแพลตฟอร์ม
เกี่ยวกับจุดสังเกตของใบหน้า เช่น ตา จมูก หรือปาก
โปรดทราบว่า API นี้ตรวจจับเฉพาะใบหน้าเท่านั้น
แต่ไม่ได้ระบุว่าใบหน้าเป็นของใคร
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);
}
ทํางานร่วมกับ TextDetector
TextDetector
จะแสดงกรอบล้อมรอบของข้อความที่ตรวจพบเสมอ
และในบางแพลตฟอร์ม
จะมีตัวละครที่เป็นที่รู้จัก
const textDetector = new TextDetector();
try {
const texts = await textDetector.detect(image);
texts.forEach(text => textToSpeech(text));
} catch (e) {
console.error('Text detection failed:', e);
}
การตรวจหาฟีเจอร์
การตรวจสอบการมีอยู่ของผู้สร้างอย่างแท้จริงเพื่อตรวจหา Shape Detection API ยังไม่เพียงพอ การมีอินเทอร์เฟซไม่ได้บอกคุณว่าแพลตฟอร์มที่สำคัญรองรับฟีเจอร์นี้หรือไม่ ซึ่งทำงานได้ตามที่ตั้งใจไว้ นี่เป็นเหตุผลที่เราแนะนำแนวทางการป้องกันโปรแกรมโดยการตรวจหาฟีเจอร์ ดังนี้
const supported = await (async () => 'FaceDetector' in window &&
await new FaceDetector().detect(document.createElement('canvas'))
.then(_ => true)
.catch(e => e.name === 'NotSupportedError' ? false : true))();
อัปเดตอินเทอร์เฟซ BarcodeDetector
ให้มีเมธอด getSupportedFormats()
แล้ว
และมีการเสนออินเทอร์เฟซที่คล้ายกัน
สำหรับ FaceDetector
และ
สำหรับ 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"
]
*/
ซึ่งจะช่วยให้คุณตรวจหาฟีเจอร์ที่ต้องการได้ เช่น การสแกนคิวอาร์โค้ด
if (('BarcodeDetector' in window) &&
((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) {
console.log('QR code scanning is supported.');
}
วิธีนี้ดีกว่าการซ่อนอินเทอร์เฟซเพราะแม้จะอยู่ข้ามแพลตฟอร์ม แต่ความสามารถอาจแตกต่างกันไป ดังนั้น นักพัฒนาซอฟต์แวร์จึงควรตรวจสอบหาความสามารถ (เช่น บาร์โค้ดบางรูปแบบหรือจุดสังเกตบนใบหน้า) ที่ต้องการ
การรองรับระบบปฏิบัติการ
การตรวจหาบาร์โค้ดมีให้ใช้งานใน macOS, ChromeOS และ Android บริการ Google Play ใน Android เท่านั้น
แนวทางปฏิบัติแนะนำ
ตัวตรวจจับทั้งหมดจะทำงานไม่พร้อมกัน กล่าวคือ ตัวตรวจจับจะไม่บล็อก ชุดข้อความ ดังนั้นอย่าพึ่งพาการตรวจจับแบบเรียลไทม์ แต่ให้อนุญาต เวลาที่ตัวตรวจจับจะทำงาน
หากคุณเป็นแฟนของ
Web Worker
เธอย่อมดีใจที่ได้รู้ว่ามีตัวตรวจจับ
อยู่ในนั้นด้วย
ผลการตรวจจับสามารถทำให้ต่อเนื่องได้และจึงสามารถส่งผ่านจากผู้ปฏิบัติงานได้
ไปยังแอปหลักผ่าน postMessage()
การสาธิตจะแสดงการทำงานนี้
การใช้งานแพลตฟอร์มบางอย่างไม่ได้รองรับฟีเจอร์ทั้งหมด ดังนั้นโปรดตรวจสอบ สถานการณ์การสนับสนุนอย่างรอบคอบ และใช้ API เป็นแบบโพรเกรสซีฟ ของคุณ เช่น บางแพลตฟอร์มอาจรองรับการตรวจจับใบหน้า ต่อการตรวจจับ แต่ไม่ตรวจจับจุดสังเกตที่ใบหน้า (ตา จมูก ปาก ฯลฯ) หรือ อาจมีการรู้จักการมีอยู่และตำแหน่งของข้อความ แต่ไม่ใช่เนื้อหาข้อความ
ความคิดเห็น
ทีมงาน Chrome และชุมชนมาตรฐานเว็บต้องการทราบเกี่ยวกับ กับ Shape Detection API
บอกเราเกี่ยวกับการออกแบบ API
มีบางอย่างเกี่ยวกับ API ที่ไม่ทำงานตามที่คุณคาดหวังหรือไม่ หรือ มีวิธีหรือคุณสมบัติที่ขาดไปที่คุณจำเป็นต้องใช้ ไอเดียของคุณ หากมีคำถามหรือความคิดเห็นเกี่ยวกับรูปแบบการรักษาความปลอดภัย
- แจ้งปัญหาเกี่ยวกับที่เก็บ GitHub ของ Shape Detection API หรือเพิ่มความคิดของคุณลงในปัญหาที่มีอยู่
หากมีปัญหาในการติดตั้งใช้งาน
คุณพบข้อบกพร่องในการติดตั้งใช้งาน Chrome ไหม หรือเป็นการติดตั้งใช้งาน แตกต่างจากข้อกำหนด
- รายงานข้อบกพร่องที่ https://new.crbug.com ตรวจสอบว่าได้ระบุเป็น
รายละเอียดมากที่สุดเท่าที่ทำได้ วิธีการง่ายๆ ในการทำซ้ำ และตั้งค่า
คอมโพเนนต์เป็น
Blink>ImageCapture
ภาพแตก เหมาะอย่างยิ่งสำหรับการแชร์ซ้ำที่ง่ายและรวดเร็ว
หากกำลังวางแผนที่จะใช้ API
หากวางแผนจะใช้ Shape Detection API ในเว็บไซต์ การสนับสนุนแบบสาธารณะ ช่วยให้เราสามารถจัดลำดับความสำคัญของคุณลักษณะต่างๆ และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นเห็นถึงวิธีการ ที่สำคัญคือต้องสนับสนุนพวกเขา
- แชร์วิธีที่คุณวางแผนจะใช้ในชุดข้อความของ WICG Discourse
- ส่งทวีตไปยัง @ChromiumDev โดยใช้แฮชแท็ก
#ShapeDetection
และแจ้งให้เราทราบถึงตำแหน่งและวิธีที่คุณใช้งาน
ลิงก์ที่มีประโยชน์
- คำอธิบายแบบสาธารณะ
- การสาธิต API | แหล่งที่มาการสาธิต API
- ข้อบกพร่องในการติดตาม
- รายการ ChromeStatus.com
- คอมโพเนนต์การกะพริบ:
Blink>ImageCapture