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, 3^rd 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 3^rd 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.

1. Create a UI5 project with a view and controller
2. Create a folder named “js” in the webapp folder of the UI5 project and copy all the 3^rd party libraries in the “js” file 
3. Update manifest.json file accordingly (the sequence of file is important here) 
4. The view is updated with a scan button and a container (to hold the camera popup) 
5. 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);
   		},
   ​

6. Save and run the application.
7. As we click on the scan button, the integrated camera of the device (or webcam incase of a laptop) gets activated.
8. Once the scanning is done and we get the input in Fiori, we can go ahead with the required functionality.

Hope this helps….