I wish to integrate a QR Scanner into my project, how can i do it or please suggest me if any tutorials on this is already availabe
1 Like
Hi @Hari_Choudhary and welcome,
There is a number of qr scanning open source libraries online, for example:
You can easily add third party libraries to your Playcanvas project by uploading the library .js files.
@Leonidas Thank you very much I’ll go through it , and i also want to know have you ever tried integrating QR in your projects, cause if i face any issues , i hope u can help me
1 Like
Hi Leonidas i went through this documentation u provided and also checked other documentation for QR implementation, I’ve noticed that those are all ES6 based scripts,can playcanvas supports ES6 format or do we need to use any third party plugins.
Will it work ??? have you ever tried it in your project
No, but that’s what the readme in the project mentioned to use for including in a typical HTML browser project.
this is my test project result, and this is the link. seems it runs well.
It should be noted that you need to package the project to local and copy ‘qr-scanner-worker.min.js’ to the project root directory to run normally, I don’t know why the online version can’t find this script.
i added a work_path found from the debugger. now my program doesn’t report errors and it works (on the playcanvas server). so you need to add your own path and copy the script when you are setting the program locally.
That path references the project’s files and not the exported path. If that JS script is an asset, I recommend getting a reference to the asset and using https://developer.playcanvas.com/en/api/pc.Asset.html#getFileUrl instead
1 Like
oh, yeah. that’s right.it won’t report error when i code like this:
// subscribe to changes on resource
asset.on('load', asset._onLoad);
// callback
fn.call(this, asset, asset.resource);
var worker = this.app.assets.find("qr-scanner-worker.min.js");
if (worker) {
QrScanner.WORKER_PATH = worker.getFileUrl();
}
1 Like
What error do you get on the console?
in Chrome, it reports these errors.
in Microsoft Edge, in which the camera can start correctly, it was just the ‘security error’.
That’s a CORS issue, the QR scanner tries to load the web worker source file from a different domain name.
That’s something internally Playcanvas is doing, the build html doc is served from playcanv.as but the asset files are served by an aws server disk. It should work normally but web workers from what I know are stricter in that sense.
Maybe the qr scanner library you are using can load inline JS? So instead of passing a path to the worker, you just include the JS as a big string in place?
Another thing to consider is whether you want to build your own QR scanner or use an existing app. But if you’re using an existing app, you’ll want to make sure that it’s easy for your users to download and use.