IONIC3 to realize sweep code function

Source: Internet
Author: User
Tags export class

IONIC3 through the plug-in Phonegap-plugin-barcodescanner, call the machine hardware camera to achieve sweep code function.

First of course understand the next phonegap-plugin-barcodescanner, this plugin. Supported Platforms Android iOS version windows (windows/windows phone 8.1 and Windows) Windows Phone 8 BlackBerry 10 Browser supported barcode type

Installation

First, we install this plugin and the Ionic-native plugin in the project:

$ ionic Cordova Plugin Add phonegap-plugin-barcodescanner
$ npm Install--save @ionic-native/barcode-scanner
Use:
Import {Barcodescanner} from ' @ionic-native/barcode-scanner ';

.....

Constructor (private Barcodescanner:barcodescanner) {}

..... scan{
 alert ("We got a barcode\n" +
        "Result:" + barcodedata.text + "\ n" +
        "Format:" + Barcodedata.format + "\ N "+
        " cancelled: "+ barcodedata.cancelled);
}

Of course you can't forget to add this plugin to the ngmodule of your application

...

Import {Barcodescanner} from ' @ionic-native/barcode-scanner ';

...

@NgModule ({
  ...

  ) Providers: [
    ...
    ] Barcodescanner ...
  ]
  ...
})
Export class Appmodule {}

Add an Android platform

Cordova Platform Add Android

Run on the real machine

Cordova Run Android

Later in the use of the process by the big guy said this plugin not ah, inefficient ah. The speed of the scan on iOS is OK, but it's slow to scan the Android phone, so it's too slow to see if he takes a screenshot of the camera and then identifies it.

Then I saw this code-sweeping plugin →cordova-plugin-cszbar Install plugin:

Ionic Cordova Plugin Add cordova-plugin-cszbar

npm install--save @ionic-native/zbar

PS: To remove the plugin installed in front of me, otherwise install this plugin will appear wrong. Support Platform: Android IOS Usage:

Import {Zbar, zbaroptions} from ' @ionic-native/zbar ';

Constructor (private Zbar:zbar) {} ...

Scan () {let
    options:zbaroptions = {
      flash: ' Off ',
      text_title: ' Sweep code ',
      drawsight:false
    };

    This.zbar.scan (Options)
      . Then (result => {
        alert ("Outcome: + results";//Scanned Code
      })
      . catch ( Error => {
        alert (error);//error message
      });
  

Remember to add plug-ins to the ngmodule of your application

...

Import {Zbar} from ' @ionic-native/zbar ';

...

@NgModule ({
  ...

  ) Providers: [
    ...
    ] Zbar ...
  ]
  ...
})
Export class Appmodule {}

This Zbar plug-in implementation of the sweep code function, in iOS can be said that the efficiency is fast, on Android is also OK, than the previous Phonegap-plugin-barcodescanner a lot faster.

If only iOS and Android on the two platform to achieve the sweep code function, then Zbar is enough.

This essay is my study work record, if there are questions welcome in the following comments, reproduced please indicate the source.

If it is helpful to you, please move the mouse right bottom to give me a praise, your support is my greatest motivation.

Ps:github Link →https://github.com/tjwoon/cszbar

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.