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

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

Thomas Steiner

Shape Detection API คืออะไร

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

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

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

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

ดังที่ระบุไว้ข้างต้น ปัจจุบัน Shape Detection API รองรับการตรวจจับใบหน้า บาร์โค้ด และข้อความ รายการหัวข้อต่อไปนี้มีตัวอย่าง Use Case สำหรับฟีเจอร์ทั้ง 3 รายการ

การตรวจจับใบหน้า

  • เว็บไซต์โซเชียลเน็ตเวิร์กออนไลน์หรือเว็บไซต์การแชร์รูปภาพมักอนุญาตให้ผู้ใช้กำกับเนื้อหาเกี่ยวกับบุคคลในรูปภาพ การไฮไลต์ขอบเขตของใบหน้าที่ตรวจพบจะช่วยอำนวยความสะดวกในงานนี้
  • เว็บไซต์เนื้อหาสามารถครอบตัดรูปภาพแบบไดนามิกตามใบหน้าที่อาจตรวจพบแทนที่จะใช้วิธีการเดาอื่นๆ หรือไฮไลต์ใบหน้าที่ตรวจพบด้วยเอฟเฟกต์การแพนและซูมแบบ Ken Burns ในรูปแบบที่คล้ายกับเรื่องราว
  • เว็บไซต์การรับส่งข้อความมัลติมีเดียอนุญาตให้ผู้ใช้วางวัตถุตลกๆ เช่น แว่นกันแดดหรือหนวด บนจุดสังเกตของใบหน้าที่ตรวจพบ

การตรวจหาบาร์โค้ด

  • เว็บแอปพลิเคชันที่อ่านคิวอาร์โค้ดสามารถปลดล็อกกรณีการใช้งานที่น่าสนใจ เช่น การชำระเงินออนไลน์หรือการไปยังส่วนต่างๆ ของเว็บ หรือใช้บาร์โค้ดเพื่อสร้างการเชื่อมต่อทางสังคมในแอปพลิเคชันเมสเซнджер
  • แอปช็อปปิ้งอนุญาตให้ผู้ใช้สแกนบาร์โค้ด EAN หรือ UPC ของสินค้าในร้านค้าจริงเพื่อเปรียบเทียบราคาออนไลน์ได้
  • สนามบินสามารถจัดให้มีคีออสก์เว็บที่ผู้โดยสารสามารถสแกนโค้ด Aztec ของบัตรโดยสารเพื่อแสดงข้อมูลที่ปรับเปลี่ยนในแบบของคุณซึ่งเกี่ยวข้องกับเที่ยวบิน

การตรวจหาข้อความ

  • เว็บไซต์โซเชียลเน็ตเวิร์กออนไลน์สามารถปรับปรุงการเข้าถึงเนื้อหารูปภาพที่ผู้ใช้สร้างขึ้นได้โดยการเพิ่มข้อความที่ตรวจพบเป็นแอตทริบิวต์ alt สำหรับแท็ก <img> เมื่อไม่มีคำอธิบายอื่นๆ
  • เว็บไซต์เนื้อหาสามารถใช้การตรวจจับข้อความเพื่อหลีกเลี่ยงการวางส่วนหัวไว้ด้านบนของรูปภาพหลักที่มีข้อความ
  • เว็บแอปพลิเคชันสามารถใช้การตรวจจับข้อความเพื่อแปลข้อความ เช่น เมนูร้านอาหาร

สถานะปัจจุบัน

ขั้นตอน สถานะ
1. สร้างคําอธิบาย เสร็จสมบูรณ์
2. สร้างฉบับร่างแรกของข้อกําหนด เสร็จสมบูรณ์
3. รวบรวมความคิดเห็นและปรับปรุงการออกแบบ กำลังดำเนินการ
4. ช่วงทดลองใช้จากต้นทาง เสร็จสมบูรณ์
5. เปิด การตรวจจับบาร์โค้ดเสร็จสมบูรณ์
การตรวจจับใบหน้า กำลังดำเนินการ
การตรวจหาข้อความอยู่ระหว่างดำเนินการ

วิธีใช้ Shape Detection API

หากต้องการทดสอบ Shape Detection API ในเครื่อง ให้เปิดใช้ Flag #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 Services ใน Android

แนวทางปฏิบัติแนะนำ

ตัวตรวจจับทั้งหมดทํางานแบบไม่พร้อมกัน กล่าวคือไม่บล็อกเธรดหลัก ดังนั้นอย่าพึ่งพาการตรวจจับแบบเรียลไทม์ แต่ให้เวลาเครื่องตรวจจับทำงาน

หากคุณเป็นแฟนของ Web Workers คุณคงดีใจที่ได้ทราบว่าตัวตรวจจับจะแสดงอยู่ในนั้นด้วย ผลการตรวจจับสามารถจัดเก็บเป็นอนุกรมได้ จึงส่งผ่านจากผู้ปฏิบัติงานไปยังแอปหลักผ่าน postMessage() ได้ การสาธิตจะแสดงวิธีการทํางานนี้

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

ความคิดเห็น

ทีม Chrome และชุมชนมาตรฐานเว็บอยากทราบความคิดเห็นของคุณเกี่ยวกับ Shape Detection API

บอกเราเกี่ยวกับการออกแบบ API

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

  • แจ้งปัญหาเกี่ยวกับข้อกำหนดใน GitHub repo ของ Shape Detection API หรือแสดงความคิดเห็นในปัญหาที่มีอยู่

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

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

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

หากมีแผนจะใช้ API

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

  • แชร์ว่าคุณวางแผนจะใช้ WICG อย่างไรในชุดข้อความ Discourse ของ WICG
  • ส่งทวีตถึง @ChromiumDev โดยใช้แฮชแท็ก #ShapeDetection และแจ้งให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ไหนและอย่างไร

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