@parkingboss/barcam v4.2.1

Parking Boss Camera Component

The Camera Component is a wrapper around a webrtc camera. It allows image capture, qr code scanning, flashlight control, and barcode detection.

The component streams video from the camera to a video element and renders it. If object-fit: cover is set, only the visible portions of the video are captured or scanned for barcodes.

Getting Started

Install the Component

npm install @parkingboss/barcam

Import the Component

import makeCamera from '@parkingboss/barcam';
or
import { makeCamera } from '@parkingboss/barcam';

Create a Camera

const camera = makeCamera(videoEl);

If the element handed makeCamera is not an HTML video element it will be treated as the parent element; a video element will be created and inserted in the parent.

The make camera function also accepts a second argument of an array of additional resolution widths to try before the default ones.

Use the Camera

The returned object (camera) has the following api. See camera.d.ts for full typing:

{
  // Check if the device has a flashlight at all
  hasFlashlight(): Promise<boolean>;

  // get the current value of the device flashlight (on or off).
  // If no flashlight present returns false.
  getFlashlight(): Promise<boolean>;

  // Change the flashlight state. Toggle if no argument passed. Otherwise set to argument value.
  // Returns subsequent flashlight state.
  flashlight(on?: boolean): Promise<boolean>;

  // Capture an image as a blob with capture parameters.
  capture(opts?: CaptureOptions): Promise<Blob>;

  // Detect an barcode from the image captured for some number of frames. Then give up.
  detectBarcode(opts?: ImmediateBarcodeOptions): ImmediateBarcodeResult;

  // Scan frames for barcodes until you find one or the returned cancel method is called.
  detectNextBarcode(opts?: CaptureOptions): NextBarcodeResult;

  // Scan frames for barcodes until cancel is called, call the handler for each photo and barcode found
  detectAllBarcodes(handler: BarcodeHandler): AllBarcodesResult;
  detectAllBarcodes(opts: CaptureOptions, handler: BarcodeHandler): AllBarcodesResult;

  // Destroy the camera. Pauses the video, stops the frames (releasing the media streams)
  remove();
}

Here is an example:

import { makeCamera } from '@parkingboss/barcam';

(async () => {
  const camera = await makeCamera(document.getElementById('my-video'));

  // Get a png from the next 5 processed frames, from the image captured in the
  // first 50% of the my-video element. (top or left).
  const result = camera.detectBarcode({
    frames: 5,
    type: 'image/png',
    anchor: 0,
    size: {
      dimension: 'image',
      percent: .5,
    },
  });
  const initialPhoto = await result.initialPhoto;
  document.getElementById('first-photo').src = URL.createObjectURL(initialPhoto);

  const [ photo, value ] = await Promise.all([ result.photo, result.value ]);
  document.getElementById('result-photo').src = URL.createObjectURL(photo);
  const resultAnchor = document.getElementById('result-link');
  resultAnchor.textContent = value || 'No Barcode Found';
  resultAnchor.href = value || '#';
})();

Resizing

When the screen is resized the library will recalculate the visible portion of the video. (Specifically to handle object-fit). If you make a change to the video size apart from the screen changing size you'll need to call window.resize() to force the library to recalculate the visible portion of video.