QR Code Scanner in Fiori
Implementing QR Code Scanner in Fiori as a browser based app
Our customer wanted to have a QR code scanner implemented as a Fiori app. There are lot of api-s, 3rd party plugins, blogs and other pointers available for this. I went through almost all the available information on the net but none suited our requirement.
The need of the hour was to have a browser based custom Fiori-like app which will work seamlessly across platforms and devices. Hence, a hybrid or native app feature was ruled out completely. Having a separate plugin as installable in the customer device was not preferable as well. Users wanted the app should work like any other custom UI5 app that they have in the Fiori launchpad.
After a lot of analysis, I finally found this 3rd party plugin which was exactly suitable for my scenario.
This is available in GitHub in the link: https://github.com/Lazarsoft/jsqrcode
Now though I found what I need but was struggling to find a step-by-step guide to implement this in my project. I am trying to put all my findings and experience in this blog which might help someone else as well.
- Create a UI5 project with a view and controller
- Create a folder named “js” in the webapp folder of the UI5 project and copy all the 3rd party libraries in the “js” file
- Update manifest.json file accordingly (the sequence of file is important here)
- The view is updated with a scan button and a container (to hold the camera popup)
- The controller is updated with event handler for the scan function
scanCode: function(oEvent) { this.codeScanned = false; var container = new sap.m.VBox({ "width": "512px", "height": "384px" }); var button = new sap.m.Button("", { text: "Cancel", type: "Reject", press: function() { dialog.close(); } }); var dialog = new sap.m.Dialog({ title: "Scan Window", content: [ container, button ] }); dialog.open(); var video = document.createElement("video"); video.autoplay = true; var that = this; qrcode.callback = function(data) { if (data !== "error decoding QR Code") { this.codeScanned = true; that._oScannedInspLot = data; //sap.m.MessageBox.alert(data);//Message Pops up for scanned Value dialog.close(); } }.bind(this); var canvas = document.createElement("canvas"); canvas.width = 512; canvas.height = 384; navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: "environment", width: { ideal: 512 }, height: { ideal: 384 } } }) .then(function(stream) { video.srcObject = stream; var ctx = canvas.getContext('2d'); var loop = (function() { if (this.codeScanned) { //video.stop(); return; } else { ctx.drawImage(video, 0, 0); setTimeout(loop, 1000 / 30); // drawing at 30fps qrcode.decode(canvas.toDataURL()); } }.bind(this)); loop(); }.bind(this)) .catch(function(error) { sap.m.MessageBox.error("Unable to get Video Stream"); }); container.getDomRef().appendChild(canvas); },
- Save and run the application.
- As we click on the scan button, the integrated camera of the device (or webcam incase of a laptop) gets activated.
- Once the scanning is done and we get the input in Fiori, we can go ahead with the required functionality.
Hope this helps….
Please add some screenshots as well.
Hello,this is very useful but i am getting only time that is taken to scan the qr code.How to get the full data.
Hi Mickey,
It works well in laptop , but not working in Ipad or mobile devices ? How to resolve this ?