piitaya / capacitor-qr-scanner

A QR Code scanner for Android and iOS using Capacitor

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Welcome to the Capacitor QR Code Scanner

This repository is a capacitor plug in for scanning QR Codes on Android and iOS.

Table of contents

Installation

To install from the command line:

npm i @diningcity/capacitor-qr-scanner;
npx cap sync;

or

npm i @diningcity/capacitor-qr-scanner;
ionic capacitor copy;
(https://ionicframework.com/docs/cli/commands/capacitor-copy)

NOTE: After install the plug-in, you should add some settings and code snippets into your navite project.

iOS

  1. Open the ios project with Xcode from your project and add camera usage description in info.plist as following
<key>NSCameraUsageDescription</key>
<string>{Your camera usage description}</string>

ex: App would like to use camera to scan QRCode.

or

You can add this directly without coding with Xcode as following

Screen shot

  1. That's all

Android

Usage

iOS

To import the following into your code

import { QrScanner } from '@diningcity/capacitor-qr-scanner';
import React from "react";

const Test = () => {
    async function scanQR() {
      const {camera} = await QrScanner.requestPermissions();
      if (camera == "granted") {
        const {result} = await QrScanner.scanQrCode();
        alert(result);
      } else {
        alert("You should allow camera permission.");
      }
    }
    return (
        <React.Fragment>
            <div onClick={() => scanQR()}>
            </div>
        </React.Fragment>
    );
};

Android

To import the following into your code

import { QrScanner } from '@diningcity/capacitor-qr-scanner';
import React from "react";
const Test = () => {
    const scanQrCode = async () => {
        const {result} = await QrScanner.scanQrCode();
        alert(result);
    }
    return (
        <React.Fragment>
            <div onClick={scanQrCode}>
            </div>
        </React.Fragment>
    );
};

After remove old android directory from the root director of the project, then run the following commands

npx cap add android
npx cap open android

About

A QR Code scanner for Android and iOS using Capacitor

License:MIT License


Languages

Language:Swift 57.7%Language:Java 31.5%Language:Objective-C 3.4%Language:TypeScript 3.3%Language:Ruby 2.6%Language:JavaScript 1.4%