Поворот устройства с неправильным размером наложения камеры

Я новичок в кодировании и разработке приложений (почти месяц), поэтому, пожалуйста, потерпите меня. Я работаю над приложением, которое использует плагин для сканирования штрих-кода (настраиваемый в соответствии с потребностями).

В главном представлении приложения (первое окно) у меня есть блок, который при нажатии запускает сканирование плагина штрих-кода(). Это открывает сканер точных размеров, как блок основного вида. Но если я поверну устройство, размеры представления сканера штрих-кода выходят из строя.

Есть ли способ настроить/изменить значения x, y, w, h представления сканера штрих-кода, чтобы выровнять его с блоком моего приложения в основном представлении?

При нажатии на блок «Сканировать» в главном представлении моего приложения этот сканер открывается как наложение с настраиваемыми кнопками:

После поворота устройства и щелчка по блоку сканирования (зеленый блок на главном экране приложения) он выглядит так:

Угловой код, передающий размеры для зеленого блока сканирования в главном представлении приложения:

.directive('barcodeScanner', function ($localStorage, _, $window) {
function link(scope, element, attrs){
    scope.scanning = false;
    scope.paused = false;
    //Barcode-Scanning Green Window
    var width = $window.innerWidth;
    var height = width * 3/4;
    if(width > 450){
        width = 400;
        height = 300;
    }
    scope.dimensionStyle = {
        width: width+"px",
        height: height+"px",
        "margin-left" : "auto",
        "margin-right" : "auto"
    }
    scope.$on('stop-scanner', function () {
        scope.paused=false;
        stopScanner();
    });
    scope.$on('start-scanner', function () {
        scope.paused=true;
        startScanner();
    });

    var mH = $window.innerHeight,
        mW = $window.innerWidth;
    var startBtn = element[0].querySelector('.barcode-start-btn');
    function startScanner(){
        var rect = startBtn.getBoundingClientRect();
        var options = {
            wPer : rect.width/mW,
            hPer : rect.height/mH,
            yPer : rect.top/mH,
            xPer : rect.left/mW
        }
        scope.scanning = true;
        cordova.plugins.barcodescanner.scan(function(result) {
                    scope.$emit('barcode-scanned',result);
              },
              options
        );
    }

Мой barcodescanner.java плагина, который запускается для открытия сканера:

   @Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) {
    this.callbackContext = callbackContext;
    this.requestArgs = args;

    if (action.equals(SCAN)) {
        // create fragment
        if(!hasPermisssion()) {
            requestPermissions(0);
        } else {
            scan(args);
        }
    } else if(action.equals(STOP)) {
        stop(args);
    } else {
        return false;
    }
    return true;
}
public void scan(final JSONArray args) {
    final CordovaPlugin that = this;

    cordova.getThreadPool().execute(new Runnable() {
        public void run() {

            int maxHeight = webView.getView().getHeight();
            int maxWidth = webView.getView().getWidth();
            double xPer = 0/360;
            double yPer = 82/568;
            double hPer = 270/568;
            double wPer = 360/360;
            // add config as intent extras
            if (args.length() > 0) {

                JSONObject obj;
                for (int i = 0; i < args.length(); i++) {
                    try {
                        obj = args.getJSONObject(i);
                        if(obj.has(X_PER)){
                            xPer = obj.getDouble(X_PER);
                        }
                        if(obj.has(Y_PER)){
                            yPer = obj.getDouble(Y_PER);
                        }
                        if(obj.has(H_PER)){
                            hPer = obj.getDouble(H_PER);
                        }
                        if(obj.has(W_PER)){
                            wPer = obj.getDouble(W_PER);
                        }
                    } catch (JSONException e) {
                        Log.i("CordovaLog", e.getLocalizedMessage());
                        continue;
                    }
                }
            }
            Bundle bundle = new Bundle();
            bundle.putDouble("x", maxWidth*xPer);
            bundle.putDouble("y", maxHeight*yPer);
            bundle.putDouble("w", maxWidth*wPer);
            bundle.putDouble("h", maxHeight*hPer);
            openCameraPopup(bundle);
        }
    });
}

Мой класс фрагмента, который реализует ZxingScannerView:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle state) {
    if(state == null){
        state = this.getArguments();
    }
    if(state != null) {
        x = state.getDouble("x");
        y = state.getDouble("y");
        w = state.getDouble("w");
        h = state.getDouble("h");
    }
    mScannerView = new ZXingScannerView(getActivity()){
        @Override
        public void setupCameraPreview(CameraWrapper cameraWrapper) {
            super.setupCameraPreview(cameraWrapper);

            buttonStop = new Button(getActivity());
            buttonStop.setText("STOP");

            ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            this.addView(buttonStop);
            buttonStop.setOnClickListener( new OnClickListener() {
                @Override
                public void onClick(View v) {
                    mScannerView.stopCamera();
                    mScannerView.removeAllViews();
                }
            });
        }
 };
    mScannerView.setZ(10);
    mScannerView.setAutoFocus(true);
    mScannerView.setFlash(false);
    mScannerView.setX((float) x);
    mScannerView.setY((float) y);
    mScannerView.setLayoutParams(new ViewGroup.LayoutParams((int)w, (int)h));

    return mScannerView;
}