What Web Can Do Today?

The Shape Detection API is a set of services exposing image processing like OCR (text detection), barcode/QR scanning or face detection capabilities of the underlying system to the Web applications. The availability and quality of the detection varies on the OS & hardware – the API exposes those services as-is.

The API as of Spring 2020 is at the early experimentation phase. Barcode scanning is available only in Google Chrome 83+. OCR and face detection is available only in Google Chrome via "Experimental Web Platform Features" flag.

API glimpse

Live Demo

• JavaScript

  function writeLog(message) { 
    const newState = document.createElement('p');
    newState.innerHTML = message;
    document.getElementById('target').appendChild(newState);
  }
  
  function detectText() {
    if (!('TextDetector' in window)) {
      alert('TextDetector is not available');
      return;
    }
    
    const file = document.getElementById('file').files[0]
    if (!file) {
      alert('No image - upload a file first.');
      return;
    }
    
    document.getElementById('target').innerHTML = '';
    const detector = new TextDetector();
    
    createImageBitmap(file)
      .then((image) => detector.detect(image))
      .then((results) => {
        if (results.length) {
          results.forEach((result) => {
            writeLog(`Detected text "<b>${result.rawValue}</b>" at (${Math.round(result.boundingBox.x)},${Math.round(result.boundingBox.y)})`);
          })
        } else {
          writeLog('No texts detected.');
        }
      })
      .catch((err) => writeLog('Text detection error: ' + err));
  }
  
  function detectBarcode() {
    if (!('BarcodeDetector' in window)) {
      alert('BarcodeDetector is not available');
      return;
    }
    
    const file = document.getElementById('file').files[0]
    if (!file) {
      alert('No image - upload a file first.');
      return;
    }
    
    document.getElementById('target').innerHTML = '';
    const detector = new BarcodeDetector();
    
    createImageBitmap(file)
      .then((image) => detector.detect(image))
      .then((results) => {
        if (results.length) {
          results.forEach((result) => {
            writeLog(`Detected text "<b>${result.rawValue}</b>" at (${Math.round(result.boundingBox.x)},${Math.round(result.boundingBox.y)})`);
          })
        } else {
          writeLog('No barcodes detected.');
        }
      })
      .catch((err) => writeLog('Barcode detection error: ' + err));
  }
  
  function detectFace() {
    if (!('FaceDetector' in window)) {
      alert('FaceDetector is not available');
      return;
    }
    
    const file = document.getElementById('file').files[0]
    if (!file) {
      alert('No image - upload a file first.');
      return;
    }
    
    document.getElementById('target').innerHTML = '';
    const detector = new FaceDetector();
    
    createImageBitmap(file)
      .then((image) => detector.detect(image))
      .then((results) => {
        if (results.length) {
          results.forEach((result) => {
            writeLog(`Detected face with <b>${result.landmarks.map((l) => l.type).join()}</b> at (${Math.round(result.boundingBox.x)},${Math.round(result.boundingBox.y)})`);
          })
        } else {
          writeLog('No faces detected.');
        }
      })
      .catch((err) => writeLog('Face detection error: ' + err));
  }

• HTML

  <p>Upload an image: <input type="file" id="file" accept="image/*" /></p>
  <div>
    <button onclick="detectText()">Detect Text</button>
    <button onclick="detectBarcode()">Detect Barcode</button>
    <button onclick="detectFace()">Detect Face</button>
  </div>
  <div id="target"></div>

Resources

• Specification Draft
• The Shape Detection API: a picture is worth a thousand words, faces, and barcodes