Monaca Docs
  • Monaca
  • Create Your First App
  • Release Notes and Updates
    • Privacy Manifest Requirement for iOS Apps
    • Plugin uses-permission Tag Deduplication Feature
    • iOS Monaca Debugger Discontinuation & Alternative Features
    • Error submitting to iOS App Store (ITMS-90165)
    • Build error in cordova-custom-config
    • Cordova 11 changes
    • Cordova 10 changes
    • Cordova 9 changes
    • New Monaca CLI and Localkit
    • Migration from Cordova to Capacitor
  • Product Guides
    • Monaca Development Overview
    • Monaca Cloud IDE
      • Overview
      • Features in the Monaca Cloud IDE
      • Integrated Terminal
      • Editor Shortcuts
      • Project Dependencies
        • File and Folder Structure
        • JS/CSS Components
        • Cordova Plugins
        • Custom Cordova Plugins
      • Version Control
        • Introduction
        • GitHub Integration
        • Git SSH Integration
      • Monaca CI
        • Overview
        • Deploy Services
        • Deploy to Appetize.io
        • Deploy to DeployGate
        • Deploy to Firebase
      • Build
        • Building for iOS
          • Building an iOS App
          • Build Settings between Monaca and Xcode
        • Building for Android
        • Building for Electron
          • Building on Windows
        • Building for PWA
        • Building for Windows
        • Build Environment Settings
        • Common Build and Application Upload Errors
        • Build History
      • Distribution
        • App Store Distribution
          • App Store Connect Guide
          • iOS App Upload Feature
        • Google Play Distribution
        • Amazon Appstore Distribution
        • Non-market App Distribution
      • Download App Package
      • Tutorial
    • Monaca Localkit
      • Overview
      • Pairing and Debugging
      • Remote Building and Publishing
      • Troubleshooting Guide
      • Tutorial
    • Monaca CLI
      • Overview
      • Monaca CLI Commands
      • Pairing and Debugging
      • Project Dependencies
        • File and Folder Structure
        • JS/JSS Components
        • Cordova Plugins
        • Custom Cordova Plugins
      • Remote Building and Publishing
      • Troubleshooting Guide
      • Tutorial
    • Monaca Debugger
      • Functionalities
      • Installation
        • Monaca Debugger for Android
        • Monaca Debugger for iOS
        • Monaca Debugger for Android Emulator
      • Usage
      • Custom Build Debugger for iOS
      • iOS App Simulator Build
      • Troubleshooting Guide
      • Tutorials
    • Team Dashboard
    • Quick Viewer
    • Migrating from Other Platforms
      • Key Points
      • Cloud IDE preview function settings
      • Migrating from Angular
      • Migrating from Ionic
      • Migrating from React
      • Migrating from Vue
      • Migrating from PhoneGap
        • Key Differences
        • Guide for PhoneGap Build Users
        • Guide for PhoneGap CLI Users
        • Guide for PhoneGap Desktop App Users
      • Migrating from Telerik
  • Build App
    • Build for iOS
      • Creating a Private Key and CSR
      • Creating a Certificate
      • Updating Provisioning Profiles
  • Tutorials
    • Monaca Cloud IDE Tutorial
      • Part 1: Starting a Project
      • Part 2: Running Monaca Debugger with Monaca Cloud IDE
      • Part 3: Building a Monaca App
      • Part 4: Publishing a Monaca App
    • Monaca Localkit Tutorial
      • Part 1: Starting a Project
      • Part 2: Running Monaca Debugger with Monaca Localkit
      • Part 3: Building a Monaca App
      • Part 4: Publishing a Monaca App
    • Monaca CLI Tutorial
      • Part 1: Starting a Project
      • Part 2: Running Monaca Debugger with Monaca CLI
      • Part 3: Building a Monaca App
      • Part 4: Publishing a Monaca App
    • Electron Tutorial
      • How to Use a NPM Package
      • How to Use a Web API
    • Barcode Scanner Plugin
    • Cordova SQLite Storage Plugin
    • Cordova Google Analytics Plugin
    • Cordova Firebase Plugin
    • Cordova In-app Purchase Plugin
    • Cordova AppVersion Plugin
    • Cordova Ionic Keyboard Plugin
    • Cordova Social Sharing Plugin
    • NIFCLOUD mobile backend
    • Phonegap Push Plugin
  • API Reference
    • Monaca API
      • Monaca Cloud & Remote Build API Guide
      • Utilities
    • Core Cordova Plugins
      • Cordova 11.0
        • Battery Status Plugin
        • Camera Plugin
        • Device Plugin
        • Device Motion Plugin
        • Device Orientation Plugin
        • Dialogs Plugin
        • File Plugin
        • Geolocation Plugin
        • InAppBrowser Plugin
        • Media Plugin
        • Media Capture Plugin
        • Network Information Plugin
        • Splashscreen Plugin
        • Vibration Plugin
        • StatusBar Plugin
      • Cordova 10.0
        • Battery Status Plugin
        • Camera Plugin
        • Device Plugin
        • Device Motion Plugin
        • Device Orientation Plugin
        • Dialogs Plugin
        • File Plugin
        • Geolocation Plugin
        • InAppBrowser Plugin
        • Media Plugin
        • Media Capture Plugin
        • Network Information Plugin
        • Splashscreen Plugin
        • Vibration Plugin
        • StatusBar Plugin
        • Whitelist Plugin (Android Only)
      • Cordova 9.0
        • Battery Status Plugin
        • Camera Plugin
        • Contacts Plugin
        • Device Plugin
        • Device Motion Plugin
        • Device Orientation Plugin
        • Dialogs Plugin
        • File Plugin
        • File Transfer Plugin
        • Geolocation Plugin
        • Globalization Plugin
        • InAppBrowser Plugin
        • Media Plugin
        • Media Capture Plugin
        • Network Information Plugin
        • Splashscreen Plugin
        • Vibration Plugin
        • StatusBar Plugin
        • Whitelist Plugin (Android Only)
    • Third-party Cordova Plugins
      • Advanced HTTP Plugin
      • PhoneGap BarcodeScanner Plugin
      • Cordova Custom Config Plugin
      • DatePicker Plugin
      • Share Plugin (Android)
      • WebIntent Plugin (Android)
    • Monaca Power Plugins
      • Monaca HTML5 Resource Encryption
      • Monaca In-App Updater
      • Monaca Secure Storage
      • Barcode Scanner Plugin
      • Android build memory size setting
    • Service Integration
      • Repro
      • AppsFlyer
    • Configuration Files
      • Android
        • Android Configuration
        • config.xml
        • AndroidManifest.xml
      • iOS
        • iOS Configuration
        • config.xml
        • MonacaApp-Info.plist
  • Samples & Tips
    • Sample Apps
      • AdMob
      • Twitter Single Sign-on App
      • Facebook Single Sign-on App
      • Flickr
      • TODO App
      • BirthYear App
      • Break the Bricks
      • Train Catalog App
      • Omikuji Fortune Telling App
      • Clock App
      • Memo Application
      • RSS Reader App
      • Hello World App
    • Tips & Tricks
      • Playing Sound and Music
      • Control the Splash Screen
      • Using Database
  • Features
    • Push Notification
    • SNS Authentication
    • Database
  • FAQ
    • General
    • IDE
    • Build
    • Release
    • Subscription
      • How to Use Activation Code
    • Application
    • Usage
    • Debugger
  • Supported Environments
  • Trouble Shooting
    • Preview Log repeats to reload (Vue packages version mismatch error)
  • Monaca Product Website
  • 日本語
