Ionic BarcodeScanner does not work on ios

Question

I created an ionic app, it is work on android good. But the barcode scanner is not working correct in ios.

My code;

$cordovaBarcodeScanner.scan().then(function (barcodeData) {
  console.log("Data : "+barcodeData.text);
});

But XCODE giving me something like that as non-stop;

When I tried to this;

  cordova.plugins.barcodeScanner.scan(
  function (result) {
      alert("We got a barcode\n" +
            "Result: " + result.text + "\n" +
            "Format: " + result.format + "\n" +
            "Cancelled: " + result.cancelled);
  }, 
  function (error) {
      alert("Scanning failed: " + error);
  },
  {
      "preferFrontCamera" : true, // iOS and Android
      "showFlipCameraButton" : true, // iOS and Android
      "prompt" : "Place a barcode inside the scan area", // supported on Android only
      "formats" : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
      "orientation" : "landscape" // Android only (portrait|landscape), default unset so it rotates with the device
  }
};

getting this error:

Warning: Attempt to present <CDVbcsViewController: 0x15f30c400> on <MainViewController: 0x15dd4fab0> whose view is not in the window hierarchy!

Answer 1

I face the same error and i find the solution for 2 days without success

install file open plugin: enter link description here

then use

 Encode(textToEncode){

this.barcodeScanner.encode(this.barcodeScanner.Encode.TEXT_TYPE,
  textToEncode).then((data) =>{
    
    this.fileOpener.open(data.file, 'image/jpeg');
   
  },(err)=>{
    alert(JSON.stringify(err));
  })

 

}

it's working fine

Result in the screenshot here

Answer 2

Privacy Settings in iOS 10+

A significant change in iOS 10+ is that you must declare ahead of time any access to private data or your App will crash.

Once you link with iOS 10+ you must declare access to any user private data types. You do this by adding a usage key to your app’s Info.plist together with a purpose string. The list of frameworks that count as private data is a long one

Contacts, Calendar, Reminders, Photos, Bluetooth Sharing, Microphone, Camera, Location, Health, HomeKit, Media Library, Motion, CallKit, Speech Recognition, SiriKit, TV Provider.

You need to put the "NSCameraUsageDescription" in your plist.

Like

Key:- Privacy - Camera Usage Description

Type:- String

Value:- $(PRODUCT_NAME) uses Cameras

enter image description here

Answer 3

Reviewing the ios library, it only contains the following types of formats, so it does not work for iOS. If you find some method to scan PDF417 in ios using ionic, you can share it!

typedef enum BarcodeFormat {
    BarcodeFormat_None = 0,
    BarcodeFormat_QR_CODE,
    BarcodeFormat_DATA_MATRIX,
    BarcodeFormat_UPC_E,
    BarcodeFormat_UPC_A,
    BarcodeFormat_EAN_8,
    BarcodeFormat_EAN_13,
    BarcodeFormat_CODE_128,
    BarcodeFormat_CODE_39,
    BarcodeFormat_ITF
} BarcodeFormat;

I invite you to review the response in phonegap-plugin-barcodescanner, type PDF417 bar-codes using ionic

Answer 4

My QR Code was consisting of 16 characters. It was the cause of my problem, now it is solved. Thank you @Pushpa.

