Skip to Content
Author's profile photo Former Member

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:

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 3rd 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() {
    			var dialog = new sap.m.Dialog({
    				title: "Scan Window",
    				content: [
    			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
    			var canvas = document.createElement("canvas");
    			canvas.width = 512;
    			canvas.height = 384;
    					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) {
    						} else {
    							ctx.drawImage(video, 0, 0);
    							setTimeout(loop, 1000 / 30); // drawing at 30fps
    				.catch(function(error) {
    					sap.m.MessageBox.error("Unable to get Video Stream");
  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….


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai

      Please add some screenshots as well.


      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Jaiganesh Ravindran
      Jaiganesh Ravindran

      Hi Mickey,

      It works well in laptop , but not working in Ipad or mobile devices ? How to resolve this ?