Socket
Socket
Sign inDemoInstall

@zxing/library

Package Overview
Dependencies
Maintainers
2
Versions
63
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zxing/library - npm Package Compare versions

Comparing version 0.10.0 to 0.11.0

104

esm5/browser/BrowserCodeReader.d.ts

@@ -6,2 +6,3 @@ import { VideoInputDevice } from './VideoInputDevice';

import DecodeHintType from '../core/DecodeHintType';
declare type HTMLVisualMediaElement = HTMLVideoElement | HTMLImageElement;
/**

@@ -14,30 +15,35 @@ * @deprecated Moving to @zxing/browser

protected readonly reader: Reader;
private timeBetweenScansMillis;
private hints?;
protected timeBetweenScansMillis: number;
protected hints?: Map<DecodeHintType, any>;
/**
* The HTML video element, used to display the camera stream.
*/
private videoElement;
protected videoElement: HTMLVideoElement;
/**
* The HTML image element, used as a fallback for the video element when decoding.
*/
private imageElement;
protected imageElement: HTMLImageElement;
/**
* The HTML canvas element, used to draw the video or image's frame for decoding.
*/
private canvasElement;
protected canvasElement: HTMLCanvasElement;
/**
* The HTML canvas element context.
*/
private canvasElementContext;
private timeoutHandler;
protected canvasElementContext: CanvasRenderingContext2D;
protected timeoutHandler: number;
/**
* The stream output from camera.
*/
private stream;
protected stream: MediaStream;
/**
* Should contain the current registered listener for video loaded-metadata,
* used to unregister that listener when needed.
*/
protected videoLoadedMetadataEventListener: EventListener;
/**
* Should contain the current registered listener for video play-ended,
* used to unregister that listener when needed.
*/
private videoPlayEndedEventListener;
protected videoPlayEndedEventListener: EventListener;
/**

@@ -47,3 +53,3 @@ * Should contain the current registered listener for video playing,

*/
private videoPlayingEventListener;
protected videoPlayingEventListener: EventListener;
/**

@@ -53,3 +59,3 @@ * Should contain the current registered listener for image loading,

*/
private imageLoadedEventListener;
protected imageLoadedEventListener: EventListener;
/**

@@ -82,2 +88,18 @@ * Creates an instance of BrowserCodeReader.

/**
* Sets the new stream and request a new decoding-with-delay.
*
* @param stream The stream to be shown in the video element.
* @param callbackFn A callback for the decode method.
*
* @todo Return Promise<Result>
*/
protected startDecodeFromStream(stream: MediaStream, callbackFn?: (...args: any[]) => any): void;
/**
* Binds listeners and callbacks to the videoElement.
*
* @param videoElement
* @param callbackFn
*/
protected bindEvents(videoElement: HTMLVideoElement, listener: EventListener): void;
/**
* Decodes a barcode form a video url.

@@ -92,5 +114,10 @@ *

decodeFromVideoSource(videoUrl: string, videoElement?: string | HTMLVideoElement): Promise<Result>;
private prepareVideoElement;
private getMediaElement;
/**
* Sets a HTMLVideoElement for scanning or creates a new one.
*
* @param videoElement The HTMLVideoElement to be set.
*/
protected prepareVideoElement(videoElement?: HTMLVideoElement | string): void;
protected getMediaElement(mediaElementId: string, type: string): HTMLElement;
/**
* Decodes the barcode from an image.

@@ -105,14 +132,33 @@ *

decodeFromImage(imageElement?: string | HTMLImageElement, imageUrl?: string): Promise<Result>;
private isImageLoaded;
private prepareImageElement;
private decodeOnceWithDelay;
private decodeOnce;
protected isImageLoaded(img: HTMLImageElement): boolean;
protected prepareImageElement(imageElement?: string | HTMLImageElement): void;
protected decodeOnceWithDelay(resolve: (result: Result) => any, reject: (error: any) => any): void;
protected decodeOnce(resolve: (result: Result) => any, reject: (error: any) => any, retryIfNotFound?: boolean, retryIfChecksumOrFormatError?: boolean): void;
/**
* This will remain protected, so who extends this class can customize this method.
* Gets the BinaryBitmap for ya! (and decodes it)
*/
protected drawImageOnCanvas(canvasElementContext: CanvasRenderingContext2D, srcElement: HTMLVideoElement | HTMLImageElement): void;
protected readerDecode(binaryBitmap: BinaryBitmap): Result;
private prepareCaptureCanvas;
private stop;
protected decode(): Result;
/**
* Creates a binaryBitmap based in some image source.
*
* @param mediaElement HTML element containing drawable image source.
*/
protected createBinaryBitmap(mediaElement: HTMLVisualMediaElement): BinaryBitmap;
/**
* Ovewriting this allows you to manipulate the snapshot image in anyway you want before decode.
*/
protected drawImageOnCanvas(canvasElementContext: CanvasRenderingContext2D, srcElement: HTMLVisualMediaElement): void;
/**
* Call the encapsulated readers decode
*/
protected decodeBitmap(binaryBitmap: BinaryBitmap): Result;
/**
* 🖌 Prepares the canvas for capture and scan frames.
*/
protected prepareCaptureCanvas(): void;
/**
* Stops the continuous scan and cleans the stream.
*/
protected stopStreams(): void;
/**
* Resets the code reader to the initial state. Cancels any ongoing barcode scanning from video or camera.

@@ -123,2 +169,16 @@ *

reset(): void;
/**
* Defines what the videoElement src will be.
*
* @param videoElement
* @param stream
*/
bindVideoSrc(videoElement: HTMLVideoElement, stream: MediaStream): void;
/**
* Unbinds a HTML video src property.
*
* @param videoElement
*/
unbindVideoSrc(videoElement: HTMLVideoElement): void;
}
export {};

