npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@vnyw/browser

v0.1.6

Published

vnyw's fork of ZXing for JS's browser layer.

Downloads

2

Readme

ZXing

What is ZXing?

ZXing ("zebra crossing") is an open-source, multi-format 1D/2D barcode image processing library implemented in Java, with ports to other languages.

Browser layer

This is a library for enabling you to use with ease the ZXing for JS library on the browser. It includes features like scanning an <img> element, as well as <video>, images and videos from URLs and also it helps handling webcam use for scanning directly from a hardware connected camera. It does not offers support to any physical barcode readers or things like that.

See @zxing-js/library for the complete API including decoding classes and use outside of the browser.

See @zxing-js/ngx-scanner for using the library in Angular.

See @zxing-js/text-encoding for special character support in barcodes.

Usage (how to use)

Installation, import into app and usage examples in this section.

Instalation

Install via yarn, npm, etc:

yarn add @zxing/browser
npm i @zxing/browser

Or just import an script tag from your favorite NPM registry connected CDN:

<!-- loading ZXingBrowser via UNPKG -->
<script type="text/javascript" src="https://unpkg.com/@zxing/browser@latest"></script>

How to import into your app

ES6 modules

<script type="module">
  import { BrowserQRCodeReader } from '@zxing/browser';

  const codeReader = new BrowserQRCodeReader();

  // do something with codeReader...

</script>
Or asynchronously
<script type="module">
  import('@zxing/browser').then({ BrowserQRCodeReader } => {

    const codeReader = new BrowserQRCodeReader();

    // do something with codeReader...

  });
</script>

With AMD

<script type="text/javascript" src="https://unpkg.com/requirejs"></script>
<script type="text/javascript">
  require(['@zxing/browser'], ZXingBrowser => {

    const codeReader = new ZXingBrowser.BrowserQRCodeReader();

    // do something with codeReader...

  });
</script>

With UMD

<script type="text/javascript" src="https://unpkg.com/@zxing/browser@latest"></script>
<script type="text/javascript">
  window.addEventListener('load', () => {

    const codeReader = new ZXingBrowser.BrowserQRCodeReader();

    // do something with codeReader...

  });
</script>

Using the API

Examples here will assume you already imported ZXingBrowser into your app.

Scan from webcam

Continuous scan (runs and decodes barcodes until you stop it):

const codeReader = new BrowserQRCodeReader();

const videoInputDevices = await ZXingBrowser.BrowserCodeReader.listVideoInputDevices();

// choose your media device (webcam, frontal camera, back camera, etc.)
const selectedDeviceId = videoInputDevices[0].deviceId;

console.log(`Started decode from camera with id ${selectedDeviceId}`);

const previewElem = document.querySelector('#test-area-qr-code-webcam > video');

// you can use the controls to stop() the scan or switchTorch() if available
const controls = await codeReader.decodeFromVideoDevice(selectedDeviceId, previewElem, (result, error, controls) => {
  // use the result and error values to choose your actions
  // you can also use controls API in this scope like the controls
  // returned from the method.
});

// stops scanning after 20 seconds
setTimeout(() => controls.stop(), 20000);

You can also use decodeFromConstraints instead of decodeFromVideoDevice to pass your own constraints for the method choose the device you want directly from your constraints.

Also, decodeOnceFromVideoDevice is available too so you can await the method until it detects the first barcode.

Scan from video or image URL

const codeReader = new ZXingBrowser.BrowserQRCodeReader();

const source = 'https://my-image-or-video/01.png';
const resultImage = await codeReader.decodeFromImageUrl(source);
// or use decodeFromVideoUrl for videos
const resultVideo = await codeReader.decodeFromVideoUrl(source);

Scan from video or image HTML element

const codeReader = new ZXingBrowser.BrowserQRCodeReader();

const sourceElem = document.querySelector('#my-image-id');
const resultImage = await codeReader.decodeFromImageElement(sourceElem);
// or use decodeFromVideoElement for videos
const resultVideo = await codeReader.decodeFromVideoElement(sourceElem);

Other scan methods

There's still other scan methods you can use for decoding barcodes in the browser with BrowserCodeReader family, all of those and previous listed in here:

  • decodeFromCanvas
  • decodeFromImageElement
  • decodeFromImageUrl
  • decodeFromConstraints
  • decodeFromStream
  • decodeFromVideoDevice
  • decodeFromVideoElement
  • decodeFromVideoUrl
  • decodeOnceFromConstraints
  • decodeOnceFromStream
  • decodeOnceFromVideoDevice
  • decodeOnceFromVideoElement
  • decodeOnceFromVideoUrl

That's it for now.

List of browser readers

  • BrowserAztecCodeReader
  • BrowserCodeReader (abstract, needs to be extend for use)
  • BrowserDatamatrixCodeReader
  • BrowserMultiFormatOneDReader
  • BrowserMultiFormatReader (2D + 1D)
  • BrowserPDF417CodeReader
  • BrowserQRCodeReader

Customize BrowserCodeReader options

You can also customize some options on the code reader at instantiation time. More docs comming soon.


Bless