@sapui5/sap.ndc 1.96.24 → 1.96.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapui5/sap.ndc",
-  "version": "1.96.24",
+  "version": "1.96.25",
   "description": "SAPUI5 Library sap.ndc",
   "homepage": "https://sap.github.io/ui5-tooling/pages/SAPUI5/",
   "author": "SAP SE (https://www.sap.com)",

package/src/sap/ndc/.library

@@ -5,7 +5,7 @@
     <vendor>SAP SE</vendor>
     <copyright>SAPUI5
  * (c) Copyright 2009-2022 SAP SE. All rights reserved.</copyright>
-    <version>1.96.24</version>
+    <version>1.96.25</version>
 
     <documentation>SAPUI5 library with controls with native device capabilities.</documentation>
 

package/src/sap/ndc/BarcodeScanner.js

@@ -82,9 +82,10 @@ sap.ui.define([
 	/* =========================================================== */
 		oStream,
 		oScanDialog,
+		oBarcodeScannerUIContainer,
+		oVideoTrack,
 		oBarcodeVideoDOM,
 		oBarcodeCanvasDOM,
-		oContext,
 		oBarcodeOverlayDOM,
 		oBarcodeHighlightDOM,
 
@@ -107,14 +108,11 @@ sap.ui.define([
 				},
 				deviceId: undefined,
 				preferFrontCamera: false,
-				zoom: null,
 				enableGS1Header: false
 			},
 			scanDialog: {
 				title: "", //oDialogTitle
 				onLiveUpdate: null, //Live update function
-				imgTruncX: 0,
-				imgTruncY: 0,
 				barcodeOverlaySetup: false,
 				isNoScanner: false,
 				scanningStartTime: 0,
@@ -376,7 +374,7 @@ sap.ui.define([
 	 * @private
 	 */
 	function loadZXingCPPAPI() {
-		Log.info("BarcodeScanner.loadZXingCPPAPI: load ZXingCPP API");
+		Log.debug("BarcodeScanner.loadZXingCPPAPI: load ZXingCPP API");
 		updateScannerAPI("ZXingCPP", oScannerAPIStatus.Loading);
 		sap.ui.require([
 			"sap/ndc/thirdparty/zxingcpp/zxing_reader"
@@ -515,7 +513,7 @@ sap.ui.define([
 			.catch(
 				function(oErr) {
 					oModel.setProperty("/devices/needCheck", false);
-					Log.error("BarcodeScanner.getDeviceCameras: Can not get device cameras.\n" + oErr);
+					Log.error("BarcodeScanner.getDeviceCameras: Can not get device cameras.\nError Message: " + oErr);
 			});
 	}
 
@@ -534,11 +532,13 @@ sap.ui.define([
 				Log.debug("BarcodeScanner.findMainCamera: can not find the main camera.");
 				fnCallback();
 			} else {
-				var oCamera = aCamerasClone.pop();
+				var oCamera = aCamerasClone[aCamerasClone.length - 1];
 				var oConstraints = deepClone(oModel.getProperty("/config/defaultConstraints"));
 				oConstraints.video.deviceId = {
 					exact: oCamera.deviceId
 				};
+				var oVideoResolution = calculateVideoResolution();
+				oConstraints.video = Object.assign(oConstraints.video, oVideoResolution);
 				window.navigator.mediaDevices
 				.getUserMedia(oConstraints)
 				.then(
@@ -553,7 +553,7 @@ sap.ui.define([
 							Log.debug("BarcodeScanner.findMainCamera: the main camera is " + oCamera.deviceId);
 							oStream = stream;
 							if (oStream) {
-								openBarcodeScannerDialogContains();
+								playbackVideoAndDecode();
 							} else {
 								oScanDialog.getModel().setProperty("/isNoScanner", true);
 								openBarcodeInputDialog();
@@ -561,11 +561,19 @@ sap.ui.define([
 						}, function() {
 							videoTrack.stop();
 							Log.debug("BarcodeScanner.findMainCamera: " + oCamera.deviceId + " is not the main camera, check the next camera");
+							aCamerasClone.pop();
 							fnCheckStream();
 						});
 					}
 				).catch(
-					function() {
+					function (error) {
+						Log.debug("BarcodeScanner.findMainCamera: getUserMedia() failed.\nError Message: " + error);
+						if (oModel.getProperty("/config/defaultConstraints/video/zoom") !== undefined) {
+							Log.debug("BarcodeScanner.findMainCamera: getUserMedia() failed maybe caused by unsupported constraint 'zoom', delete it and try again.");
+							delete oModel.getProperty("/config/defaultConstraints/video").zoom;
+						} else {
+							aCamerasClone.pop();
+						}
 						fnCheckStream();
 					}
 				);
@@ -613,7 +621,7 @@ sap.ui.define([
 						reject();
 					}
 				}).catch(function(oError) {
-					Log.debug("BarcodeScanner.checkFlashLight: Camera not started or not available\n" + oError);
+					Log.debug("BarcodeScanner.checkFlashLight: Camera not started or not available.\nError Message: " + oError);
 					reject();
 				});
 			});
@@ -804,21 +812,29 @@ sap.ui.define([
 		);
 
 		oScanDialog.setBusy(false);
-		oScanDialog.open();
 	}
 
 	/**
-	 * Initializes ZXing/ZXingCPP code reader scan, video device gets turned on and starts waiting for barcode
+	 * Open correct camera
 	 * @private
 	 */
-	function openBarcodeScannerDialog() {
+	function openCorrectCamera() {
 		if (!oModel.getProperty("/config/preferFrontCamera")) {
 			delete oModel.getProperty("/config/defaultConstraints/video").facingMode;
 			var oDevices = oModel.getProperty("/devices");
-			if (!oModel.getProperty("/config/deviceId") && !oDevices.mainCamera && !Device.os.ios && oDevices.needCheck && oDevices.all.length > 1) {
+			// when:
+			//		a. no camera seleted
+			//		b. main camera not found (no camera label contains '0, facing back')
+			//		c. not iphone devices
+			//		d. not Mac, or not ipad devices with Safari browser
+			//		e. needCheck flag !== false
+			//		f. camera list length > 1
+			// need to find main camera
+			if (!oModel.getProperty("/config/deviceId") && !oDevices.mainCamera && !Device.os.ios && !Device.os.macintosh && oDevices.needCheck && oDevices.all.length > 1) {
+				// if back camera list length > 1, find main camera in back camera list, or find it in all camera list
 				var oCameras = oDevices.back.length > 1 ? oDevices.back : oDevices.all;
 				var sCategory = oDevices.back.length > 1 ? "back" : "all";
-				Log.debug("BarcodeScanner.openBarcodeScannerDialog: start to find the main camera in " + sCategory + " camera list.");
+				Log.debug("BarcodeScanner.openCorrectCamera: start to find the main camera in " + sCategory + " camera list.");
 				findMainCamera(oCameras, openCamera);
 				return;
 			}
@@ -826,7 +842,8 @@ sap.ui.define([
 		openCamera();
 	}
 
-	function openCamera() {
+	function openCamera(bAttachOrientationChangeListener) {
+		Log.debug("BarcodeScanner.openCamera: start to open camera");
 		if (oModel.getProperty("/config/deviceId")) {
 			// if config/deviceId is set, use it as camera deviceId directly
 			delete oModel.getProperty("/config/defaultConstraints/video").facingMode;
@@ -846,13 +863,16 @@ sap.ui.define([
 				oModel.setProperty("/config/defaultConstraints/video/facingMode", "environment");
 			}
 		}
+		var oConstraints = deepClone(oModel.getProperty("/config/defaultConstraints"));
+		var oVideoResolution = calculateVideoResolution();
+		oConstraints.video = Object.assign(oConstraints.video, oVideoResolution);
 		window.navigator.mediaDevices
-			.getUserMedia(oModel.getProperty("/config/defaultConstraints"))
+			.getUserMedia(oConstraints)
 			.then(
 				function(stream) {
 					oStream = stream;
 					if (oStream) {
-						openBarcodeScannerDialogContains();
+						playbackVideoAndDecode(bAttachOrientationChangeListener);
 					} else {
 						oModel.setProperty("/scanDialog/isNoScanner", true);
 						openBarcodeInputDialog();
@@ -860,14 +880,21 @@ sap.ui.define([
 				}
 			)
 			.catch(
-				function() {
-					oModel.setProperty("/scanDialog/isNoScanner", true);
-					openBarcodeInputDialog();
+				function (error) {
+					Log.debug("BarcodeScanner.openCamera: getUserMedia() failed.\nError Message: " + error);
+					if (oModel.getProperty("/config/defaultConstraints/video/zoom") !== undefined) {
+						Log.debug("BarcodeScanner.openCamera: getUserMedia() failed maybe caused by unsupported constraint 'zoom', delete it and try again.");
+						delete oModel.getProperty("/config/defaultConstraints/video").zoom;
+						openCamera();
+					} else {
+						oModel.setProperty("/scanDialog/isNoScanner", true);
+						openBarcodeInputDialog();
+					}
 				}
 			);
 	}
 
-	function getScanDialog() {
+	function openScanDialog() {
 		oModel.checkUpdate(true);
 		var oDialogModel;
 
@@ -910,8 +937,25 @@ sap.ui.define([
 			oScanDialog.setModel(oResourceModel, "i18n");
 		}
 
+		oScanDialog.addStyleClass('sapUiNoContentPadding');
+		oScanDialog.setBusy(true);
+
 		if (isScannerAPIAvailable("ZXingCPP") && isUserMediaAccessSupported()) {
-			openBarcodeScannerDialog();
+			oScanDialog.attachAfterOpen(function() {
+				openCorrectCamera();
+			});
+			oScanDialog.destroyContent();
+			oBarcodeHighlightDOM = undefined;
+			oBarcodeOverlayDOM = undefined;
+			oBarcodeVideoDOM = undefined;
+			oBarcodeCanvasDOM = undefined;
+
+			oBarcodeScannerUIContainer = new BarcodeScannerUIContainer();
+			oScanDialog.addContent(oBarcodeScannerUIContainer);
+			oScanDialog.setContentWidth('100%');
+			oScanDialog.setContentHeight('100%');
+
+			oModel.setProperty("/scanDialog/barcodeOverlaySetup", false);
 		} else {
 			if (oModel.getProperty("/available")) {
 				oModel.setProperty("/scanDialog/isNoScanner", false);
@@ -920,8 +964,7 @@ sap.ui.define([
 			}
 			openBarcodeInputDialog();
 		}
-
-		return oScanDialog;
+		oScanDialog.open();
 	}
 
 	/**
@@ -941,39 +984,39 @@ sap.ui.define([
 	 */
 	function scanWithCordova() {
 		var options;
-			if (oModel.getProperty("/config/preferFrontCamera")) {
-				options = {
-					preferFrontCamera: true
-				};
-			}
-			oModel.getProperty("/apis/Cordova/scannerAPI").scan(
-				function (oResult) {
-					if (oResult.cancelled === "false" || !oResult.cancelled) {
-						oResult.cancelled = false;
-						var onFnSuccess = oModel.getProperty("/callBackHandler/onFnSuccess");
-						if (typeof onFnSuccess === "function") {
-							onFnSuccess(oResult);
-						}
-					} else {
-						getScanDialog();
+		if (oModel.getProperty("/config/preferFrontCamera")) {
+			options = {
+				preferFrontCamera: true
+			};
+		}
+		oModel.getProperty("/apis/Cordova/scannerAPI").scan(
+			function (oResult) {
+				if (oResult.cancelled === "false" || !oResult.cancelled) {
+					oResult.cancelled = false;
+					var onFnSuccess = oModel.getProperty("/callBackHandler/onFnSuccess");
+					if (typeof onFnSuccess === "function") {
+						onFnSuccess(oResult);
 					}
-					oModel.setProperty("/bReady", true);
-				},
-				function (oEvent) {
-					Log.error("BarcodeScanner.scanWithCordova: Barcode scanning failed.");
-					oModel.setProperty("/bReady", true);
-					var onFnFail = oModel.getProperty("/callBackHandler/onFnFail");
-					if (typeof onFnFail === "function") {
-						if (typeof oEvent === "string") {
-							var str = oEvent;
-							oEvent = {"text": str};
-							Log.debug("BarcodeScanner.scanWithCordova: Change the type of oEvent from string to object");
-						}
-						onFnFail(oEvent);
+				} else {
+					openScanDialog();
+				}
+				oModel.setProperty("/bReady", true);
+			},
+			function (oEvent) {
+				Log.error("BarcodeScanner.scanWithCordova: Barcode scanning failed.");
+				oModel.setProperty("/bReady", true);
+				var onFnFail = oModel.getProperty("/callBackHandler/onFnFail");
+				if (typeof onFnFail === "function") {
+					if (typeof oEvent === "string") {
+						var str = oEvent;
+						oEvent = {"text": str};
+						Log.debug("BarcodeScanner.scanWithCordova: Change the type of oEvent from string to object");
 					}
-				},
-				options
-			);
+					onFnFail(oEvent);
+				}
+			},
+			options
+		);
 	}
 
 	/**
@@ -984,7 +1027,7 @@ sap.ui.define([
 		if (checkScannerAPIStatus("ZXingCPP", oScannerAPIStatus.Initial)) {
 			Log.debug("BarcodeScanner.scanWithZXingCPP: ZXingCPP instances is not loaded, start to load them.");
 			loadZXingCPPInstance(function() {
-				getScanDialog();
+				openScanDialog();
 			}, function() {
 				if (isScannerAPIAvailable("ZebraEnterpriseBrowser")) {
 					setCurrentScannerAPI("ZebraEnterpriseBrowser");
@@ -993,71 +1036,47 @@ sap.ui.define([
 					setCurrentScannerAPI("unknown");
 					Log.warning("BarcodeScanner.scanWithZXingCPP: Zebra is unavailable too, set the current scanner API to unknown.");
 				}
-				getScanDialog();
+				openScanDialog();
 			});
 		} else {
-			getScanDialog();
+			Log.debug("BarcodeScanner.scanWithZXingCPP: get scan dialog.");
+			openScanDialog();
 		}
 	}
 
 	/**
-	 * Opens Barcode Scanner dialog, called when code reader is ready
+	 * Playback the video, then decode via ZXingCPP
 	 * @private
 	 */
-	function openBarcodeScannerDialogContains() {
-		var oBarcodeScannerUIContainer;
-		Log.debug("BarcodeScanner.openBarcodeScannerDialogContains: Use ZXingCPP to read the barcode.");
-		oScanDialog.attachAfterOpen(function() {
-			// Dev note: if video element dom reference is unavailable at this point (console exception)
-			// some error happened during dialog creation and may not be directly related to video element
-			oScanDialog.getEndButton().setEnabled(true);
-			oScanDialog.setBusy(false);
-
-			if (!oBarcodeHighlightDOM) {
-				oBarcodeHighlightDOM = oBarcodeScannerUIContainer.getDomRef('highlight');
-			}
-			if (!oBarcodeVideoDOM) {
-				oBarcodeVideoDOM = oBarcodeScannerUIContainer ? document.createElement("video") : undefined;
-				if (oBarcodeVideoDOM) {
-					oBarcodeVideoDOM.setAttribute("id", "video");
-					oBarcodeVideoDOM.setAttribute("autoplay", "autoplay");
-					oBarcodeVideoDOM.setAttribute("webkit-playsinline", "webkit-playsinline");
-					oBarcodeVideoDOM.setAttribute("playsinline", "playsinline");
-				}
-			}
-			if (!oBarcodeCanvasDOM) {
-				oBarcodeCanvasDOM = oBarcodeScannerUIContainer ? oBarcodeScannerUIContainer.getDomRef('canvas') : undefined;
-				oContext = oBarcodeCanvasDOM.getContext("2d", { willReadFrequently: true });
-			}
-			try {
-				oBarcodeVideoDOM.srcObject = oStream;
-				oBarcodeVideoDOM.play().then(function() {
-					oBarcodeCanvasDOM.width = oBarcodeVideoDOM.videoWidth;
-					oBarcodeCanvasDOM.height = oBarcodeVideoDOM.videoHeight;
-					decodeWithZXingCPP();
-				});
-			} catch (err) {
-				Log.debug("BarcodeScanner.openBarcodeScannerDialogContains is failed. error: " + err);
-			}
-		});
-		oScanDialog.destroyContent();
-		oBarcodeHighlightDOM = undefined;
-		oBarcodeOverlayDOM = undefined;
-		oBarcodeVideoDOM = undefined;
-
-		oBarcodeCanvasDOM = undefined;
-		oContext = undefined;
-
-		oBarcodeScannerUIContainer = new BarcodeScannerUIContainer();
-		oScanDialog.addContent(oBarcodeScannerUIContainer);
-
-		oScanDialog.setContentWidth('100%');
-		oScanDialog.setContentHeight('100%');
-		oScanDialog.addStyleClass('sapUiNoContentPadding');
-		oScanDialog.setBusy(true);
-		oScanDialog.open();
+	function playbackVideoAndDecode(bAttachOrientationChangeListener) {
+		// Dev note: if video element dom reference is unavailable at this point (console exception)
+		// some error happened during dialog creation and may not be directly related to video element
+		oScanDialog.getEndButton().setEnabled(true);
+		oScanDialog.setBusy(false);
 
-		oModel.setProperty("/scanDialog/barcodeOverlaySetup", false);
+		if (!oBarcodeHighlightDOM) {
+			oBarcodeHighlightDOM = oBarcodeScannerUIContainer.getDomRef('highlight');
+		}
+		if (!oBarcodeVideoDOM) {
+			oBarcodeVideoDOM = oBarcodeScannerUIContainer ? oBarcodeScannerUIContainer.getDomRef('video') : undefined;
+		}
+		try {
+			oBarcodeVideoDOM.srcObject = oStream;
+			oBarcodeVideoDOM.play().then(function() {
+				// show scan overlay box
+				scanFrame();
+				if (Device.support.orientation && bAttachOrientationChangeListener !== false) {
+					Device.orientation.attachHandler(orientationChangeListener);
+				}
+				Log.debug("BarcodeScanner.playbackVideoAndDecode: video screen size " + oBarcodeVideoDOM.videoHeight + "X" + oBarcodeVideoDOM.videoWidth);
+				oVideoTrack = typeof oStream.stop === "function" ? oStream : oStream.getTracks()[0];
+				var settings = oVideoTrack.getSettings();
+				Log.debug("BarcodeScanner.playbackVideoAndDecode: video screen frameRate is " + settings.frameRate + ", zoom is " + settings.zoom);
+				decodeWithZXingCPP();
+			});
+		} catch (err) {
+			Log.debug("BarcodeScanner.playbackVideoAndDecode is failed. error: " + err);
+		}
 	}
 
 	/**
@@ -1065,31 +1084,43 @@ sap.ui.define([
 	 * @private
 	 */
 	function decodeWithZXingCPP() {
-		Log.info("BarcodeScanner.decodeWithZXingCPP: start to decode");
+		Log.debug("BarcodeScanner.decodeWithZXingCPP: start to decode");
 		if (!oBarcodeVideoDOM || !oBarcodeVideoDOM.srcObject) {
+			Log.debug("BarcodeScanner.decodeWithZXingCPP: video dom doesn't exist, stop decoding");
 			return;
 		}
-		scanFrame();
 
 		try {
-			oContext.drawImage(oBarcodeVideoDOM, 0, 0, oBarcodeCanvasDOM.width, oBarcodeCanvasDOM.height);
-
-			var imgWidth = oBarcodeCanvasDOM.width;
-			var imgHeight = oBarcodeCanvasDOM.height;
-			var imageData = oBarcodeCanvasDOM.getContext('2d').getImageData(0, 0, imgWidth, imgHeight);
+			// use canvas to get video frame as image data
+			if (!oBarcodeCanvasDOM) {
+				oBarcodeCanvasDOM = oBarcodeScannerUIContainer ? document.createElement("canvas") : undefined;
+			}
+			if (!oBarcodeCanvasDOM) {
+				Log.debug("BarcodeScanner.decodeWithZXingCPP: canvas dom doesn't exist, stop decoding");
+				return;
+			}
+			var oContext = oBarcodeCanvasDOM.getContext("2d", { willReadFrequently: true });
+			var imgWidth = oBarcodeVideoDOM.videoWidth;
+			var imgHeight = oBarcodeVideoDOM.videoHeight;
+			oBarcodeCanvasDOM.width = imgWidth;
+			oBarcodeCanvasDOM.height = imgHeight;
+			oContext.drawImage(oBarcodeVideoDOM, 0, 0, imgWidth, imgHeight);
+			var imageData = oContext.getImageData(0, 0, imgWidth, imgHeight);
 			var oData = imageData.data;
+			// decode image data via ZXingCPP
 			var buffer;
 			var oZXingCPPScannerAPI = oModel.getProperty("/apis/ZXingCPP/scannerAPI");
 			try {
 				buffer = oZXingCPPScannerAPI._malloc(oData.length);
 				oZXingCPPScannerAPI.HEAPU8.set(oData, buffer);
 			} catch (err) {
-				Log.info("BarcodeScanner.decodeWithZXingCPP: zxing.HEAPU8 error: " + err);
+				Log.error("BarcodeScanner.decodeWithZXingCPP: zxing.HEAPU8 error: " + err);
 			}
 			var results = oZXingCPPScannerAPI.readBarcodesFromPixmap(buffer, imgWidth, imgHeight, true, "", 1);
 			oZXingCPPScannerAPI._free(buffer);
 			var iSize = results.size();
 			if (iSize > 0 && results.get(0).format) {
+				Log.debug("BarcodeScanner.decodeWithZXingCPP: decode successful");
 				var result = results.get(0);
 				highlightResult(result);
 				if (result.cancelled === "false" || !result.cancelled) {
@@ -1139,8 +1170,8 @@ sap.ui.define([
 		}
 
 		if (oBarcodeHighlightDOM) {
-			scaleX = oBarcodeCanvasDOM.clientWidth / oBarcodeVideoDOM.videoWidth;
-			scaleY = oBarcodeCanvasDOM.clientHeight / oBarcodeVideoDOM.videoHeight;
+			scaleX = oBarcodeVideoDOM.clientWidth / oBarcodeVideoDOM.videoWidth;
+			scaleY = oBarcodeVideoDOM.clientHeight / oBarcodeVideoDOM.videoHeight;
 			if (result.position) {
 				result.resultPoints = [
 					result.position.topLeft,
@@ -1173,8 +1204,8 @@ sap.ui.define([
 			oBarcodeHighlightDOM.hidden = false;
 			oBarcodeHighlightDOM.style.top = top * scaleY + 'px';
 			oBarcodeHighlightDOM.style.left = left * scaleX + 'px';
-			oBarcodeHighlightDOM.style.width = (right - left > 0 ? (right - left + oModel.getProperty("/scanDialog/imgTruncX")) * scaleX : 5) + 'px';
-			oBarcodeHighlightDOM.style.height = (bottom - top > 0 ? (bottom - top + oModel.getProperty("/scanDialog/imgTruncY")) * scaleY : 5) + 'px';
+			oBarcodeHighlightDOM.style.width = (right - left > 0 ? (right - left) * scaleX : 5) + 'px';
+			oBarcodeHighlightDOM.style.height = (bottom - top > 0 ? (bottom - top) * scaleY : 5) + 'px';
 		}
 	}
 
@@ -1190,22 +1221,81 @@ sap.ui.define([
 		oBarcodeHighlightDOM.style.height = '0';
 	}
 
+	/**
+	 * If orientaition changed, reopen camera to maxsize video screen
+	 * @private
+	 */
+	function orientationChangeListener(oNewOrientation) {
+		oScanDialog.setBusy(true);
+		var sOrientation = oNewOrientation.landscape ? "landscape" : "portrait";
+		Log.debug("BarcodeScanner.orientationChangeListener: device orientation changed to " + sOrientation + ", call openCamera again to resize");
+		if (oBarcodeOverlayDOM) {
+			// hide overlay during orientation change
+			oBarcodeOverlayDOM.hidden = true;
+		}
+		// close the camera since video screen is not in full size after orientation changed
+		closeScannerContain(false);
+		if (Device.os.ios || Device.os.macintosh) {
+			// on iOS devices (iphone and ipad), the dialog may be in small size and moved to top left after orientation changed, so max size and reposition it in center
+			oScanDialog._positionDialog();
+		}
+		// need to wait for the orientation change finished, then reopen camera so that the video screen is in full size
+		setTimeout(function() {
+			openCamera(false);
+		}, 500);
+	}
+
+	/**
+	 * Calculate video height and width
+	 * @returns {object} Video height and width object
+	 * @private
+	 */
+	function calculateVideoResolution() {
+		var iAvailHeight = oBarcodeScannerUIContainer.getDomRef().clientHeight,
+			iAvailWidth = oBarcodeScannerUIContainer.getDomRef().clientWidth,
+			iWidth = 1920,
+			iHeight = 1440;
+		/*
+		if (iAvailHeight > iAvailWidth) {
+			iHeight = 1920;
+			iWidth = Math.trunc(1920 * iAvailWidth / iAvailHeight);
+		} else {
+			iWidth = 1920;
+			iHeight = Math.trunc(1920 * iAvailHeight / iAvailWidth);
+		}*/
+		// in portrait mode, width means height ???, so above codes will meet Not Full Screen issue when in this mode
+		// have to change to below, need to check document
+		if (iAvailHeight > iAvailWidth) {
+			iHeight = Math.trunc(1920 * iAvailWidth / iAvailHeight);
+		} else {
+			iHeight = Math.trunc(1920 * iAvailHeight / iAvailWidth);
+		}
+		return {
+			width: { ideal: iWidth },
+			height: { ideal: iHeight }
+		};
+	}
+
 	function scanFrame() {
-		if (!oScanDialog || !oBarcodeCanvasDOM) {
+		Log.debug("BarcodeScanner.scanFrame: start to set up overlay dom");
+		if (!oScanDialog || !oBarcodeVideoDOM || !oBarcodeVideoDOM.videoHeight || !oBarcodeVideoDOM.videoWidth) {
+			Log.debug("BarcodeScanner.scanFrame: scan dialog or video screen is closed, stop set up");
 			return;
 		}
 		var iInactiveZonePercent = 0.15;
-		var oBarcodeScannerUIContainer = oScanDialog.getContent()[0];
 
 		if (!oBarcodeOverlayDOM && oBarcodeScannerUIContainer) {
 			oBarcodeOverlayDOM = oBarcodeScannerUIContainer.getDomRef('overlay');
 		}
 
-		updateZoom();
-
 		if (oBarcodeOverlayDOM) {
-			var oBarcodeOverlayWidthTemp = oBarcodeCanvasDOM.clientWidth * (1 - 2 * iInactiveZonePercent);
-			var oBarcodeOverlayHeightTemp = oBarcodeCanvasDOM.clientHeight * (1 - 2 * iInactiveZonePercent);
+			// show overlay since it may be hidden during orientation change
+			oBarcodeOverlayDOM.hidden = false;
+			var iBarcodeVideoDOMWidth = oBarcodeVideoDOM.clientWidth,
+				iBarcodeVideoDOMHeight = oBarcodeVideoDOM.clientHeight;
+			var oBarcodeOverlayWidthTemp = iBarcodeVideoDOMWidth * (1 - 2 * iInactiveZonePercent);
+			var oBarcodeOverlayHeightTemp = iBarcodeVideoDOMHeight * (1 - 2 * iInactiveZonePercent);
+
 
 			if (oBarcodeOverlayWidthTemp <= oBarcodeOverlayHeightTemp) {
 				oBarcodeOverlayHeightTemp = oBarcodeOverlayWidthTemp * (1 - 2 * iInactiveZonePercent);
@@ -1219,73 +1309,23 @@ sap.ui.define([
 
 				oBarcodeOverlayDOM.style.width = oBarcodeOverlayWidthTemp + 'px';
 				oBarcodeOverlayDOM.style.height = oBarcodeOverlayHeightTemp + 'px';
-				oBarcodeOverlayDOM.style.borderWidth = (oBarcodeCanvasDOM.clientHeight - oBarcodeOverlayHeightTemp) / 2 + 'px ' + (oBarcodeCanvasDOM.clientWidth - oBarcodeOverlayWidthTemp) / 2 + 'px';
-			}
-		}
-	}
-
-	function updateZoom() {
-		if (oModel.getProperty("/config/zoom") !== "skipUpdateZoom" && oBarcodeVideoDOM) {
-			var videoTrack = oBarcodeVideoDOM.srcObject.getVideoTracks();
-			var oSupport = window.navigator.mediaDevices.getSupportedConstraints();
-			var capabilities = videoTrack[0].getCapabilities();
-			// Verify the permission about updating zoom
-			if (oSupport.zoom && capabilities && capabilities.zoom) {
-				Log.debug("BarcodeScanner.updateZoom: Support zoom to update");
-				if (oModel.getProperty("/config/zoom") === 'undefined' || oModel.getProperty("/config/zoom") === null) {
-					// reset zoom
-					oModel.setProperty("/config/zoom", capabilities.zoom.min);
-				}
-			} else {
-				Log.debug("BarcodeScanner.updateZoom: Don't support zoom or getCapabilities() failed.");
-				oModel.setProperty("/config/zoom", "skipUpdateZoom");
-				return;
-			}
-			// Update zoom
-			try {
-				var fRoom = oModel.getProperty("/config/zoom");
-				videoTrack[0].applyConstraints(
-					{
-						advanced: [{
-							zoom: fRoom
-						}]
-					}
-				).then(
-					function() {
-						oModel.setProperty("/config/zoom", "skipUpdateZoom");
-						Log.debug("BarcodeScanner.updateZoom: Zoom is updated to " + fRoom);
-					}
-				).catch(
-					function(error) {
-						if (error && error.message && error.message.match(/out of range|Failed to read the 'zoom' property/i)) {
-							oModel.setProperty("/config/zoom", "skipUpdateZoom");
-							MessageToast.show(
-								oResourceModel.getResourceBundle().getText('BARCODE_DIALOG_CAMERA_UPDATE_PARAMETER_ERROR_MSG', 'zoom'),
-								{
-									duration: 1000
-								}
-							);
-						} else {
-							Log.error("BarcodeScanner.updateZoom: Update zoom to " + fRoom + " failed. Error Message:" + error);
-						}
-					}
-				);
-			} catch (err) {
-				Log.error("BarcodeScanner.updateZoom: applyConstraints() failed. Error Message:" + err);
-				oModel.setProperty("/config/zoom", "skipUpdateZoom");
+				oBarcodeOverlayDOM.style.borderWidth = (iBarcodeVideoDOMHeight - oBarcodeOverlayHeightTemp) / 2 + 'px ' + (iBarcodeVideoDOMWidth - oBarcodeOverlayWidthTemp) / 2 + 'px';
 			}
-			var settings = videoTrack[0].getSettings();
-			Log.debug("BarcodeScanner.updateZoom: frameRate is " + settings.frameRate + ". zoom is " + settings.zoom);
 		}
 	}
 
-	function closeScannerContain() {
+	function closeScannerContain(bDetachOrientationChangeListener) {
 		// oStream and oBarcodeVideoDOM.srcObject point to the same video stream, set them to undefined when closing scan screen
+		if (oVideoTrack) {
+			oVideoTrack.stop();
+			oVideoTrack = undefined;
+		}
 		if (oStream) {
-			var videoTrack = typeof oStream.stop === "function" ? oStream : oStream.getTracks()[0];
-			videoTrack.stop();
 			oStream = undefined;
 		}
+		if (Device.support.orientation && bDetachOrientationChangeListener !== false) {
+			Device.orientation.detachHandler(orientationChangeListener);
+		}
 		if (oBarcodeVideoDOM && oBarcodeVideoDOM.srcObject) {
 			oBarcodeVideoDOM.srcObject = undefined;
 		}
@@ -1420,6 +1460,7 @@ sap.ui.define([
 			Log.error("BarcodeScanner.scan: Barcode scanning is already in progress.");
 			return;
 		}
+		Log.debug("BarcodeScanner.scan: start to scan barcode.");
 
 		oModel.setProperty("/bReady", false);
 		if (typeof fnSuccess === 'function') {
@@ -1459,15 +1500,32 @@ sap.ui.define([
 				}
 			);
 		}
-		oModel.setProperty("/config/zoom", zoom);
+		// Reset zoom
+		if (oModel.getProperty("/config/defaultConstraints/video/zoom") !== undefined) {
+			delete oModel.getProperty("/config/defaultConstraints/video").zoom;
+		}
+		// apply value of zoom parameter
+		if (typeof zoom === "number" && zoom > 0) {
+			oModel.setProperty("/config/defaultConstraints/video/zoom", zoom);
+		} else if (typeof zoom !== 'undefined') {
+			MessageToast.show(
+				oResourceModel.getResourceBundle().getText('BARCODE_DIALOG_CAMERA_UPDATE_PARAMETER_ERROR_MSG', 'zoom'),
+				{
+					duration: 1000
+				}
+			);
+		}
 		oModel.setProperty("/scanDialog/keepCameraScan", keepCameraScan);
 		oModel.checkUpdate(true);
 
 		if (checkZebraEBScanAvailable()) {
+			Log.debug("BarcodeScanner.scan: Zebra EB is available, use it to scan barcode.");
 			scanWithZebra();
 		} else if (isScannerAPIAvailable("Cordova")) {
+			Log.debug("BarcodeScanner.scan: Cordova is available, use it to scan barcode.");
 			scanWithCordova();
 		} else {
+			Log.debug("BarcodeScanner.scan: both of Zebra EB and Cordova are NOT available, use ZXingCPP to scan barcode.");
 			scanWithZXingCPP();
 		}
 	};
@@ -1569,7 +1627,7 @@ sap.ui.define([
 					Log.error("BarcodeScanner.scan: The scanner API '" + scannerAPI + "' is unavailable, will use current scanner API '" + oModel.getProperty("/apis/" + getCurrentScannerAPI() + "/description") + "' to scan the barcode.");
 					return false;
 				} else {
-					Log.info("BarcodeScanner.scan: Switch to scanner API '" + scannerAPI + "' to scan the barcode.");
+					Log.debug("BarcodeScanner.scan: Switch to scanner API '" + scannerAPI + "' to scan the barcode.");
 					setCurrentScannerAPI(scannerAPI);
 					return true;
 				}
@@ -1577,7 +1635,7 @@ sap.ui.define([
 				Log.error("BarcodeScanner.scan: The scanner API '" + scannerAPI + "' is unavailable, will use current scanner API '" + oModel.getProperty("/apis/" + getCurrentScannerAPI() + "/description") + "' to scan the barcode.");
 				return false;
 			} else {
-				Log.info("BarcodeScanner.scan: Switch to scanner API '" + scannerAPI + "' to scan the barcode.");
+				Log.debug("BarcodeScanner.scan: Switch to scanner API '" + scannerAPI + "' to scan the barcode.");
 				setCurrentScannerAPI(scannerAPI);
 				return true;
 			}

package/src/sap/ndc/BarcodeScannerUIContainer.js

@@ -24,10 +24,13 @@ sap.ui.define([
 				oRm.openStart("div", oControl);
 				oRm.class("sapNdcRTCDialogVideo");
 				oRm.openEnd();
-					oRm.openStart("canvas", oControl.getId() + "-canvas");
+					oRm.openStart("video", oControl.getId() + "-video");
+					oRm.attr("autoplay", "autoplay");
+					oRm.attr("webkit-playsinline", "webkit-playsinline");
+					oRm.attr("playsinline", "playsinline");
 					oRm.class("sapNdcRTCDialogVideoContainer");
 					oRm.openEnd();
-					oRm.close("canvas");
+					oRm.close("video");
 				oRm.close("div");
 
 				// Overlay that is used to mark scan area

package/src/sap/ndc/css/sapNdcBarcodeScanner.css

@@ -28,7 +28,6 @@
 .sapNdcRTCDialogVideo .sapNdcRTCDialogVideoContainer {
 	width: 100%;
 	height: 100%;
-	object-fit: cover;
 }
 
 .sapNdcRTCDialogOverlay .sapNdcRTCDialogOverlayBox {

package/src/sap/ndc/library.js

@@ -32,7 +32,7 @@ sap.ui.define(['sap/m/library', 'sap/ui/core/library'],
 		],
 		elements: [],
 		noLibraryCSS: true,
-		version: "1.96.24"
+		version: "1.96.25"
 	});
 
 	return sap.ndc;

package/src/sap/ndc/messagebundle_en.properties

@@ -1,20 +1,32 @@
+#This is the resource bundle for the sap.ndc library
+#
 
+#XTIT: title of the manual barcode input
 BARCODE_DIALOG_TITLE=Enter Barcode
 
+#XBUT: OK button in the manual barcode input dialog
 BARCODE_DIALOG_OK=OK
 
+#XBUT: Cancel button in the manual barcode input dialog
 BARCODE_DIALOG_CANCEL=Cancel
 
+#XFLD: Placeholder of the barcode input field
 BARCODE_DIALOG_PLACEHOLDER=Enter barcode
 
+#YMSG: Message in the manual barcode input dialog
 BARCODE_DIALOG_MSG=Scanner is not available
 
+#XMSG: error message for updating parameter of Camera
 BARCODE_DIALOG_CAMERA_UPDATE_PARAMETER_ERROR_MSG=The {0} parameter is out of range.
 
+#XTIT: title of the scan barcode dialog
 BARCODE_DIALOG_SCANNING_TITLE=Scan Barcode
 
+#XTOL: Barcode Scanner Button tooltip
 BARCODE_SCANNER_BUTTON_TOOLTIP=Bar Code Scanner Button
 
+#XTIT: title of the scan bar busy dialog
 BARCODE_DIALOG_BUSY_TITLE=Loading Libraries
 
+#XTXT: text of loading zxing-cpp in the scan bar busy dialog
 BARCODE_DIALOG_BUSY_TEXT_ZXINGCPP=Loading ZXing-cpp library...

package/src/sap/ndc/messagebundle_sh.properties

@@ -13,7 +13,7 @@ BARCODE_DIALOG_CAMERA_UPDATE_PARAMETER_ERROR_MSG=Parametar {0} je van raspona.
 
 BARCODE_DIALOG_SCANNING_TITLE=Skeniraj bar kod
 
-BARCODE_SCANNER_BUTTON_TOOLTIP=Bar Code Scanner Button
+BARCODE_SCANNER_BUTTON_TOOLTIP=Dugme skenera bar koda
 
 BARCODE_DIALOG_BUSY_TITLE=U\u010Ditavanje biblioteka
 

package/src/sap/ndc/messagebundle_sr.properties

@@ -13,7 +13,7 @@ BARCODE_DIALOG_CAMERA_UPDATE_PARAMETER_ERROR_MSG=\u041F\u0430\u0440\u0430\u043C\
 
 BARCODE_DIALOG_SCANNING_TITLE=\u0421\u043A\u0435\u043D\u0438\u0440\u0430\u0458 \u0431\u0430\u0440 \u043A\u043E\u0434
 
-BARCODE_SCANNER_BUTTON_TOOLTIP=Bar Code Scanner Button
+BARCODE_SCANNER_BUTTON_TOOLTIP=\u0414\u0443\u0433\u043C\u0435 \u0441\u043A\u0435\u043D\u0435\u0440\u0430 \u0431\u0430\u0440 \u043A\u043E\u0434\u0430
 
 BARCODE_DIALOG_BUSY_TITLE=\u0423\u0447\u0438\u0442\u0430\u0432\u0430\u045A\u0435 \u0431\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0430