Barcode detection service unavailable #18
Comments
|
Hey, louie I don't think This package uses WebAssembly to provide the core function of detecting barcodes. And the browser must instantiate and execute the WebAssembly module to use it. However, per the spec, websites can control whether to block the WebAssembly execution by setting the The directive There're corresponding ways in which you can solve this problem:
If neither solves your problem, it would be great if you can provide the malfunctioning website so that I can dig into it and check whether there're some other bugs to fix. |
import wasmFile from "../node_modules/@sec-ant/zxing-wasm/dist/reader/zxing_reader.wasm?url";I would like to ask what the syntax (?url)is? in vue-cli project import wasmFile from "@sec-ant/zxing-wasm/dist/reader/zxing_reader.wasm?url";it's show error: How do I import the wasm module correctly? |
|
Ok you decide not to fetch the First, a question: I wonder if you want to inline the InlineInlining means encoding the then you're inlining it. Afterwards, you use setZXingModuleOverrides({
locateFile: (path, prefix) => {
if (path.endsWith(".wasm")) {
return wasmFile; // <= a huge Base64 encoded data url
}
return prefix + path;
},
});A data url occupies a larger space than its binary form, and parsing a data url into binary data also consumes more CPU clocks. So, ideally, I suggest you to not use the inline form. BinaryIf you want to host it as a binary file on your site, then you need not to import it. You can just copy the setZXingModuleOverrides({
locateFile: (path, prefix) => {
if (path.endsWith(".wasm")) {
return "https://<your website host>/public/zxing_reader.wasm"; // <= where the .wasm file is at
}
return prefix + path;
},
});Either way, CSP still applies. You have to make sure Second question: where is the Normally, when you add The BUT, I made a mistake not pinning the version. So, the If you're using
Once you've downloaded the correct version of the Again, I'm really sorry for the inconvenience. Once the version problem is fixed and released in |
|
Thank @Sec-ant i just put setZXingModuleOverrides({
locateFile: (path, prefix) => {
if (path.endsWith(".wasm")) {
return '/zxing_reader.wasm';
}
return prefix + path;
},
});my project site can request zxing_reader.wasm now.but it's still has error if the |
|
Then this may be some other bug. To solve this problem I'll need more information.
|
yes.same device. vue-qrcode-reader demo page no exception |
|
In that case, can you share a repro :) |
Ok .i send email to you |
Alright, here's my email address: zzwu@zju.edu.cn |
|
@louie0086 Can you try |
i updated @sec-ant/zxing-wasm@2.1.5 and copy zxing_reader.wasm to zxing_reader1.wasm still now it show |
|
I added this line of code to log a detailed error information, can you some how see this in the console? barcode-detector/src/BarcodeDetector.ts Lines 156 to 157 in bca5f66 |
|
The RangeError is what we've been seeking. Is that just an empty object or does it hold more information? |
message:Range consisting of offset and length are out of bounds. stack: |
|
Hmm, interesting. If this is something about the WebAssembly instantiation, I wonder why Does this error message have a context so that I can check which line of code and file this error is thrown from? Or can you jump to the corresponding file and provide some information on its whereabouts? Screenshots would be great, and you can email me if you want. PS: I previously said
The good news is, starting from |
|
I isolated a stripped down code from my project that is scannable. But the original project still has Range Error and NotSupportedError. https://github.com/louie0086/test_Barcode i used mkcert and https://web.dev/i18n/en/how-to-use-local-https/ with local IP test |
|
Thanks for the repo, but I'm afraid a scannable demo can't provide to too much information on why your original project doesn't work. What about these questions I previously asked:
|
|
RangeError stack here: $.HEAP8.set(O, L) |
Thanks, this is very helpful. So the error is thrown from this line from the source code: https://github.com/Sec-ant/zxing-wasm/blob/8b8df68e781e7524ce96f12276c7a028b2c0c9d6/src/core.ts#L390 I'm not very clear about the root cause but I can try to do some debugging. So this error happens on an iPhone iOS 16.6 Safari Browser, right? |
yes.iPhone 14 Pro Max. But the demo repo is Okay |
|
Can you log the
You can also directly modify the dist file, like this:
And show me the result? |
|
|
|
What's the |
i just console at barcode-detector.pure.js const w = await Bt($, ot.getState().zxingModuleOverrides),
{
data: O,
width: G,
height: j,
data: { byteLength: F },
} = c,
Y = w._malloc(F)
console.log('data:',O)
console.log('byteLength:',F)
console.log('bufferPtr:',Y)
console.log('zxingInstance.HEAP8:',w.HEAP8)
w.HEAP8.set(O, Y)
const N = w.readBarcodesFromPixmap(Y, G, j, m, pe(u), g)
w._free(Y) |
|
I mean, can you also log the like this (add this line): console.log('zxingInstance.HEAP8.byteLength:', w.HEAP8.byteLength); |
the result: |
|
That's some useful info and a good start. Apparently, for some reason, the memory is not successfully allocated, which brings us to this line of code: Can you help me check whether |
https://github.com/louie0086/test_Barcode/blob/master/barcode-detector.pure_4.js#L443 K.buffer undefiend |
|
Hmmm, that means Can you log |
|
In a normal case, the
I cannot tell whether |
|
https://github.com/louie0086/test_Barcode/blob/master/barcode-detector.pure_4.js#L564-L566 i add a The demo tips but the project is |
barcode-detector/src/BarcodeDetector.ts
Lines 140 to 143 in ab876a6
i used vue-qrcode-reader at https website
it shows
"Barcode detection service unavailable. Use 'setZXingModuleOverrides' in offline or strict CSP environments.", "NotSupportedError"the host already set
Strict-Transport-Security: max-age=31536000; includeSubdomains; preloadbut the static js file not set
i see the demo website https://vue-qrcode-reader.netlify.app. it's doc and static js both set Strict-Transport-Security
how can i solve the detect error?
The text was updated successfully, but these errors were encountered: