Zxing scanner组件报TypeError:无法读取未定义属性'stop'怎么解决？

核心问题原因 #

你遇到的相机自动关闭、运行报错的问题，基本是以下几类常见原因导致：

• 浏览器相机权限限制：非localhost/HTTPS环境下浏览器会直接拒绝相机访问，触发组件闪退
• 事件回调参数类型不匹配：你当前代码中事件接收的参数类型和组件实际返回的类型不符，会触发运行时错误
• 版本不兼容：ngx-scanner版本和Angular项目版本不匹配会导致运行时异常
• 配置缺失：缺少权限相关的meta标签或服务器响应头配置

修复步骤 #

1. 修正类型错误 #

替换你的组件TS代码为如下内容，引入正确的事件参数类型：

import { Component } from '@angular/core';
import { MediaDeviceInfo } from '@zxing/ngx-scanner';

@Component({
  selector: 'app-scanner',
  templateUrl: './scanner.component.html',
  styleUrls: ['./scanner.component.css']
})
export class ScannerComponent {

  constructor() { }

  camerasNotFound(e: Error) {
    console.error('未检测到可用相机', e);
    // 可在此处添加用户提示逻辑
  }

  cameraFound(devices: MediaDeviceInfo[]) {
    console.log('检测到可用相机列表：', devices);
  }

  scanSuccessHandler(result: string): void {
    console.log('扫描结果：', result);
  }

}

2. 优化组件配置 #

给zxing-scanner组件添加兼容配置，避免初始化时权限抢占导致崩溃：

<zxing-scanner
  #scanner
  [formats]="['QR_CODE']"
  [tryHarder]="true"
  [delayBetweenScanSuccess]="500"
  [tryNextDeviceAfter]="1000"
  (camerasFound)="cameraFound($event)"
  (camerasNotFound)="camerasNotFound($event)"
  (scanSuccess)="scanSuccessHandler($event)"
>
</zxing-scanner>

调试正常后再添加EAN_13等其他需要支持的编码格式。

3. 新增权限配置 #

在项目根目录的index.html的head标签中添加权限声明meta标签：

<meta http-equiv="Permissions-Policy" content="camera=*">

如果是部署到服务器，需要在服务端响应头中添加同样的Permissions-Policy: camera=*配置。

4. 环境校验 #

• 本地调试必须使用localhost访问，不能用127.0.0.1或者本机IP
• 线上部署必须使用HTTPS协议，否则浏览器会禁止调用相机接口
• 移动端测试需要确认应用已经获取系统相机权限

5. 版本兼容校验 #

确认当前安装的@zxing/ngx-scanner版本和Angular大版本匹配：

• Angular 12及以下：使用@zxing/ngx-scanner@3.9.1
• Angular 13-15：使用@zxing/ngx-scanner@16.x
• Angular 16+：使用@zxing/ngx-scanner@17.x及以上版本

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