角度应用扫描条形码

时间:2019-12-10 10:26:09

标签: angular zxing

我正在使用'@zxing/library'来解码mi视频设备中的条形码,但是当我尝试扫描时,控制台中会出现以下错误:

Trying yo play video that is already playing.

我的密码

HTML

<select name="devices" id="devices" *ngIf="mediaDevices.length !== 0" (change)="decodeFromVideo($event.target.value)">
  <option value="" disabled selected>Seleccione un dispositivo</option>
  <option value="{{ device.deviceId }}" *ngFor="let device of mediaDevices">{{ device.label }}</option>
</select>
<video
  #video
  id="video"
  width="300"
  height="200"
  style="border: 1px solid gray"
></video>
<input name="resultado" class="input-decode" type="text" value="{{resultado}}">

TS

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { BrowserBarcodeReader, BrowserQRCodeReader, DecodeContinuouslyCallback } from '@zxing/library';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{

  title = 'scanner-barcode';
  public resultado = '';
  public mediaDevices = [];


  @ViewChild('video')
    public video: ElementRef;

  ngOnInit() {
    console.log(window.navigator.appVersion);
    navigator.mediaDevices.enumerateDevices().then(mediaDe => {
      console.log(mediaDe);
      for (let i = 0; i < mediaDe.length; i++) {
        if (mediaDe[i].kind.toString() === 'videoinput') {
          this.mediaDevices.push(mediaDe[i]);
        }
      }
    });
  }

  public decodeFromVideo(value) {
    console.log('Value ', value);
    const codeReader = new BrowserQRCodeReader();

    codeReader.decodeFromInputVideoDevice(value, 'video').then(
      result => {
        console.log('Hace algo y no peta');
      }
    ).catch(err => {
      console.log('Hace algo y peta');
    });
  }
}

0 个答案:

没有答案