React TypeScript中@zxing/Browser的reset函数无法使用问题

错误原因 #

你调用的reset()方法并非@zxing/browser库中BrowserMultiFormatReader类的公开API，当前版本的该类不存在这个方法，因此TypeScript会抛出类型错误。

解决方案 #

要停止扫描并释放相关资源，应该使用BrowserMultiFormatReader提供的stop()方法，它可以中断正在进行的解码流程并释放媒体设备资源。

修改后的代码示例 #

import { BrowserMultiFormatReader } from "@zxing/browser"
import { useEffect, useRef } from "react"
import { Button, Grid } from "@mui/material"

const ScannerComponent = () => {
  const videoRef = useRef<HTMLVideoElement>(null)
  const reader = useRef(new BrowserMultiFormatReader())

  // 启动扫描
  useEffect(() => {
    reader.current.decodeOnceFromConstraints(
      {
        audio: false,
        video: {
          facingMode: "environment",
        }
      },
      videoRef.current
    )
    .then((result) => {
      if (result) {
        console.log(result.getText())
      }
    })
    .catch((err) => {
      if (err) console.log(err)
    })

    // 组件卸载时停止扫描，释放资源
    return () => {
      reader.current.stop()
    }
  }, [])

  const handleStop = () => {
    // 使用stop()替代reset()
    reader.current.stop()
  }

  return(
    <Grid>
        <video ref={videoRef} width="400px" height="400px" />
        <Button variant="contained" onClick={handleStop}>Stop</Button>
    </Grid>
  )
}

export default ScannerComponent

额外说明 #

• decodeOnceFromConstraints是单次解码方法，成功获取结果后会自动停止，但如果需要中途手动中断，调用stop()即可。
• 在组件卸载时务必调用stop()，避免媒体设备被持续占用，造成内存泄漏。

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