qrcode-opencv-wechat

qrcode-opencv-wechat

QR Code scanner in JavaScript, based on a WebAssembly build of OpenCV with Open CV WeChat QR Code Scanner. Provides a much better detection rate and error tolerance.

Ported and rewritten from leidenglai/opencv-js-qrcode for modern browser build and easier usage. Huge thanks to @leidenglai for the previous work and research.

• 🕹️ Basic playground demo
• 🛠️ Anthony's QR Toolkit

Usage

npm i qrcode-opencv-wechat

import { scan } from 'qrcode-opencv-wechat'

const result = await scan(canvas) // Or ImageElement

Upon the first call of scan, around 3.5MB gzipped of WebAssembly and models will be loaded asynchronously.

You can also preload them with:

import { ready, scan } from 'qrcode-opencv-wechat'

await ready()
const result = await scan(canvas)

Stream

In case you want to scan with streams like camera inputs, here is some code snippet for reference

<video id="video">

import { scan } from 'qrcode-opencv-wechat'

const stream = await navigator.mediaDevices.getUserMedia({
  audio: false,
  video: {
    width: 512,
    height: 512,
  },
})

const video = document.getElementById('video')
video.srcObject = stream
video.play()

async function scanFrame() {
  const canvas = document.createElement('canvas')
  canvas.width = video.value.videoWidth
  canvas.height = video.value.videoHeight
  const ctx = canvas.getContext('2d')
  ctx.drawImage(videoEl.value!, 0, 0, canvas.width, canvas.height)
  const result = await scan(canvas)

  if (result?.text)
    alert(result?.text)
}

setInterval(scanFrame, 100) // scan one frame every 100ms

Sponsors

License

MIT License © 2023 Anthony Fu