反应PWA上的MRZ扫描仪

Question

我正在尝试通过pwa中的网络摄像头/移动摄像头扫描 MRZ / Id 。我正在使用tesseract.js在浏览器中将图像解码为文本。这是我的代码：

import React from "react";
import Webcam from "react-webcam";
import { createCanvas, loadImage } from 'canvas'
import { createWorker } from 'tesseract.js';
import { isMobile } from 'mobile-device-detect';
const videoConstraints = {
    width: 1280,
    height: 720,
    facingMode: isMobile ? {  exact: 'environment'} : "user"
  };

const config = {
    lang: "eng",
    oem: 1,
    psm: 3,
  }

  const WebcamCapture = () => {
    const webcamRef = React.useRef(null);
    const canvasRef = React.useRef(null);

    const capture = React.useCallback(
      () => {
        const imageSrc = webcamRef.current.getScreenshot();

       drawImage(imageSrc); 

      },
      [webcamRef]
    );

      const drawImage = (imageSrc) =>{

        const {clientWidth , clientHeight}= webcamRef.current.video
        const canvas = createCanvas(clientWidth , clientHeight);
        const ctx = canvas.getContext('2d')
        var imageObj1 = new window.Image();
        imageObj1.src = imageSrc;

imageObj1.onload = function() {
 ctx.drawImage(imageObj1, width, height);

        var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
           let finalimage = canvas.toDataURL('image/png');

        runOCR(finalimage)
      }

      const runOCR=(image)=>{
        const worker = createWorker({
          logger: m => console.log(m), // Add logger here
        });
        const {clientWidth , clientHeight}= webcamRef.current.video

        const recognize = async () => {
          await worker.load();
          await worker.loadLanguage('eng');
          await worker.initialize('eng');
           const textImage = await worker.recognize(image);
          console.log(textImage)
          alert(textImage.data.text);
          await worker.terminate();
        };        
       } 

问题在于，每当我在浏览器中调用tesseract.js时，它都会使用网络摄像头拍摄图像，但仅返回空文本。请让我知道我在这里想念的内容，如果您知道其他选择，也可以。