Chrome BarcodeDetector在JS可用，Angular(TypeScript)中构造报错

我来帮你搞定这个问题，你的代码里有两个核心问题导致了TypeError: (void 0) is not a constructor错误，咱们一步步拆解解决：

问题1：ViewChild在Constructor阶段未初始化 #

Angular的@ViewChild获取的元素引用，在组件constructor执行时还没完成DOM渲染，此时this.image.nativeElement是undefined。直接用它调用detect()不仅会报错，还会干扰你判断BarcodeDetector本身的可用性。

问题2：错误的BarcodeDetector引用方式 #

你声明的var BarcodeDetector: any;遮蔽了全局window上的原生BarcodeDetector对象，导致你实例化的是一个未定义的变量，而非浏览器提供的API构造函数。

完整解决方案 #

1. 组件代码（TypeScript） #

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  templateUrl: './index.component.html'
})
export class IndexComponent implements AfterViewInit {
  @ViewChild('imgRef') image!: ElementRef<HTMLImageElement>;
  hasBarcodeDetector = false;
  errors = '';
  scanData = '';

  ngAfterViewInit(): void {
    // 先检测浏览器是否支持BarcodeDetector
    this.hasBarcodeDetector = 'BarcodeDetector' in window;
    
    if (!this.hasBarcodeDetector) {
      this.errors = '当前浏览器不支持BarcodeDetector API';
      return;
    }

    try {
      // 正确获取全局的BarcodeDetector构造函数
      const BarcodeDetectorConstructor = window.BarcodeDetector as any;
      const barcodeDetector = new BarcodeDetectorConstructor();

      barcodeDetector.detect(this.image.nativeElement)
        .then(detectedCodes => {
          detectedCodes.forEach(barcode => {
            this.scanData += `${barcode.rawValue}\n`;
          });
        })
        .catch(err => {
          this.errors = `解码错误: ${err.message}`;
        });
    } catch (err) {
      this.errors = `实例化失败: ${(err as Error).message}`;
    }
  }

  // 添加手动扫描方法
  scanBarcode(): void {
    this.scanData = '';
    this.errors = '';
    if (!this.hasBarcodeDetector) {
      this.errors = '当前浏览器不支持BarcodeDetector API';
      return;
    }

    try {
      const BarcodeDetectorConstructor = window.BarcodeDetector as any;
      const barcodeDetector = new BarcodeDetectorConstructor();

      barcodeDetector.detect(this.image.nativeElement)
        .then(detectedCodes => {
          detectedCodes.forEach(barcode => {
            this.scanData += `${barcode.rawValue}\n`;
          });
        })
        .catch(err => {
          this.errors = `解码错误: ${err.message}`;
        });
    } catch (err) {
      this.errors = `实例化失败: ${(err as Error).message}`;
    }
  }
}

2. 对应的HTML模板 #

<button (click)="scanBarcode()">重新扫描条码</button>
<img #imgRef src="./barcode.gif" alt="测试条码">
<div>API支持状态: {{ hasBarcodeDetector ? '✅ 支持' : '❌ 不支持' }}</div>
<h3>扫描结果:</h3>
<pre>{{ scanData }}</pre>
<h3>错误信息:</h3>
<pre>{{ errors }}</pre>

3. 可选：添加TypeScript类型定义（更规范） #

如果想让TypeScript自动识别BarcodeDetector的类型，可以安装对应的Web API类型包：

npm install @types/web-bluetooth --save-dev

安装后就不需要用as any断言，直接使用window.BarcodeDetector即可获得完整的类型提示。

关键改进点说明 #

• 把检测逻辑移到ngAfterViewInit钩子：确保DOM元素已渲染完成，ViewChild能正确获取到图片元素。
• 直接从window对象获取BarcodeDetector：避免变量遮蔽问题，确保调用的是浏览器原生API。
• 完善错误分层处理：分别处理浏览器不支持、实例化失败、解码失败三种场景，方便调试。
• 添加手动扫描按钮：让用户可以重复触发扫描，提升交互性。

内容的提问来源于stack exchange，提问作者GregoryHouseMD