React扫码应用报错：Zxing相关函数不存在的排查求助

问题场景 #

在React应用中集成二维码扫描功能，使用@zxing/browser和@zxing/library包，应用部署在AWS且配置了SSL证书。按照官方文档编写代码后，调用listVideoInputDevices()时提示该方法不存在，但查看包源码确认方法确实存在。

复现代码 #

import React, { useState, useEffect } from "react";

import {
  NotFoundException,
  ChecksumException,
  FormatException
} from "@zxing/library";

import { BrowserQRCodeReader, BrowserCodeReader } from '@zxing/browser';

export default function() {

  var qrCodeReader = null;
  var codeReader = null;
  var sourceSelect = null;

  console.log("ZXing code reader initialized");

  useEffect(() => {

    codeReader = new BrowserCodeReader();
    qrCodeReader = new BrowserQRCodeReader();

    console.log(codeReader.listVideoInputDevices()); // 错误提示：listVideoInputDevices() is not a function
    console.log(qrCodeReader.listVideoInputDevices());  // 错误提示：listVideoInputDevices() is not a function

    console.log("Code Reader", codeReader);
    console.log("QR Code Reader", qrCodeReader);
  }, []);
}

控制台截图 #

问题原因 #

@zxing/browser包中，listVideoInputDevices()是静态方法，需要直接通过BrowserCodeReader或BrowserQRCodeReader类调用，而不是通过实例对象调用。你之前的代码错误地在实例化后的对象上调用了这个静态方法，导致报错。

修复方案 #

修改代码，直接通过类调用静态方法，同时注意该方法返回Promise，需要异步处理结果：

import React, { useEffect } from "react";

import {
  NotFoundException,
  ChecksumException,
  FormatException
} from "@zxing/library";

import { BrowserQRCodeReader, BrowserCodeReader } from '@zxing/browser';

export default function() {

  console.log("ZXing code reader initialized");

  useEffect(() => {
    // 调用BrowserCodeReader的静态方法获取视频设备
    BrowserCodeReader.listVideoInputDevices()
      .then(devices => {
        console.log("可用视频设备列表：", devices);
        // 这里可以处理设备列表，比如渲染选择下拉框
      })
      .catch(error => {
        console.error("获取视频设备失败：", error);
      });

    // 或者针对QR码的阅读器调用静态方法（效果一致）
    BrowserQRCodeReader.listVideoInputDevices()
      .then(devices => {
        console.log("可用视频设备列表：", devices);
      })
      .catch(error => {
        console.error("获取视频设备失败：", error);
      });
  }, []);

  return <div>二维码扫描组件</div>;
}

额外注意事项 #

1. 确保@zxing/browser包为最新版本，执行npm update @zxing/browser更新依赖，避免版本兼容问题
2. 调用媒体设备API必须在HTTPS环境下运行（你的AWS部署已满足），本地开发可使用localhost或开启HTTPS的开发服务器
3. 若需要实例化阅读器进行扫码，可在获取设备后再创建实例，传入设备ID参数

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