The Shape Detection API Detects Faces, Barcodes, and Text in Images.

The Shape Detection API Detects Faces, Barcodes, and Text in Images.

The Shape Detection API detects faces, barcodes, and text in images. This API is part of the new capabilities project. Barcode detection has launched in Chrome 83 on certified devices with Google Play Services installed. Face and text detection are available behind a flag. This post will be updated as the Shape Detection API evolves.

This API is part of the new capabilities project. Barcode detection has launched in Chrome 83 on certified devices with Google Play Services installed. Face and text detection are available behind a flag. This post will be updated as the Shape Detection API evolves.

What is the Shape Detection API? #

With APIs like [navigator.mediaDevices.getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) and the Chrome for Android photo picker, it has become fairly easy to capture images or live video data from device cameras, or to upload local images. So far, this dynamic image data—as well as static images on a page—has been not been accessible by code, even though images may actually contain a lot of interesting features such as faces, barcodes, and text.

For example, in the past, if developers wanted to extract such features on the client to build a QR code reader, they had to rely on external JavaScript libraries. This could be expensive from a performance point of view and increase the overall page weight. On the other hand, operating systems including Android, iOS, and macOS, but also hardware chips found in camera modules, typically already have performant and highly optimized feature detectors such as the Android [FaceDetector](https://developer.android.com/reference/android/media/FaceDetector) or the iOS generic feature detector, [CIDetector](https://developer.apple.com/documentation/coreimage/cidetector?language=objc).

The Shape Detection API exposes these native implementations through a set of JavaScript interfaces. Currently, the supported features are face detection through the FaceDetector interface, barcode detection through the BarcodeDetector interface, and text detection (Optical Character Recognition, (OCR)) through the TextDetector interface.

Caution: Text detection, despite being an interesting field, is not considered stable enough across either computing platforms or character sets to be standardized at the moment, which is why text detection has been moved to a separate informative specification.

Suggested use cases #

As outlined above, the Shape Detection API currently supports the detection of faces, barcodes, and text. The following bullet list contains examples of use cases for all three features.

Face detection #

  • Online social networking or photo sharing sites commonly let their users annotate people in images. By highlighting the boundaries of detected faces, this task can be facilitated.
  • Content sites can dynamically crop images based on potentially detected faces rather than relying on other heuristics, or highlight detected faces with Ken Burns-like panning and zooming effects in story-like formats.
  • Multimedia messaging sites can allow their users to overlay funny objects like sunglasses or mustaches on detected face landmarks.

Barcode detection #

  • Web applications that read QR codes can unlock interesting use cases like online payments or web navigation, or use barcodes for establishing social connections on messenger applications.
  • Shopping apps can allow their users to scan EAN or UPC barcodes of items in a physical store to compare prices online.
  • Airports can provide web kiosks where passengers can scan their boarding passes' Aztec codes to show personalized information related to their flights.

Text detection #

  • Online social networking sites can improve the accessibility of user-generated image content by adding detected texts as alt attributes for <img> tags when no other descriptions are provided.
  • Content sites can use text detection to avoid placing headings on top of hero images with contained text.
  • Web applications can use text detection to translate texts such as, for example, restaurant menus.

progressive web apps origin trials capabilities api

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Top Progressive Web App Development Company in USA

AppClues Infotech is a top Mobile App Development Company in USA building high-quality Android, iOS, and Native apps for Startups, SMBs, & Enterprises. Contact us now!

Progressive Web Apps or Native Apps, Tips to choose the best for your app in 2020

Progressive Web Apps or Native Apps, if you are in a dilemma of selecting the better one for your requirements these pointers will help make an informed decision.

Progressive Web Apps and the changing face of the mobile website

People are spending more time on their smartphones as compared to desktop or laptops. This change in user behavior has had a significant impact on the dynamics of mobile websites.

Progressive Web App: How This Blend App & Web Will Make Impact? - Technology Sumo

Progressive Web App: How this fusion of mobile app and web is going to be the game-changer?

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.