Powered by GitBook
On this page
  • Plugin ID
  • Adding the Plugin in Monaca
  • Supported Platforms
  • Build Environments
  • Operating Environments
  • Supported Barcode Types
  • Features
  • Scanning mode
  • Detection timeout message (since v1.1.0)
  • Torch light
  • API Reference
  • monaca.BarcodeScanner.scan()
  • options
  • Example
  • iOS Quirks
  • Android Quirks
  • compileSDKVersion
  • Barcode detection problem due to device model dependency
  • About detecting barcode
  • ITF code (since ver.1.2.0)
  • Other barcode

Was this helpful?

  1. API Reference
  2. Monaca Power Plugins

Barcode Scanner Plugin

PreviousMonaca Secure StorageNextAndroid build memory size setting

Last updated 6 months ago

Was this helpful?

Tested Version: 1.5.0

This plugin provides a scanning barcode feature. Detect barcode or [^1] by device's camera and returns extracted strings.

Plugin ID

@monaca/monaca-plugin-barcode-scanner

Adding the Plugin in Monaca

In order to use this plugin, please Barcode Scanner plugin in Monaca Cloud IDE.

Supported Platforms

Build Environments

  • Cordova 11.0.0 or later

  • Android Platform 10.1.2 or later

  • iOS Platform 6.2.0 or later

Operating Environments

  • Android 5.1 or later (9 or later recommended)

  • iOS 11 or later (13 or later recommended)

Supported Barcode Types

  • QR_CODE

  • EAN_8

  • EAN_13

  • ITF

  • CODE_128

  • CODE_39

and more...

  • As of ver.1.4.0, we have expanded supported barcode types. This plugin now scans almost all formats supported by the iOS or Android MKKit.

  • In additional to the types mentioned above, following types will be scanned.

    • CODE_93, AZTEC, DATA_MATRIX, UPC_E, and others.

  • Some formats are exclusively supported on iOS.

Features

Scanning mode

  • Normal mode (since v1.0.0) The detected code is displayed on screen and selected by tapping(clicking).

  • One Shot mode (since v1.1.0) The first detected code is selected and screen closed automatically.

Detection timeout message (since v1.1.0)

