如何在Angular 4安卓应用中实现条形码扫描功能？

我之前在Angular项目里实现过类似的需求，结合安卓摄像头做条形码扫描的话，**@zxing/library**是个非常靠谱的选择——它对Angular兼容性好，能直接调用设备摄像头完成扫码，和你正在用的ngx-barcode也能完美搭配。下面是具体的实现步骤：

1. 安装依赖包 #

首先在项目里安装@zxing/library：

npm install @zxing/library --save

2. 组件实现 #

模板部分（HTML） #

在你的扫描组件模板里添加视频容器和控制按钮：

<div class="scanner-container">
  <!-- 显示摄像头画面的视频元素 -->
  <video #videoPlayer [hidden]="!isScanning" width="320" height="240" style="border: 1px solid #ccc;"></video>
  
  <!-- 扫描控制按钮 -->
  <button (click)="startScanning()" *ngIf="!isScanning" class="scan-btn">启动扫描</button>
  <button (click)="stopScanning()" *ngIf="isScanning" class="scan-btn">停止扫描</button>
  
  <!-- 显示扫描结果 -->
  <div *ngIf="scanResult" class="result">
    <strong>扫描结果：</strong> {{ scanResult }}
  </div>
</div>

逻辑部分（TS） #

在组件类里编写扫描的核心逻辑，包括摄像头调用、扫码识别和结果处理：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { BrowserMultiFormatReader, Result, BarcodeFormat } from '@zxing/library';

@Component({
  selector: 'app-barcode-scanner',
  templateUrl: './barcode-scanner.component.html',
  styleUrls: ['./barcode-scanner.component.css']
})
export class BarcodeScannerComponent {
  @ViewChild('videoPlayer') videoElement!: ElementRef<HTMLVideoElement>;
  
  private codeReader: BrowserMultiFormatReader;
  isScanning = false;
  scanResult: string | null = null;

  constructor() {
    // 初始化扫码器，可指定要识别的条形码类型（比如只识别EAN-13、QR码）
    this.codeReader = new BrowserMultiFormatReader();
    this.codeReader.setPossibleFormats([
      BarcodeFormat.EAN_13,
      BarcodeFormat.QR_CODE,
      BarcodeFormat.CODE_128
    ]);
  }

  async startScanning(): Promise<void> {
    this.isScanning = true;
    this.scanResult = null;

    try {
      // 获取设备上的可用摄像头列表
      const videoDevices = await this.codeReader.listVideoInputDevices();
      // 选择第一个可用的摄像头（安卓设备上通常后置摄像头是第一个，可根据需求调整）
      const targetDeviceId = videoDevices[0].deviceId;

      // 启动摄像头并开始扫码
      this.codeReader.decodeFromVideoDevice(
        targetDeviceId,
        this.videoElement.nativeElement,
        (result: Result | null, err: any) => {
          if (result) {
            // 成功识别到条形码，保存结果并停止扫描
            this.scanResult = result.text;
            this.stopScanning();
          }
        }
      );
    } catch (error) {
      console.error('启动扫描失败:', error);
      this.isScanning = false;
    }
  }

  stopScanning(): void {
    this.isScanning = false;
    // 重置扫码器，释放摄像头资源
    this.codeReader.reset();
  }
}

3. 权限配置（针对安卓APP场景） #

如果你是把Angular项目打包成安卓APP（比如用Capacitor、Cordova），需要在安卓配置文件中添加摄像头权限：

• Capacitor：在android/app/src/main/AndroidManifest.xml中添加：

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

• Cordova：安装摄像头权限插件：

cordova plugin add cordova-plugin-camera

4. 关键注意事项 #

• HTTPS要求：浏览器在非HTTPS环境（除了localhost）下会禁止访问摄像头，所以生产环境必须部署在HTTPS服务器上，或者用安卓WebView打包成APP（WebView不受此限制）。
• 摄像头选择：如果需要指定后置摄像头，可以遍历videoDevices列表，根据设备名称判断（比如包含“back”或“后置”的名称）。
• 兼容性：@zxing/library支持大部分现代浏览器和安卓WebView，Angular 4版本也能正常使用（亲测有效）。

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