barcode-reader/barcode-reader.js at master · Ilario42/barcode-reader · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
import {LitElement, html, css} from 'lit-element';
import * as Comlink from 'comlink';

/**
 * `barcode-reader`
 *
 *
 * @polymer
 * @extends HTMLElement
 * @demo demo/index.html
 */
class BarcodeReader extends LitElement {
  static get properties() {
    return {

    };
  }

  static get styles() {
    return css`
      :host {
        display: block;
        position: relative;
      }

      canvas {
        display:none;
      }

      video {
        width: 100%;
        height: 100%;
      }

      #overlay {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: transparent;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.5);
        pointer-events: none;
        z-index: 20;
        border-width: 2em;
      }

      #scanline {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        visibility: visible;
        background: linear-gradient(to bottom, transparent 51%, red 51%, transparent 52%)
      }
    `;
  }

  render() {
    return html`
      <div id="overlay">
        <div id="scanline"></div>
      </div>
      <canvas width="640" height="480"></canvas>
      <video width="640" height="480" muted autoplay playsinline />
    `;
  }

  constructor() {
    super();

    this.__context = null;
    this.__video = null;

    // Module scripts are not supported on DedicatedWorker yet. You can try the
    // feature with '--enable-experimental-web-platform-features' flag (see
    // https://crbug.com/680046)
    //
    // This path is also specific to the demo/index.html; have to fix
    this.__barcodeProxy = Comlink.proxy(new Worker('../barcode-worker.js', { type: "module" }));
  }

  firstUpdated() {
    this.__context = this.shadowRoot.querySelector('canvas').getContext('2d');
    this.__video = this.shadowRoot.querySelector('video');
    this.__videoInputSelector = this.shadowRoot.querySelector('#videoInput');
  }

  _onFrame() {
    if(this.__video.videoWidth > 0) {
      this._drawFrame(this.__video);
    }
    this.__animationFrameId = requestAnimationFrame(this._onFrame.bind(this));
  };

  _drawFrame(frameData) {
    this.__context.drawImage(frameData, 0, 0, 640, 480, 0, 0, 640, 480);
    this._processFrame();
  }

  async _processFrame() {
    if(!this.__jobProcessingFrame) {
      this.__jobProcessingFrame = true;

      const imageData = this.__context.getImageData(0, 0, 640, 480);
      const data = await this.__barcodeProxy.detect(imageData);
      if (data) {
        this.dispatchEvent(new CustomEvent('barcodes-found', {
          bubbles: true,
          composed: true,
          detail: {
            barcodes: data
          }
        }));
      }
      this.__jobProcessingFrame = false;
    }
  }

  async start() {
    // bigger video = more memory = more OOM on constrained devices
    const constraints = {
      'audio': false,
      'video': {
        width: { min: 640, ideal: 640, max: 1280 },
        height: { min: 480, ideal: 480, max: 720 },
        facingMode: {
          exact: 'environment',
        }
      }
    };

    const stream = await navigator.mediaDevices.getUserMedia(constraints);

    this.__video.addEventListener('loadeddata', (e) => {
      this.__animationFrameId = requestAnimationFrame(this._onFrame.bind(this));
    });

    this.__video.srcObject = stream;
    this.__stream = stream;
  }

  stop() {
    this.__stream.getTracks()[0].stop();
  }
}

window.customElements.define('barcode-reader', BarcodeReader);