A Specified message can be displayed if no code is detected for a certain period.

Torch light

The torch light can be turned on.

API Reference

monaca.BarcodeScanner.scan()

monaca.BarcodeScanner.scan(successCallback, failCallback[, options])
  • Calling scan () will transition to the scanner screen.

  • When the barcode is detected, the extracted character string is displayed below the frame.(Normal mode)

  • Tap the string to return to the original screen and the string and barcode type will be returned to successCallback.

  • In the case of One Shot mode, the first detected code is returned and screen is closed automatically.

  • When returned to the original screen without selecting the string, the detection will be cancelled. In order to return to the original screen, click the "Close" (X on the screen) button for iOS and the "Back" button for Android.

successCallback

successCallback(result)

result: following data

{
  data: {
    "text": "xxxxxxxx"  // detected string
    "format": "QR_CODE"  // barcode type
  },
  cancelled: false // detection cancelled(true) or not(false)
}

failCallback

failCallback(error)

error: error message(string)

message
description

"permission denied"

camera permission is not granted.

options

{
  "oneShot" : true,
  "timeoutPrompt" : {
    "show" : true,
    "timeout" : 5,
    "prompt" : "Not detected"
  },
  "torch" : {
    "enable" : true,
    "defaultOn" : false
  },
  "debug" : {
    "preview" : 0
  }
}
parameter
type
default value
description

oneShot

boolean

false

Enable or disable One Shot mode.

timeoutPrompt.show

boolean

false

Show or hide detection timeout message.

timeoutPrompt.timeout

int

-

Period(in seconds) from when the barcode not detected until the message is displayed.

timeoutPrompt.prompt

string

"Barcode not detected"

Timeout message.

torch.enable

boolean

false

Enable torch light feature.

torch.defaultOn

boolean

false

Turn on torch by default.

debug.preview (android only)

int

0

Debug Preview Mode(Android only) Displays camera preview bitmap(before sending to MLKit) on screen. 0: OFF(default) 1: Inside detection area 2: Whole camera image

Example

  monaca.BarcodeScanner.scan((result) => {
    if (result.cancelled) {
      // scan cancelled
    } else {
      // scan
      const detected_text = result.data.text;
      const detected_format = result.data.format;
    }
  }, (error) => {
    // permission error
    const error_message = error;
  }, {
    "oneShot" : true,
    "timeoutPrompt" : {
      "show" : true,
      "timeout" : 5,
      "prompt" : "Not detected"
    },
    "torch" : {
      "enable" : true,
      "defaultOn" : false
    }
});

iOS Quirks

Since iOS 10, it's mandatory to provide a usage description in the info.plist. The description string is displayed in the permission dialog box.

This plugin requires the following usage descriptions:

  • NSCameraUsageDescription specifies the reason for your app to access the device's camera.

To add these entries to the info.plist, you can use the <edit-config> tag in the config.xml file like this:

    <platform name="ios">
        <edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
            <string>need camera access to scan barcode</string>
        </edit-config>
    </platform>

Android Quirks

compileSDKVersion

The library androidx.camera:camera-view used internally requires compileSDKVersion>=31. So Target SDK Version of Android Application setting in Monaca Cloud IDE should be set 31 or above.

Barcode detection problem due to device model dependency

This plugin detects barcodes by processing the image captured by the camera (ImageProxy) and passing it to the barcode detection library (MLKit). ImageProxy can store images in a variety of formats, and it depends on the device what format the camera captures. Some devices may fail to detect barcodes because they are captured in a format not supported by the plugin.

Supported format

version
supported format

before ver.1.2.1

- Support JPEG or YUV_420_888 - Support only when plane buffer's rowStride is same as ImageWidth

ver.1.3.0

- Support when plane buffer's rowStride is different from ImageWidth

How to check for unsupported image formats

You can check the device compatibility by using the debug preview feature added in ver.1.3.0.

  • Enable debug preview in options

  monaca.BarcodeScanner.scan((result) => {
    if (result.cancelled) {
      // scan cancelled
    } else {
      // scan
    }
  }, (error) => {
    // permission error
    const error_message = error;
  }, {
    "debug" : {
      "preview" : 1
    }
  });
  • Thumbnail of the image before barcode detection are displayed on the scan screen.

If this thumbnail image is displayed distorted, it will be a device that does not support.

About detecting barcode

ITF code (since ver.1.2.0)

  • ver. 1.2.0

    • For iOS, only ITF-14 (14 digits ITF) is supported.

    • For Android, various digits ITF is supported.

  • ver. 1.4.0

    • Various digits ITF is supported on iOS.

Other barcode

  • Because some barcode standard is prone to cause miss-detection, requiring the barcode to be exactly positioned within the detection area.


[^1]: QR Code is a registered trademark of DENSO WAVE INCORPORATED in Japan and in other countries.

See for the caution of detection.

Some devices may fail to detect barcodes. See for details.

enable
here
here