Answer 5

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.Project" version="0.0.4" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>Masada</name>
  <description>
       Masada Mobile
    </description>
  <author email="mail@gmail.com" href="http://example.com/">
      Company
    </author>
  <content src="index.html"/>
  <access origin="*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="AutoHideSplashScreen" value="true"/>
  <preference name="ShowSplashScreenSpinner" value="true"/>
  <preference name="SplashScreenDelay" value="3000"/>
  
  
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>
  <platform name="android">
    <splash src="resources\android\splash\drawable-land-ldpi-screen.png" density="land-ldpi"/>
    <splash src="resources\android\splash\drawable-land-mdpi-screen.png" density="land-mdpi"/>
    <splash src="resources\android\splash\drawable-land-hdpi-screen.png" density="land-hdpi"/>
    <splash src="resources\android\splash\drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
    <splash src="resources\android\splash\drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
    <splash src="resources\android\splash\drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
    <splash src="resources\android\splash\drawable-port-ldpi-screen.png" density="port-ldpi"/>
    <splash src="resources\android\splash\drawable-port-mdpi-screen.png" density="port-mdpi"/>
    <splash src="resources\android\splash\drawable-port-hdpi-screen.png" density="port-hdpi"/>
    <splash src="resources\android\splash\drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
    <splash src="resources\android\splash\drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
    <splash src="resources\android\splash\drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
    <icon src="resources\android\icon\drawable-ldpi-icon.png" density="ldpi"/>
    <icon src="resources\android\icon\drawable-mdpi-icon.png" density="mdpi"/>
    <icon src="resources\android\icon\drawable-hdpi-icon.png" density="hdpi"/>
    <icon src="resources\android\icon\drawable-xhdpi-icon.png" density="xhdpi"/>
    <icon src="resources\android\icon\drawable-xxhdpi-icon.png" density="xxhdpi"/>
    <icon src="resources\android\icon\drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
  </platform>
  <platform name="ios">
    <splash src="resources\ios\splash\Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="resources\ios\splash\Default-667h.png" width="750" height="1334"/>
    <splash src="resources\ios\splash\Default-736h.png" width="1242" height="2208"/>
    <splash src="resources\ios\splash\Default-Landscape-736h.png" width="2208" height="1242"/>
    <splash src="resources\ios\splash\Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="resources\ios\splash\Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="resources\ios\splash\Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="resources\ios\splash\Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="resources\ios\splash\Default@2x~iphone.png" width="640" height="960"/>
    <splash src="resources\ios\splash\Default~iphone.png" width="320" height="480"/>
    <icon src="resources\ios\icon\icon.png" width="57" height="57"/>
    <icon src="resources\ios\icon\icon@2x.png" width="114" height="114"/>
    <icon src="resources\ios\icon\icon-40.png" width="40" height="40"/>
    <icon src="resources\ios\icon\icon-40@2x.png" width="80" height="80"/>
    <icon src="resources\ios\icon\icon-50.png" width="50" height="50"/>
    <icon src="resources\ios\icon\icon-50@2x.png" width="100" height="100"/>
    <icon src="resources\ios\icon\icon-60.png" width="60" height="60"/>
    <icon src="resources\ios\icon\icon-60@2x.png" width="120" height="120"/>
    <icon src="resources\ios\icon\icon-60@3x.png" width="180" height="180"/>
    <icon src="resources\ios\icon\icon-72.png" width="72" height="72"/>
    <icon src="resources\ios\icon\icon-72@2x.png" width="144" height="144"/>
    <icon src="resources\ios\icon\icon-76.png" width="76" height="76"/>
    <icon src="resources\ios\icon\icon-76@2x.png" width="152" height="152"/>
    <icon src="resources\ios\icon\icon-small.png" width="29" height="29"/>
    <icon src="resources\ios\icon\icon-small@2x.png" width="58" height="58"/>
    <icon src="resources\ios\icon\icon-small@3x.png" width="87" height="87"/>
  </platform>
  <platform name="wp8">
    <splash src="resources\wp8\splash\SplashScreenImage.png" width="768" height="1280"/>
    <icon src="resources\wp8\icon\ApplicationIcon.png" width="99" height="99"/>
    <icon src="resources\wp8\icon\Background.png" width="159" height="159"/>
  </platform
  <icon src="resources\android\icon\drawable-xhdpi-icon.png"/>
</widget>

Answer 6

By doing this i'm able to scan QR code in iOS.

• Add iOS Platform:

  ionic platform add ios
  

• Install ngCordova

  bower install ngCordova
  

• Added Barcodescanner plugin like this:

  cordova plugin add https://github.com/phonegap/phonegap-plugin-barcodescanner.git
  

• index.html

  <button class="button button-block button-positive" ng-click="scanBarcode()">
        <i class="icon ion-qr-scanner"></i>
        Scan Now
  </button>
  

• app.js

  angular.module('myApp', ['ionic','ngCordova']) // include ngCordova
  
  // Scan 
  angular.module("myApp").controller('scanner',function($scope, $cordovaBarcodeScanner) {
  $scope.scanBarcode = function() {
  $cordovaBarcodeScanner.scan().then(function(imageData) {
      alert(imageData.text);
      console.log("Barcode Format -> " + imageData.format);
      console.log("Cancelled -> " + imageData.cancelled);
  }, function(error) {
      console.log("An error happened -> " + error);
  });
  };
  });
  

My nodejs version : v5.5.0

Phonegap version : 6.0.2

Ionic version : 1.7.14

Answer 7

i have scanner problem before, for no reason when i click button to fire scanner function it fired twice... so i have to work other way around.

HTML

<button class="button button-positive" ng-click="scanBarcode()">Scan</button>

controllers

$scope.scannerOpened = false;

$scope.barcodeSearch = function() {
    if(!$scope.scannerOpened) {
        $scope.scannerOpened = true;
        $ionicPlatform.ready(function() {
            $cordovaBarcodeScanner.scan().then(
                function(result) {
                    alert(result);
                },
                function(error) {
                    alert(error);
                }
            ).finally(function() {
                $scope.scannerOpened = false;
            });
         });
    }
}