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

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 ที่ไม่ทำงานตามที่คุณคาดหวังหรือไม่ หรือ มีวิธีหรือคุณสมบัติที่ขาดไปที่คุณจำเป็นต้องใช้ ไอเดียของคุณ หากมีคำถามหรือความคิดเห็นเกี่ยวกับรูปแบบการรักษาความปลอดภัย

หากมีปัญหาในการติดตั้งใช้งาน

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

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

หากกำลังวางแผนที่จะใช้ API

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

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