qr-scanner-maa

1.0.1 • Public • Published

Based on code-kotis/qr-code-scanner

QR scanner frame to embed to your project as an iframe. You can communicate with it using postMessage. You can switch cameras. Fallback to single image if streaming is not supported.

Features

  • Switch camera

  • Fallback to single image scan

  • Encapsulated logic in iframe and communicate with it through postMessage

  • Listen for scan results and other events through window.addEventListener

Installation

  1. Clone this repo
git clone https://github.com/maa105/qr-code-scanner
  1. Installation
npm install
  1. Run (Dev)
npm run start
  1. Build
npm run build
  1. Move dist folder to your app and use the index.html in your app as src of iframe

  2. communicate with iframe through:

6.1. listen to events:

  window.addEventListener('message', (message) => {
    if(message.data.event === 'scan-result') {
      console.log('Scan Result: ', message.data.result);
    }
    else if(message.data.event === 'init-status') {
      if(message.data.streaming) {
        console.log('Cameras available:', message.data.devices);
        console.log('Selected camera:', message.data.devices[message.data.selected]);
      }
      else {
        console.log('Fallback use postMessage { command: "scan" }');
      }
    }
    else if(message.data.event === 'next-device-result') {
      if(message.data.success) {
        console.log('Cameras available:', message.data.devices);
        console.log('Selected camera:', message.data.devices[message.data.selected]);
      }
      else {
        console.log('OOPS');
      }
    }
  });

6.2. send commands through postMessage

  document.getElementById('qr-scanner-frame').contentWindow.postMessage({
    command: 'next-device'
  });

// only use incase streaming is false
  document.getElementById('qr-scanner-frame').contentWindow.postMessage({
    command: 'scan'
  });

Readme

Keywords

none

Package Sidebar

Install

npm i qr-scanner-maa

Weekly Downloads

0

Version

1.0.1

License

none

Unpacked Size

4.88 MB

Total Files

24

Last publish

Collaborators

  • maa105