<h1>Barcode Detector example</h1>
<h4>Please select image with BarCode and see result...</h4>
<ol class="result"></ol>
<div id="main">
  <div class="not-supported">Sorry, BarcodeDetection not supported in you browser &#128516</br>Read <a href="https://web-panda.ru/post/detect-face-chrome" target="_blank">this</a> article for change it! Thanks!</div>
</div>
body {
  margin: 0px;
  background: #000;
  text-align: center;
  font-family: Arial;
  color: #fff;
  canvas{
    margin-top: 20px;
  }
  ol{
    color: yellow;
    max-width: 200px;
    text-align:left;
    margin: auto;
    margin-bottom: 25px;
    font-weight: bold;
  }
  h4{
    color: red;
  }
  #main {
    align-items: center;
    justify-content: center;
    flex-direction:column;
    display: flex;
  
    .not-supported {
      color: #fff;
      font-weight: 400;
      font-family: Arial;
      width: 100vw;
      height: 100vh;
      font-size: 40px;
      display: none;
      
      &_show {
        display: block
      }
    }
  }
}
class Detector {
  private _canvas: Canvas = null
  private _wrapper: HTMLElement = document.getElementById('main')
  private _uploadBtn: HTMLElement = null
  private _ctx: any = null
  public barcodeDetector: BarcodeDetector = null
  
  constructor() : void {
    if(typeof(BarcodeDetector) != 'function'){
      $(".not-supported").addClass("not-supported_show");
      $("h1, h4").hide();
      return;
    }
    
    this.barcodeDetector = new BarcodeDetector();
    console.log(this.barcodeDetector)
    
    this._uploadBtn = $("<input>").attr({'type':'file', 'accept': "image/x-png,image/gif,image/jpeg"}).get(0)
    $(this._wrapper).append(this._uploadBtn)
    
    this._canvas = $("<canvas></canvas>").get(0)
    $(this._wrapper).append(this._canvas)
    
    this._ctx = this._canvas.getContext('2d')
    
    this._canvas.width = 0
    this._canvas.height = 0
    
    $(this._uploadBtn).on("change", (e) => this.onChangeInput(e))
  }
  
  onChangeInput(e) : void {
    var reader = new FileReader();
    reader.onload = (event) => {
        var img = new Image();
        img.onload = () => {
            this._canvas.width = img.width;
            this._canvas.height = img.height;
            this._ctx.drawImage(img,0,0);
          
            this.detect()
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]); 
  }
  
  
  detect() {
    this.barcodeDetector.detect(this._canvas) 
    .then(barcodes => this.handleDetectedBarcodes(barcodes)) 
    .catch(alert);
  }
  
  handleDetectedBarcodes(barcodes) {
   
    $("h4").text(`Detected ${texts.length} barcodes:`)
    if(texts) {
      this._ctx.strokeStyle = "red";
      $('.result').empty()
      for(let code of barcodes) {
        $('.result').append($(`<li>${code.rawValue}</li>`))
        this._ctx.rect(code.boundingBox.x, code.boundingBox.y, code.boundingBox.width, code.boundingBox.height);
        this._ctx.stroke();
      }
    }else{
      alert("barcode not found!")
    }
  }
  
}

new Detector()
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js