Shape Detection API: ภาพหนึ่งภาพแทนคำ ใบหน้า และบาร์โค้ดได้หลายพันรายการ

Shape Detection API จะตรวจจับใบหน้า บาร์โค้ด และข้อความในรูปภาพ

โธมัส สไตน์เนอร์

Shape Detection API คืออะไร

API อย่าง navigator.mediaDevices.getUserMedia และเครื่องมือเลือกรูปภาพ Chrome สำหรับ Android ช่วยให้การจับภาพหรือข้อมูลวิดีโอสดจากกล้องของอุปกรณ์ หรืออัปโหลดรูปภาพในเครื่องเป็นเรื่องง่ายขึ้นมาก จนถึงตอนนี้ ข้อมูลรูปภาพแบบไดนามิกนี้ รวมถึงภาพนิ่งบนหน้าเว็บยังไม่สามารถเข้าถึงได้ด้วยโค้ด แม้ว่าจริงๆ แล้วรูปภาพอาจมีคุณลักษณะที่น่าสนใจมากมาย เช่น ใบหน้า บาร์โค้ด และข้อความ

เช่น ที่ผ่านมา หากนักพัฒนาซอฟต์แวร์ต้องการแยกฟีเจอร์ดังกล่าวไว้ในไคลเอ็นต์เพื่อสร้างโปรแกรมอ่านคิวอาร์โค้ด นักพัฒนาแอปจะต้องอาศัยไลบรารี JavaScript ภายนอก ในแง่ประสิทธิภาพนั้นอาจทำให้หน้าเว็บมีต้นทุนสูงและจะทำให้หน้าเว็บมีน้ำหนักโดยรวมเพิ่มขึ้น ในทางกลับกัน ระบบปฏิบัติการอย่าง Android, iOS และ macOS รวมถึงชิปฮาร์ดแวร์ที่พบในโมดูลกล้องมักจะมีตัวตรวจจับฟีเจอร์ที่มีประสิทธิภาพและเพิ่มประสิทธิภาพอยู่แล้ว เช่น Android FaceDetector หรือตัวตรวจจับฟีเจอร์ทั่วไปของ iOS CIDetector

Shape Detection API แสดงการติดตั้งใช้งานเหล่านี้ผ่านชุดอินเทอร์เฟซ JavaScript ปัจจุบันฟีเจอร์ที่รองรับ ได้แก่ การตรวจจับใบหน้าผ่านอินเทอร์เฟซ FaceDetector, การตรวจจับบาร์โค้ดผ่านอินเทอร์เฟซ BarcodeDetector และการตรวจจับข้อความ (Optical ตัวละคร Recognition (OCR)) ผ่านอินเทอร์เฟซ TextDetector

กรณีการใช้งานที่แนะนำ

ตามที่ระบุไว้ข้างต้น ขณะนี้ 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 Workers คุณก็คงยินดีที่จะรู้ว่ามีตัวตรวจจับอยู่ในนั้นด้วย ผลการตรวจหาสามารถทำให้เป็นอนุกรมได้ ดังนั้นจึงสามารถส่งจากผู้ปฏิบัติงานไปยังแอปหลักผ่าน postMessage() ได้ การสาธิตจะแสดงการทำงานนี้

การใช้งานแพลตฟอร์มบางรายการอาจไม่รองรับบางฟีเจอร์ ดังนั้น โปรดตรวจสอบสถานการณ์การสนับสนุนอย่างรอบคอบและใช้ API เพื่อเพิ่มประสิทธิภาพอย่างต่อเนื่อง ตัวอย่างเช่น บางแพลตฟอร์มอาจรองรับการตรวจจับใบหน้าทุกๆ รายการ แต่ไม่รองรับการตรวจจับใบหน้าจุดสังเกต (ตา จมูก ปาก ฯลฯ) หรือระบบอาจจดจำการมีอยู่และตำแหน่งของข้อความได้ แต่ไม่ใช่เนื้อหาข้อความ

ความคิดเห็น

ทีม Chrome และชุมชนมาตรฐานเว็บต้องการทราบข้อมูลเกี่ยวกับประสบการณ์การใช้งาน Shape Detection API

บอกให้เราทราบเกี่ยวกับการออกแบบ API

มีบางอย่างเกี่ยวกับ API ที่ไม่เป็นไปตามที่คุณคาดหวังไหม หรือมีวิธีหรือพร็อพเพอร์ตี้ที่ขาดหายที่คุณต้องนำไอเดียไปใช้ไหม หากมีคำถามหรือความคิดเห็นเกี่ยวกับรูปแบบความปลอดภัย

พบปัญหาในการติดตั้งใช้งานใช่ไหม

คุณพบข้อบกพร่องในการใช้งาน Chrome หรือไม่ หรือการใช้งานแตกต่างจาก ข้อกำหนดหรือไม่

  • รายงานข้อบกพร่องที่ https://new.crbug.com อย่าลืมใส่รายละเอียดให้มากที่สุด วิธีการง่ายๆ ในการทำซ้ำ และตั้งค่าคอมโพเนนต์เป็น Blink>ImageCapture Glitch เหมาะสำหรับการแชร์การดำเนินการซ้ำที่ง่ายและรวดเร็ว

หากวางแผนจะใช้ API

หากวางแผนจะใช้ Shape Detection API ในเว็บไซต์ การสนับสนุนสาธารณะของคุณช่วยให้เราสามารถจัดลำดับความสำคัญของคุณลักษณะ และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนคุณลักษณะดังกล่าวสำคัญเพียงใด

ลิงก์ที่มีประโยชน์