Exception thrown under ios 13.6

[cinob]

Hello I'm using vue-qrcode-reader in ios13.6 and I'm collecting the following exception Is there any way to fix it? Failed to execute 'detect' on 'BarcodeDetector': Barcode detection service unavailable. Use 'setZXingModuleOverrides' in offline or strict CSP environments.

[Sec-ant]

Was this exception thrown from the vue-qrcode-reader demo page?

• If not, could you check if it will work in the demo page on iOS 13.6?
• If so, it's probably a compatibility issue, then could you visit this website and tell me what do you see in the console?

[cinob]

It's the QrcodeCapture component used in the production environment. Sorry, I don't have this version of the system around, this error was reported by a user and found in the sentry.

Aborted(Error: WebAssembly.Module doesn't parse at byte 20: invalid opcode 192, in function at index 70)
{
arguments: [
Aborted(Error: WebAssembly.Module doesn't parse at byte 20: invalid opcode 192, in function at index 70)
], 
logger: console
}
Error
14:56:13
console
failed to asynchronously prepare wasm: Error: WebAssembly.Module doesn't parse at byte 20: invalid opcode 192, in function at index 70
{
arguments: [
failed to asynchronously prepare wasm: Error: WebAssembly.Module doesn't parse at byte 20: invalid opcode 192, in function at index 70
], 
logger: console
}```

[Sec-ant]

Ok so it seems like a compatibility issue. iOS 13.6 was shipped with Safari 13.1, but neither emscripten (default min safari version 14.1) nor vite (default min safari version 14) is configured to support this version of Safari.

The best I can do is to change the MIN_SAFARI_VERSION setting for emscripten, which should fix the wasm compilation error. But any js compatibility problem (syntax or web api, if any), will have to be addressed in vue-qrcode-reader.

Related issues: https://github.com/emscripten-core/emscripten/issues/19718 https://github.com/emscripten-core/emscripten/issues/19121

[cinob]

That's great. Thank you very much. The js compatibility can be solved by polyfill.

[Sec-ant]

FYI I've updated the test page: https://barcode-detector.pages.dev/ , it now loads a newer version of wasm from this link: https://cdn.jsdelivr.net/npm/@sec-ant/zxing-wasm@2.1.4/dist/reader/zxing_reader.wasm . I don't have an iOS environment either so I cannot test if it works in iOS 13.6. A confirmation would be great so I can ship this to the next version of barcode-detector.

If everything is fine, the webpage will display "Load: OK", and the console should print sth like this:

[cinob]

I've just introduced a new version of the wasm file, and the device that worked fine before won't take pictures and upload them. It throws the same error. https://vue-qrcode-reader.netlify.app/demos/Upload.html This page is also

Upload.html:1 Uncaught (in promise) DOMException: Failed to execute 'detect' on 'BarcodeDetector': Barcode detection service unavailable. Use 'setZXingModuleOverrides' in offline or strict CSP environments.

[Sec-ant]

@cinob the new wasm file is intended to be used with a set of compatible js files.

I've self deployed a vue-qrcode-reader demo page with the fixed wasm file: https://vue-qrcode-reader.pages.dev/ . Please check if this works for you or your customers.

[cinob]

[Sec-ant]

Sorry but I cannot reproduce the problem from my side. What's the device/OS/browser info of this?

[cinob]

Oh, I'm sorry. It's my fault. Due to network problems my device didn't load the wasm file correctly. https://vue-qrcode-reader.netlify.app/demos/Upload.html https://vue-qrcode-reader.pages.dev These two URLs are working.

[cinob]

Please ignore the previous error. The correct description of the problem is that the QR code is not parsed when take a picture using the new wasm file.

[Sec-ant]

I haven't released this package so https://vue-qrcode-reader.netlify.app/ is still using the v2.1.3 zxing-wasm. Therefore it can't provide any useful information regarding this issue.

https://vue-qrcode-reader.pages.dev/ is deployed by myself and it uses the updated v2.1.4 zxing-wasm for testing. We'll focus on this website in the following discussion.

Currently, there're two problems need to be addressed:

1. The exception thrown in iOS 13.6. From your comment here: https://github.com/Sec-ant/barcode-detector/issues/11#issuecomment-1705910164, this seems related to the wasm building configuration. So I've updated and released zxing-wasm v2.1.4. As I don't have an iOS 13.6 device so I'm not sure if this fixes the mentioned issue. Therefore I deployed the demo page with the updated wasm file, expecting confirmation on whether the fix is effective or not.

2. The regression introduced by the version update. From your comment here: https://github.com/Sec-ant/barcode-detector/issues/11#issuecomment-1706282983, there seems to be a regression regarding the fix. Yet I cannot reproduce it from my side.

   The correct description of the problem is that the QR code is not parsed when take a picture using the new wasm file.

   I'd love to know if this is something only happens at https://vue-qrcode-reader.pages.dev/demos/Upload.html ?

   And vitepress (the framework the demo page uses) seems to have a very aggressive caching strategy. To rule out network/cache issues, I've updated the CDN host from cdn.jsdelivr.net to fastly.jsdelivr.net for better network connectivity. In the meantime, please use inprivate mode or hard refresh when browsing the demo page.

Any feedback regarding these two problems is appreciated.

[cinob]

1. This issue may need to wait for the second issue to be resolved before confirming it

2. What does js compatible files refer to? Maybe it's the problem.

   @cinob the new wasm file is intended to be used with a set of compatible js files.

   Here's a sample of a minimal reproduction of my current code qrcode-demo. When a mobile device is used to take a QR code, the result is an empty array.

[Sec-ant]

Alright I need to clarify a few things:

Every .wasm build process will generate some .js glue code as an layer to interact with compiled .wasm file. The .wasm file and .js glue code are shipped together in each successful build, check them here.

Then, the .wasm files and their compatible .js glue code are bundled in a package, with typed API provided, and released as @sec-ant/zxing-wasm on npm. And this package is imported by barcode-detector, which is then imported by vue-qrcode-reader.

setZXingModuleOverrides only serves as a way to change the loading path of the .wasm file when you cannot use the default cdn.jsdelivr.net host for some reasons, e.g. unstable connection, offline usage, strict CSPs, .etc, but it is the developer's responsibility to guarantee that the version of the .wasm file is in consistent with the .js code. If the versions mismatch, unexpected behaviors can occur.

To simply put, using setZXingModuleOverrides to target a .wasm file from a different version can cause unexpected problems. The demo you provide uses the .js glue code from @sec-ant/zxing-wasm@2.1.3 but targets a newer 2.1.4 wasm file. That's where the problem occurs.

As I haven't pushed or released my fix to barcode-detector, I can only make a local build of vue-qrcode-reader with the fix, so I deployed https://vue-qrcode-reader.pages.dev/

I've also deployed your demo here, with the correct versions set up: https://qrcode-demo-83q.pages.dev/

Please have a check on these two sites.

[cinob]

Thank you for your patience. After confirming, both sites work fine on my mobile device.

[Sec-ant]

@cinob Is there any chance for you to check whether this fixes the issue regarding iOS 13.6, as mentioned in the title?

[cinob]

When a user gives feedback, I'll send him to this link to verify.

https://qrcode-demo-83q.pages.dev/

[Sec-ant]

I'm going to merge the fix and close this. Feel free to reopen if it doesn't solve the problem.

[Sec-ant]

This fix is shipped in vue-qrcode-reader@5.3.5

[cinob]

Okay, thanks.