Web example does not work

[ihmpavel]

Starting example-app application does not work as expected on the web. After starting and clicking on Scan (after permission grant) a camera shows a preview and immediately throws an error to console [Scanner Web Error] QR code parse error, error = No barcode or QR code detected.

There is no way to scan, until matching specific QR code, or to control behavior.

If the QR code is not found or is found, the UI with preview is immediately closed.

Screen.Recording.2024-06-12.at.23.21.21.mov

[mburger81]

@ihmpavel do you have found a solution for this? I have the same problem

[ihmpavel]

@mburger81 Hi, I did not find a solution. After looking into the source code I believe it never worked. I wanted to make a PR, but did not have a time to make changes to the code

[akira32]

I have a problem that how to open the web of project?
I input npm start, but it appears some errors as below:

npm error Missing script: "start"
npm error
npm error Did you mean one of these?
npm error   npm star # Mark your favorite packages
npm error   npm stars # View packages marked as favorites
npm error
npm error To see a list of scripts, run:
npm error   npm run

[ihmpavel]

@akira32 You have to be in the example-app folder and run dev instead of start https://github.com/ionic-team/capacitor-barcode-scanner/blob/main/example-app/package.json#L7

[akira32]

@akira32 You have to be in the example-app folder and run dev instead of start https://github.com/ionic-team/capacitor-barcode-scanner/blob/main/example-app/package.json#L7

Thank you.I run the command of "npm run dev" under example-app directory, but it appears the error:

% npm run dev

[email protected] dev
vite

sh: vite: command not found

[akira32]

I had solved this problem by the command of "npm install -g vite". But I meet another problem when I execute the command of "npm run dev" as below:

% npm run dev        

> [email protected] dev
> vite

failed to load config from /Users/user/Documents/capacitor-barcode-scanner-main/example-app/vite.config.ts
error when starting dev server:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@vitejs/plugin-legacy' imported from /Users/user/Documents/capacitor-barcode-scanner-main/example-app/vite.config.ts.timestamp-1724292180198-a705eed8dc80f.mjs
    at packageResolve (node:internal/modules/esm/resolve:839:9)
    at moduleResolve (node:internal/modules/esm/resolve:908:18)
    at defaultResolve (node:internal/modules/esm/resolve:1039:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:554:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:523:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:246:38)
    at ModuleJob._link (node:internal/modules/esm/module_job:126:49)

[akira32]

I also had solved this problem of "npx run dev" by using sudo to npm install and barcoae scanner.
But I 'sudo npm run dev' to open the web and I see the screen quickly close when I click "SCAN" button.
Does someone have any idea?

[Scooby27]

@ihmpavel I have the same issue on web on desktop Chrome and iOS Safari.

"@capacitor/barcode-scanner": "1.0.1"
"@capacitor/core": "6.1.2"

Native Android and iOS work as expected.

[thibaut129]

Hi,
I have the same problem on web....