Qr scanner

config.xml

I added this 

  <preference name="BackgroundColor" value="0x00000000" />

index.js

angular
  .module("starter.controllers", [])
  .controller("DashCtrl", function($scope) {
    document.addEventListener(
      "deviceready",
      function() {
        window.QRScanner.prepare(onDone); // show the prompt
        function onDone(err, status) {
          if (err) {
            // here we can handle errors and clean up any loose ends.
            console.error(err);
          }
          if (status.authorized) {
            $scope.scan();

            // W00t, you have camera access and the scanner is initialized.
          } else if (status.denied) {
            // The video preview will remain black, and scanning is disabled. We can
            // try to ask the user to change their mind, but we'll have to send them
            // to their device settings with `QRScanner.openSettings()`.
          } else {
            // we didn't get permission, but we didn't get permanently denied. (On
            // Android, a denial isn't permanent unless the user checks the "Don't
            // ask again" box.) We can ask again at the next relevant opportunity.
          }
        }
      },
      false
    );
    $scope.scan = function() {
      document.addEventListener(
        "deviceready",
        function() {
          console.log("====================================");
          console.log("SCAN");
          console.log("====================================");
          window.QRScanner.scan(displayContents);
          function displayContents(err, text) {
            if (err) {
              if (err.name === "SCAN_CANCELED") {
                console.error(
                  "The scan was canceled before a QR code was found."
                );
              } else {
                console.error(err._message);
              }
              // an error occurred, or the scan was canceled (error code `6`)
            } else {
              // The scan completed, display the contents of the QR code:
              alert(text);
            }
          }
          window.QRScanner.show();
        },
        false
      );
    };
  })
  .controller("ChatsCtrl", function($scope, Chats) {
    // With the new view caching in Ionic, Controllers are only called
    // when they are recreated or on app start, instead of every page change.
    // To listen for when this page is active (for example, to refresh data),
    // listen for the $ionicView.enter event:
    //
    //$scope.$on('$ionicView.enter', function(e) {
    //});

    $scope.chats = Chats.all();
    $scope.remove = function(chat) {
      Chats.remove(chat);
    };
  })
  .controller("ChatDetailCtrl", function($scope, $stateParams, Chats) {
    $scope.chat = Chats.get($stateParams.chatId);
  })
  .controller("AccountCtrl", function($scope) {
    $scope.settings = {
      enableFriends: true
    };
  });

style.css

/* Empty. Add your own CSS if you like */
body,
html,
ion-pane,
ion-content,
ion-view,
ion-nav-view,
.scroll,
.platform-ios,
.view,
.platform-android
.platform-ios {
  background-color: transparent !important;
  background: transparent !important;
}

html,
body,
.ion-app,
.ion-content {
  background-color: transparent;
}

I'm not using AngularJS nor Ionic, I'm using Phonegap. Although I got an idea of what to do from your solution. But I'm still encountering a problem, the camera seems to be accessed successfully when I run it on the Ripple Simulator but the camera isn't accessed when run on an android device. I don't if it will help but I'm using Visual Studio 2017 as my IDE.