@@ -67,2 +67,3 @@ "use strict";

BrowserCodeReader.prototype.decodeFromInputVideoDevice = function (deviceId, videoElement) {
var _this = this;
this.reset();

@@ -81,20 +82,37 @@ this.prepareVideoElement(videoElement);

}
var me = this;
return new Promise(function (resolve, reject) {
var callback = function () {
_this.decodeOnceWithDelay(resolve, reject);
};
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
me.stream = stream;
me.videoElement.srcObject = stream;
me.videoPlayingEventListener = function () {
me.decodeOnceWithDelay(resolve, reject);
};
me.videoElement.addEventListener('playing', me.videoPlayingEventListener);
me.videoElement.play();
})
.catch(function (error) {
reject(error);
});
.then(function (stream) { return _this.startDecodeFromStream(stream, callback); })
.catch(function (error) { return reject(error); });
});
};
/**
* Sets the new stream and request a new decoding-with-delay.
*
* @param stream The stream to be shown in the video element.
* @param callbackFn A callback for the decode method.
*
* @todo Return Promise<Result>
*/
BrowserCodeReader.prototype.startDecodeFromStream = function (stream, callbackFn) {
this.stream = stream;
this.bindVideoSrc(this.videoElement, stream);
this.bindEvents(this.videoElement, callbackFn);
};
/**
* Binds listeners and callbacks to the videoElement.
*
* @param videoElement
* @param callbackFn
*/
BrowserCodeReader.prototype.bindEvents = function (videoElement, listener) {
this.videoPlayingEventListener = listener;
videoElement.addEventListener('playing', this.videoPlayingEventListener);
this.videoLoadedMetadataEventListener = function () { return videoElement.play(); };
videoElement.addEventListener('loadedmetadata', this.videoLoadedMetadataEventListener);
};
/**
* Decodes a barcode form a video url.

@@ -109,36 +127,39 @@ *

BrowserCodeReader.prototype.decodeFromVideoSource = function (videoUrl, videoElement) {
var _this = this;
this.reset();
this.prepareVideoElement(videoElement);
var me = this;
return new Promise(function (resolve, reject) {
me.videoPlayEndedEventListener = function () {
me.stop();
_this.videoPlayEndedEventListener = function () {
_this.stopStreams();
reject(new NotFoundException_1.default());
};
me.videoElement.addEventListener('ended', me.videoPlayEndedEventListener);
me.videoPlayingEventListener = function () {
me.decodeOnceWithDelay(resolve, reject);
_this.videoElement.addEventListener('ended', _this.videoPlayEndedEventListener);
_this.videoPlayingEventListener = function () {
_this.decodeOnceWithDelay(resolve, reject);
};
me.videoElement.addEventListener('playing', me.videoPlayingEventListener);
me.videoElement.setAttribute('autoplay', 'true');
me.videoElement.setAttribute('src', videoUrl);
_this.videoElement.addEventListener('playing', _this.videoPlayingEventListener);
_this.videoElement.setAttribute('autoplay', 'true');
_this.videoElement.setAttribute('src', videoUrl);
});
};
/**
* Sets a HTMLVideoElement for scanning or creates a new one.
*
* @param videoElement The HTMLVideoElement to be set.
*/
BrowserCodeReader.prototype.prepareVideoElement = function (videoElement) {
if (undefined === videoElement) {
this.videoElement = document.createElement('video');
this.videoElement.width = 640;
this.videoElement.height = 480;
if (!videoElement && typeof document !== 'undefined') {
videoElement = document.createElement('video');
videoElement.width = 200;
videoElement.height = 200;
}
else if (typeof videoElement === 'string') {
this.videoElement = this.getMediaElement(videoElement, 'video');
if (typeof videoElement === 'string') {
videoElement = this.getMediaElement(videoElement, 'video');
}
else {
this.videoElement = videoElement;
}
// Needed for iOS 11
this.videoElement.setAttribute('autoplay', 'true');
this.videoElement.setAttribute('muted', 'true');
this.videoElement.setAttribute('playsinline', 'true');
this.videoElement.setAttribute('autofocus', 'true');
videoElement.setAttribute('autoplay', 'true');
videoElement.setAttribute('muted', 'true');
videoElement.setAttribute('playsinline', 'true');
videoElement.setAttribute('autofocus', 'true');
this.videoElement = videoElement;
};

@@ -171,13 +192,12 @@ BrowserCodeReader.prototype.getMediaElement = function (mediaElementId, type) {

this.prepareImageElement(imageElement);
var me = this;
return new Promise(function (resolve, reject) {
if (undefined !== imageUrl) {
me.imageLoadedEventListener = function () {
me.decodeOnce(resolve, reject, false, true);
_this.imageLoadedEventListener = function () {
_this.decodeOnce(resolve, reject, false, true);
};
me.imageElement.addEventListener('load', me.imageLoadedEventListener);
me.imageElement.src = imageUrl;
_this.imageElement.addEventListener('load', _this.imageLoadedEventListener);
_this.imageElement.src = imageUrl;
}
else if (_this.isImageLoaded(_this.imageElement)) {
me.decodeOnce(resolve, reject, false, true);
_this.decodeOnce(resolve, reject, false, true);
}

@@ -206,13 +226,11 @@ else {

BrowserCodeReader.prototype.prepareImageElement = function (imageElement) {
if (undefined === imageElement) {
this.imageElement = document.createElement('img');
this.imageElement.width = 200;
this.imageElement.height = 200;
if (typeof imageElement === 'undefined') {
imageElement = document.createElement('img');
imageElement.width = 200;
imageElement.height = 200;
}
else if (typeof imageElement === 'string') {
this.imageElement = this.getMediaElement(imageElement, 'img');
if (typeof imageElement === 'string') {
imageElement = this.getMediaElement(imageElement, 'img');
}
else {
this.imageElement = imageElement;
}
this.imageElement = imageElement;
};

@@ -225,10 +243,4 @@ BrowserCodeReader.prototype.decodeOnceWithDelay = function (resolve, reject) {

if (retryIfChecksumOrFormatError === void 0) { retryIfChecksumOrFormatError = true; }
if (undefined === this.canvasElementContext) {
this.prepareCaptureCanvas();
}
this.drawImageOnCanvas(this.canvasElementContext, this.videoElement || this.imageElement);
var luminanceSource = new HTMLCanvasElementLuminanceSource_1.HTMLCanvasElementLuminanceSource(this.canvasElement);
var binaryBitmap = new BinaryBitmap_1.default(new HybridBinarizer_1.default(luminanceSource));
try {
var result = this.readerDecode(binaryBitmap);
var result = this.decode();
resolve(result);

@@ -251,23 +263,57 @@ }

/**
* This will remain protected, so who extends this class can customize this method.
* Gets the BinaryBitmap for ya! (and decodes it)
*/
BrowserCodeReader.prototype.decode = function () {
// get binary bitmap for decode function
var binaryBitmap = this.createBinaryBitmap(this.videoElement || this.imageElement);
return this.decodeBitmap(binaryBitmap);
};
/**
* Creates a binaryBitmap based in some image source.
*
* @param mediaElement HTML element containing drawable image source.
*/
BrowserCodeReader.prototype.createBinaryBitmap = function (mediaElement) {
if (undefined === this.canvasElementContext) {
this.prepareCaptureCanvas();
}
this.drawImageOnCanvas(this.canvasElementContext, mediaElement);
var luminanceSource = new HTMLCanvasElementLuminanceSource_1.HTMLCanvasElementLuminanceSource(this.canvasElement);
var hybridBinarizer = new HybridBinarizer_1.default(luminanceSource);
return new BinaryBitmap_1.default(hybridBinarizer);
};
/**
* Ovewriting this allows you to manipulate the snapshot image in anyway you want before decode.
*/
BrowserCodeReader.prototype.drawImageOnCanvas = function (canvasElementContext, srcElement) {
canvasElementContext.drawImage(srcElement, 0, 0);
};
BrowserCodeReader.prototype.readerDecode = function (binaryBitmap) {
/**
* Call the encapsulated readers decode
*/
BrowserCodeReader.prototype.decodeBitmap = function (binaryBitmap) {
return this.reader.decode(binaryBitmap, this.hints);
};
/**
* 🖌 Prepares the canvas for capture and scan frames.
*/
BrowserCodeReader.prototype.prepareCaptureCanvas = function () {
if (typeof document === 'undefined') {
this.canvasElement = undefined;
this.canvasElementContext = undefined;
return;
}
var canvasElement = document.createElement('canvas');
var width, height;
if (undefined !== this.videoElement) {
var width;
var height;
if (typeof this.videoElement !== 'undefined') {
width = this.videoElement.videoWidth;
height = this.videoElement.videoHeight;
}
else {
if (!width && !height && typeof this.imageElement !== 'undefined') {
width = this.imageElement.naturalWidth || this.imageElement.width;
height = this.imageElement.naturalHeight || this.imageElement.height;
}
canvasElement.style.width = width + "px";
canvasElement.style.height = height + "px";
canvasElement.style.width = width + 'px';
canvasElement.style.height = height + 'px';
canvasElement.width = width;

@@ -277,11 +323,9 @@ canvasElement.height = height;

this.canvasElementContext = canvasElement.getContext('2d');
// this.videoElement.parentElement.appendChild(this.canvasElement)
};
BrowserCodeReader.prototype.stop = function () {
if (undefined !== this.timeoutHandler) {
window.clearTimeout(this.timeoutHandler);
this.timeoutHandler = undefined;
}
if (undefined !== this.stream) {
this.stream.getTracks()[0].stop();
/**
* Stops the continuous scan and cleans the stream.
*/
BrowserCodeReader.prototype.stopStreams = function () {
if (this.stream) {
this.stream.getVideoTracks().forEach(function (t) { return t.stop(); });
this.stream = undefined;

@@ -296,3 +340,4 @@ }

BrowserCodeReader.prototype.reset = function () {
this.stop();
// stops the camera, preview and scan 🔴
this.stopStreams();
if (undefined !== this.videoPlayEndedEventListener && undefined !== this.videoElement) {

@@ -305,4 +350,3 @@ this.videoElement.removeEventListener('ended', this.videoPlayEndedEventListener);

if (undefined !== this.videoElement) {
this.videoElement.srcObject = undefined;
this.videoElement.removeAttribute('src');
this.unbindVideoSrc(this.videoElement);
this.videoElement = undefined;

@@ -321,2 +365,32 @@ }

};
/**
* Defines what the videoElement src will be.
*
* @param videoElement
* @param stream
*/
BrowserCodeReader.prototype.bindVideoSrc = function (videoElement, stream) {
// Older browsers may not have `srcObject`
try {
// @NOTE Throws Exception if interrupted by a new loaded request
videoElement.srcObject = stream;
}
catch (err) {
// @NOTE Avoid using this in new browsers, as it is going away.
videoElement.src = window.URL.createObjectURL(stream);
}
};
/**
* Unbinds a HTML video src property.
*
* @param videoElement
*/
BrowserCodeReader.prototype.unbindVideoSrc = function (videoElement) {
try {
videoElement.srcObject = null;
}
catch (err) {
videoElement.src = '';
}
};
return BrowserCodeReader;

@@ -323,0 +397,0 @@ }());

@@ -43,4 +43,8 @@ import EncodeHintType from '../core/EncodeHintType';

*/
protected createSvgPathPlaceholderElement(w: number, h: number): SVGPathElement;
/**
* Creates a SVG rect.
*/
protected createSvgRectElement(x: number, y: number, w: number, h: number): SVGRectElement;
}
export { BrowserSvgCodeWriter };

@@ -78,2 +78,4 @@ "use strict";

var svgElement = this.createSVGElement(outputWidth, outputHeight);
var placeholder = this.createSvgPathPlaceholderElement(width, height);
svgElement.append(placeholder);
this.containerElement.appendChild(svgElement);

@@ -96,6 +98,6 @@ // 2D loop

BrowserSvgCodeWriter.prototype.createSVGElement = function (w, h) {
var svgElement = document.createElementNS(BrowserSvgCodeWriter.SVG_NS, 'svg');
svgElement.setAttributeNS(null, 'height', w.toString());
svgElement.setAttributeNS(null, 'width', h.toString());
return svgElement;
var el = document.createElementNS(BrowserSvgCodeWriter.SVG_NS, 'svg');
el.setAttributeNS(null, 'width', h.toString());
el.setAttributeNS(null, 'height', w.toString());
return el;
};

@@ -105,10 +107,19 @@ /**

*/
BrowserSvgCodeWriter.prototype.createSvgPathPlaceholderElement = function (w, h) {
var el = document.createElementNS(BrowserSvgCodeWriter.SVG_NS, 'path');
el.setAttributeNS(null, 'd', "M0 0h" + w + "v" + h + "H0z");
el.setAttributeNS(null, 'fill', 'none');
return el;
};
/**
* Creates a SVG rect.
*/
BrowserSvgCodeWriter.prototype.createSvgRectElement = function (x, y, w, h) {
var rect = document.createElementNS(BrowserSvgCodeWriter.SVG_NS, 'rect');
rect.setAttributeNS(null, 'x', x.toString());
rect.setAttributeNS(null, 'y', y.toString());
rect.setAttributeNS(null, 'height', w.toString());
rect.setAttributeNS(null, 'width', h.toString());
rect.setAttributeNS(null, 'fill', '#000000');
return rect;
var el = document.createElementNS(BrowserSvgCodeWriter.SVG_NS, 'rect');
el.setAttributeNS(null, 'x', x.toString());
el.setAttributeNS(null, 'y', y.toString());
el.setAttributeNS(null, 'height', w.toString());
el.setAttributeNS(null, 'width', h.toString());
el.setAttributeNS(null, 'fill', '#000000');
return el;
};

@@ -115,0 +126,0 @@ /**

@@ -6,2 +6,3 @@ export * from './browser/BrowserQRCodeReader';

export * from './browser/BrowserCodeReader';
export * from './browser/BrowserMultiFormatReader';
export * from './browser/HTMLCanvasElementLuminanceSource';

@@ -8,0 +9,0 @@ export * from './browser/VideoInputDevice';

@@ -12,2 +12,3 @@ "use strict";

__export(require("./browser/BrowserCodeReader"));
__export(require("./browser/BrowserMultiFormatReader"));
__export(require("./browser/HTMLCanvasElementLuminanceSource"));

@@ -14,0 +15,0 @@ __export(require("./browser/VideoInputDevice"));

{
"name": "@zxing/library",
"version": "0.10.0",
"version": "0.11.0",
"description": "TypeScript port of ZXing multi-format 1D/2D barcode image processing library.",

@@ -5,0 +5,0 @@ "keywords": [

@@ -64,21 +64,6 @@ [<img align="right" src="https://raw.github.com/wiki/zxing/zxing/zxing-logo.png"/>][1]

```javascript
import { BrowserQRCodeReader } from '@zxing/library';
<script type="module">
import { BrowserQRCodeReader } from '@zxing/library';
const codeReader = new BrowserQRCodeReader();
const img = document.getElementById('img');
try {
const result = await codeReader.decodeFromImage(img);
} catch (err) {
console.error(err);
}
console.log(result);
```
Use on browser with AMD:
```javascript
require(['@zxing/library'], ZXing => {
const codeReader = new ZXing.BrowserQRCodeReader();
const codeReader = new BrowserQRCodeReader();
const img = document.getElementById('img');

@@ -93,12 +78,29 @@

console.log(result);
});
</script>
```
Use on browser with AMD:
```javascript
<script type="text/javascript" src="https://unpkg.com/requirejs"></script>
<script type="text/javascript">
require(['@zxing/library'], ZXing => {
const codeReader = new ZXing.BrowserQRCodeReader();
const img = document.getElementById('img');
try {
const result = await codeReader.decodeFromImage(img);
} catch (err) {
console.error(err);
}
console.log(result);
});
</script>
```
Use on browser with UMD:
```html
<script
type="text/javascript"
src="https://unpkg.com/@zxing/library@latest"
></script>
<script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script>
<script type="text/javascript">

@@ -120,3 +122,3 @@ window.addEventListener('load', () => {

Use outside the browser with vanilaJS:
Use outside the browser with CommonJS:

@@ -123,0 +125,0 @@ ```javascript

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc