search

beenotung / react-webcam-qr-scanner.ts

Typescript React components using pure javascript to detect QR Code from webcam continuously.
https://www.npmjs.com/package/react-webcam-qr-scanner.ts
BSD 2-Clause "Simplified" License
7 stars 2 forks source link

Hi i got problem , even camera actived , but don't have received any video open . Please let me know what am i wrong . Tks all guys #1

Open tai30101997 opened 2 years ago

beenotung commented 2 years ago

Hi @tai30101997, may I know what version of react are you using? Would be great if you can share a trim down version of project reproducing the bug without unrelated parts (e.g. trim away login, server API parts)

Hulhay commented 11 months ago

Hi @beenotung, I got the same problem too. I'm using React 18.2.0. This is my project package

"dependencies": {
    "@reduxjs/toolkit": "^1.9.5",
    "i18n-js": "^4.3.0",
    "qr-scanner": "^1.4.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.12.0",
    "react-qr-code": "^2.0.12",
    "react-redux": "^8.1.2",
    "react-router-dom": "^6.17.0",
    "react-webcam-qr-scanner.ts": "^1.0.4",
    "styled-components": "^6.1.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.37",
    "@types/react-dom": "^18.2.15",
    "@typescript-eslint/eslint-plugin": "^6.10.0",
    "@typescript-eslint/parser": "^6.10.0",
    "@vitejs/plugin-react": "^4.2.0",
    "eslint": "^8.53.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.4",
    "prettier": "^3.0.3",
    "typescript": "^5.2.2",
    "vite": "^5.0.0"
  }

This is the page

const Scan: React.FC = () => {
  const [qrCode, setQrCode] = useState<string>('');

  const onQrCode = (qrCode: string) => {
    setQrCode(qrCode);
  };

  return (
    <div>
      <OneOffQrScanner onQrCode={onQrCode} hidden={false} />
    </div>
  );
};

And this is my directory structure image