@capacitor-community/barcode-scanner - npm Package Compare versions

Comparing version 3.0.1 to 3.0.2

dist/esm/definitions.d.ts

@@ -18,51 +18,98 @@ export type CallbackID = string;
 }
-export declare enum SupportedFormat {
+declare const _SupportedFormat: {
     /**
      * Android only, UPC_A is part of EAN_13 according to Apple docs
      */
-    UPC_A = "UPC_A",
-    UPC_E = "UPC_E",
+    readonly UPC_A: "UPC_A";
+    readonly UPC_E: "UPC_E";
     /**
      * Android only
      */
-    UPC_EAN_EXTENSION = "UPC_EAN_EXTENSION",
-    EAN_8 = "EAN_8",
-    EAN_13 = "EAN_13",
-    CODE_39 = "CODE_39",
+    readonly UPC_EAN_EXTENSION: "UPC_EAN_EXTENSION";
+    readonly EAN_8: "EAN_8";
+    readonly EAN_13: "EAN_13";
+    readonly CODE_39: "CODE_39";
     /**
      * iOS only
      */
-    CODE_39_MOD_43 = "CODE_39_MOD_43",
-    CODE_93 = "CODE_93",
-    CODE_128 = "CODE_128",
+    readonly CODE_39_MOD_43: "CODE_39_MOD_43";
+    readonly CODE_93: "CODE_93";
+    readonly CODE_128: "CODE_128";
     /**
      * Android only
      */
-    CODABAR = "CODABAR",
-    ITF = "ITF",
+    readonly CODABAR: "CODABAR";
+    readonly ITF: "ITF";
     /**
      * iOS only
      */
-    ITF_14 = "ITF_14",
-    AZTEC = "AZTEC",
-    DATA_MATRIX = "DATA_MATRIX",
+    readonly ITF_14: "ITF_14";
+    readonly AZTEC: "AZTEC";
+    readonly DATA_MATRIX: "DATA_MATRIX";
     /**
      * Android only
      */
-    MAXICODE = "MAXICODE",
-    PDF_417 = "PDF_417",
-    QR_CODE = "QR_CODE",
+    readonly MAXICODE: "MAXICODE";
+    readonly PDF_417: "PDF_417";
+    readonly QR_CODE: "QR_CODE";
     /**
      * Android only
      */
-    RSS_14 = "RSS_14",
+    readonly RSS_14: "RSS_14";
     /**
      * Android only
      */
-    RSS_EXPANDED = "RSS_EXPANDED"
-}
-export declare enum CameraDirection {
-    FRONT = "front",
-    BACK = "back"
-}
+    readonly RSS_EXPANDED: "RSS_EXPANDED";
+};
+export declare const SupportedFormat: {
+    /**
+     * Android only, UPC_A is part of EAN_13 according to Apple docs
+     */
+    readonly UPC_A: "UPC_A";
+    readonly UPC_E: "UPC_E";
+    /**
+     * Android only
+     */
+    readonly UPC_EAN_EXTENSION: "UPC_EAN_EXTENSION";
+    readonly EAN_8: "EAN_8";
+    readonly EAN_13: "EAN_13";
+    readonly CODE_39: "CODE_39";
+    /**
+     * iOS only
+     */
+    readonly CODE_39_MOD_43: "CODE_39_MOD_43";
+    readonly CODE_93: "CODE_93";
+    readonly CODE_128: "CODE_128";
+    /**
+     * Android only
+     */
+    readonly CODABAR: "CODABAR";
+    readonly ITF: "ITF";
+    /**
+     * iOS only
+     */
+    readonly ITF_14: "ITF_14";
+    readonly AZTEC: "AZTEC";
+    readonly DATA_MATRIX: "DATA_MATRIX";
+    /**
+     * Android only
+     */
+    readonly MAXICODE: "MAXICODE";
+    readonly PDF_417: "PDF_417";
+    readonly QR_CODE: "QR_CODE";
+    /**
+     * Android only
+     */
+    readonly RSS_14: "RSS_14";
+    /**
+     * Android only
+     */
+    readonly RSS_EXPANDED: "RSS_EXPANDED";
+};
+export type SupportedFormat = typeof _SupportedFormat[keyof typeof _SupportedFormat];
+export declare const CameraDirection: {
+    readonly FRONT: "front";
+    readonly BACK: "back";
+};
+export type CameraDirection = typeof CameraDirection[keyof typeof CameraDirection];
 export interface ScanOptions {
@@ -94,3 +141,4 @@ /**
 }
-export interface ScanResult {
+export type ScanResult = IScanResultWithContent | IScanResultWithoutContent;
+export interface IScanResultWithContent {
     /**
@@ -103,3 +151,3 @@ * This indicates whether or not the scan resulted in readable content.
      */
-    hasContent: boolean;
+    hasContent: true;
     /**
@@ -110,3 +158,3 @@ * This holds the content of the barcode if available.
      */
-    content?: string;
+    content: string;
     /**
@@ -117,4 +165,26 @@ * This returns format of scan result.
      */
-    format?: string;
+    format: string;
 }
+export interface IScanResultWithoutContent {
+    /**
+     * This indicates whether or not the scan resulted in readable content.
+     * When stopping the scan with `resolveScan` set to `true`, for example,
+     * this parameter is set to `false`, because no actual content was scanned.
+     *
+     * @since 1.0.0
+     */
+    hasContent: false;
+    /**
+     * This holds the content of the barcode if available.
+     *
+     * @since 1.0.0
+     */
+    content: undefined;
+    /**
+     * This returns format of scan result.
+     *
+     * @since 2.1.0
+     */
+    format: undefined;
+}
 export interface CheckPermissionOptions {
@@ -177,1 +247,2 @@ /**
 }
+export {};

dist/esm/definitions.js

@@ -1,3 +0,2 @@
-export var SupportedFormat;
-(function (SupportedFormat) {
+const _SupportedFormat = {
     // BEGIN 1D Product
@@ -7,53 +6,53 @@ /**
      */
-    SupportedFormat["UPC_A"] = "UPC_A";
-    SupportedFormat["UPC_E"] = "UPC_E";
+    UPC_A: 'UPC_A',
+    UPC_E: 'UPC_E',
     /**
      * Android only
      */
-    SupportedFormat["UPC_EAN_EXTENSION"] = "UPC_EAN_EXTENSION";
-    SupportedFormat["EAN_8"] = "EAN_8";
-    SupportedFormat["EAN_13"] = "EAN_13";
+    UPC_EAN_EXTENSION: 'UPC_EAN_EXTENSION',
+    EAN_8: 'EAN_8',
+    EAN_13: 'EAN_13',
     // END 1D Product
     // BEGIN 1D Industrial
-    SupportedFormat["CODE_39"] = "CODE_39";
+    CODE_39: 'CODE_39',
     /**
      * iOS only
      */
-    SupportedFormat["CODE_39_MOD_43"] = "CODE_39_MOD_43";
-    SupportedFormat["CODE_93"] = "CODE_93";
-    SupportedFormat["CODE_128"] = "CODE_128";
+    CODE_39_MOD_43: 'CODE_39_MOD_43',
+    CODE_93: 'CODE_93',
+    CODE_128: 'CODE_128',
     /**
      * Android only
      */
-    SupportedFormat["CODABAR"] = "CODABAR";
-    SupportedFormat["ITF"] = "ITF";
+    CODABAR: 'CODABAR',
+    ITF: 'ITF',
     /**
      * iOS only
      */
-    SupportedFormat["ITF_14"] = "ITF_14";
+    ITF_14: 'ITF_14',
     // END 1D Industrial
     // BEGIN 2D
-    SupportedFormat["AZTEC"] = "AZTEC";
-    SupportedFormat["DATA_MATRIX"] = "DATA_MATRIX";
+    AZTEC: 'AZTEC',
+    DATA_MATRIX: 'DATA_MATRIX',
     /**
      * Android only
      */
-    SupportedFormat["MAXICODE"] = "MAXICODE";
-    SupportedFormat["PDF_417"] = "PDF_417";
-    SupportedFormat["QR_CODE"] = "QR_CODE";
+    MAXICODE: 'MAXICODE',
+    PDF_417: 'PDF_417',
+    QR_CODE: 'QR_CODE',
     /**
      * Android only
      */
-    SupportedFormat["RSS_14"] = "RSS_14";
+    RSS_14: 'RSS_14',
     /**
      * Android only
      */
-    SupportedFormat["RSS_EXPANDED"] = "RSS_EXPANDED";
+    RSS_EXPANDED: 'RSS_EXPANDED',
     // END 2D
-})(SupportedFormat || (SupportedFormat = {}));
-export var CameraDirection;
-(function (CameraDirection) {
-    CameraDirection["FRONT"] = "front";
-    CameraDirection["BACK"] = "back";
-})(CameraDirection || (CameraDirection = {}));
+};
+export const SupportedFormat = _SupportedFormat;
+export const CameraDirection = {
+    FRONT: 'front',
+    BACK: 'back',
+};
 //# sourceMappingURL=definitions.js.map

dist/esm/web.d.ts

 import { WebPlugin } from '@capacitor/core';
-import type { BarcodeScannerPlugin, ScanOptions, ScanResult, CheckPermissionOptions, CheckPermissionResult, StopScanOptions, TorchStateResult } from './definitions';
+import { BarcodeScannerPlugin, ScanOptions, ScanResult, CheckPermissionOptions, CheckPermissionResult, StopScanOptions, TorchStateResult } from './definitions';
 export declare class BarcodeScannerWeb extends WebPlugin implements BarcodeScannerPlugin {
+    private _formats;
+    private _controls;
+    private _torchState;
+    private _video;
+    private _options;
+    private _backgroundColor;
     prepare(): Promise<void>;
@@ -18,2 +24,6 @@ hideBackground(): Promise<void>;
     getTorchState(): Promise<TorchStateResult>;
+    private _getVideoElement;
+    private _getFirstResultFromReader;
+    private _startVideo;
+    private _stop;
 }

dist/esm/web.js

 import { WebPlugin } from '@capacitor/core';
+import { BarcodeFormat, BrowserQRCodeReader } from '@zxing/browser';
+import { DecodeHintType } from '@zxing/library';
+import { CameraDirection, } from './definitions';
 export class BarcodeScannerWeb extends WebPlugin {
+    constructor() {
+        super(...arguments);
+        this._formats = [];
+        this._controls = null;
+        this._torchState = false;
+        this._video = null;
+        this._options = null;
+        this._backgroundColor = null;
+    }
     async prepare() {
-        throw this.unimplemented('Not implemented on web.');
+        await this._getVideoElement();
+        return;
     }
     async hideBackground() {
-        throw this.unimplemented('Not implemented on web.');
+        this._backgroundColor = document.documentElement.style.backgroundColor;
+        document.documentElement.style.backgroundColor = 'transparent';
+        return;
     }
     async showBackground() {
-        throw this.unimplemented('Not implemented on web.');
+        document.documentElement.style.backgroundColor = this._backgroundColor || '';
+        return;
     }
     async startScan(_options) {
-        throw this.unimplemented('Not implemented on web.');
+        var _a;
+        this._options = _options;
+        this._formats = [];
+        (_a = _options === null || _options === void 0 ? void 0 : _options.targetedFormats) === null || _a === void 0 ? void 0 : _a.forEach((format) => {
+            const formatIndex = Object.keys(BarcodeFormat).indexOf(format);
+            if (formatIndex >= 0) {
+                this._formats.push(0);
+            }
+            else {
+                console.error(format, 'is not supported on web');
+            }
+        });
+        const video = await this._getVideoElement();
+        if (video) {
+            return await this._getFirstResultFromReader();
+        }
+        else {
+            throw this.unavailable('Missing video element');
+        }
     }
@@ -19,29 +53,185 @@ async startScanning(_options, _callback) {
     async pauseScanning() {
-        throw this.unimplemented('Not implemented on web.');
+        if (this._controls) {
+            this._controls.stop();
+            this._controls = null;
+        }
     }
     async resumeScanning() {
-        throw this.unimplemented('Not implemented on web.');
+        this._getFirstResultFromReader();
     }
     async stopScan(_options) {
-        throw this.unimplemented('Not implemented on web.');
+        this._stop();
+        if (this._controls) {
+            this._controls.stop();
+            this._controls = null;
+        }
     }
     async checkPermission(_options) {
-        throw this.unimplemented('Not implemented on web.');
+        if (typeof navigator === 'undefined' || !navigator.permissions) {
+            throw this.unavailable('Permissions API not available in this browser');
+        }
+        try {
+            // https://developer.mozilla.org/en-US/docs/Web/API/Permissions/query
+            // the specific permissions that are supported varies among browsers that implement the
+            // permissions API, so we need a try/catch in case 'camera' is invalid
+            const permission = await window.navigator.permissions.query({
+                name: 'camera',
+            });
+            if (permission.state === 'prompt') {
+                return {
+                    neverAsked: true,
+                };
+            }
+            if (permission.state === 'denied') {
+                return {
+                    denied: true,
+                };
+            }
+            if (permission.state === 'granted') {
+                return {
+                    granted: true,
+                };
+            }
+            return {
+                unknown: true,
+            };
+        }
+        catch (_a) {
+            throw this.unavailable('Camera permissions are not available in this browser');
+        }
     }
     async openAppSettings() {
-        throw this.unimplemented('Not implemented on web.');
+        throw this.unavailable('App settings are not available in this browser');
     }
     async disableTorch() {
-        throw this.unimplemented('Not implemented on web.');
+        if (this._controls && this._controls.switchTorch) {
+            this._controls.switchTorch(false);
+            this._torchState = false;
+        }
     }
     async enableTorch() {
-        throw this.unimplemented('Not implemented on web.');
+        if (this._controls && this._controls.switchTorch) {
+            this._controls.switchTorch(true);
+            this._torchState = true;
+        }
     }
     async toggleTorch() {
-        throw this.unimplemented('Not implemented on web.');
+        if (this._controls && this._controls.switchTorch) {
+            this._controls.switchTorch(true);
+        }
     }
     async getTorchState() {
-        throw this.unimplemented('Not implemented on web.');
+        return { isEnabled: this._torchState };
     }
+    async _getVideoElement() {
+        if (!this._video) {
+            await this._startVideo();
+        }
+        return this._video;
+    }
+    async _getFirstResultFromReader() {
+        const videoElement = await this._getVideoElement();
+        return new Promise(async (resolve) => {
+            if (videoElement) {
+                let hints;
+                if (this._formats.length) {
+                    hints = new Map();
+                    hints.set(DecodeHintType.POSSIBLE_FORMATS, this._formats);
+                }
+                const reader = new BrowserQRCodeReader(hints);
+                this._controls = await reader.decodeFromVideoElement(videoElement, (result, error, controls) => {
+                    if (!error && result && result.getText()) {
+                        resolve({
+                            hasContent: true,
+                            content: result.getText(),
+                            format: result.getBarcodeFormat().toString(),
+                        });
+                        controls.stop();
+                        this._controls = null;
+                        this._stop();
+                    }
+                    if (error && error.message) {
+                        console.error(error.message);
+                    }
+                });
+            }
+        });
+    }
+    async _startVideo() {
+        return new Promise(async (resolve, reject) => {
+            var _a;
+            await navigator.mediaDevices
+                .getUserMedia({
+                audio: false,
+                video: true,
+            })
+                .then((stream) => {
+                // Stop any existing stream so we can request media with different constraints based on user input
+                stream.getTracks().forEach((track) => track.stop());
+            })
+                .catch((error) => {
+                reject(error);
+            });
+            const body = document.body;
+            const video = document.getElementById('video');
+            if (!video) {
+                const parent = document.createElement('div');
+                parent.setAttribute('style', 'position:absolute; top: 0; left: 0; width:100%; height: 100%; background-color: black;');
+                this._video = document.createElement('video');
+                this._video.id = 'video';
+                // Don't flip video feed if camera is rear facing
+                if (((_a = this._options) === null || _a === void 0 ? void 0 : _a.cameraDirection) !== CameraDirection.BACK) {
+                    this._video.setAttribute('style', '-webkit-transform: scaleX(-1); transform: scaleX(-1); width:100%; height: 100%;');
+                }
+                else {
+                    this._video.setAttribute('style', 'width:100%; height: 100%;');
+                }
+                const userAgent = navigator.userAgent.toLowerCase();
+                const isSafari = userAgent.includes('safari') && !userAgent.includes('chrome');
+                // Safari on iOS needs to have the autoplay, muted and playsinline attributes set for video.play() to be successful
+                // Without these attributes this.video.play() will throw a NotAllowedError
+                // https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari
+                if (isSafari) {
+                    this._video.setAttribute('autoplay', 'true');
+                    this._video.setAttribute('muted', 'true');
+                    this._video.setAttribute('playsinline', 'true');
+                }
+                parent.appendChild(this._video);
+                body.appendChild(parent);
+                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+                    const constraints = {
+                        video: {},
+                    };
+                    navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
+                        //video.src = window.URL.createObjectURL(stream);
+                        if (this._video) {
+                            this._video.srcObject = stream;
+                            this._video.play();
+                        }
+                        resolve({});
+                    }, (err) => {
+                        reject(err);
+                    });
+                }
+            }
+            else {
+                reject({ message: 'camera already started' });
+            }
+        });
+    }
+    async _stop() {
+        var _a;
+        if (this._video) {
+            this._video.pause();
+            const st = this._video.srcObject;
+            const tracks = st.getTracks();
+            for (var i = 0; i < tracks.length; i++) {
+                var track = tracks[i];
+                track.stop();
+            }
+            (_a = this._video.parentElement) === null || _a === void 0 ? void 0 : _a.remove();
+            this._video = null;
+        }
+    }
 }
 //# sourceMappingURL=web.js.map

dist/plugin.cjs.js

@@ -6,5 +6,6 @@ 'use strict';
 var core = require('@capacitor/core');
+var browser = require('@zxing/browser');
+var library = require('@zxing/library');
 
-exports.SupportedFormat = void 0;
-(function (SupportedFormat) {
+const _SupportedFormat = {
     // BEGIN 1D Product
@@ -14,53 +15,53 @@ /**
      */
-    SupportedFormat["UPC_A"] = "UPC_A";
-    SupportedFormat["UPC_E"] = "UPC_E";
+    UPC_A: 'UPC_A',
+    UPC_E: 'UPC_E',
     /**
      * Android only
      */
-    SupportedFormat["UPC_EAN_EXTENSION"] = "UPC_EAN_EXTENSION";
-    SupportedFormat["EAN_8"] = "EAN_8";
-    SupportedFormat["EAN_13"] = "EAN_13";
+    UPC_EAN_EXTENSION: 'UPC_EAN_EXTENSION',
+    EAN_8: 'EAN_8',
+    EAN_13: 'EAN_13',
     // END 1D Product
     // BEGIN 1D Industrial
-    SupportedFormat["CODE_39"] = "CODE_39";
+    CODE_39: 'CODE_39',
     /**
      * iOS only
      */
-    SupportedFormat["CODE_39_MOD_43"] = "CODE_39_MOD_43";
-    SupportedFormat["CODE_93"] = "CODE_93";
-    SupportedFormat["CODE_128"] = "CODE_128";
+    CODE_39_MOD_43: 'CODE_39_MOD_43',
+    CODE_93: 'CODE_93',
+    CODE_128: 'CODE_128',
     /**
      * Android only
      */
-    SupportedFormat["CODABAR"] = "CODABAR";
-    SupportedFormat["ITF"] = "ITF";
+    CODABAR: 'CODABAR',
+    ITF: 'ITF',
     /**
      * iOS only
      */
-    SupportedFormat["ITF_14"] = "ITF_14";
+    ITF_14: 'ITF_14',
     // END 1D Industrial
     // BEGIN 2D
-    SupportedFormat["AZTEC"] = "AZTEC";
-    SupportedFormat["DATA_MATRIX"] = "DATA_MATRIX";
+    AZTEC: 'AZTEC',
+    DATA_MATRIX: 'DATA_MATRIX',
     /**
      * Android only
      */
-    SupportedFormat["MAXICODE"] = "MAXICODE";
-    SupportedFormat["PDF_417"] = "PDF_417";
-    SupportedFormat["QR_CODE"] = "QR_CODE";
+    MAXICODE: 'MAXICODE',
+    PDF_417: 'PDF_417',
+    QR_CODE: 'QR_CODE',
     /**
      * Android only
      */
-    SupportedFormat["RSS_14"] = "RSS_14";
+    RSS_14: 'RSS_14',
     /**
      * Android only
      */
-    SupportedFormat["RSS_EXPANDED"] = "RSS_EXPANDED";
+    RSS_EXPANDED: 'RSS_EXPANDED',
     // END 2D
-})(exports.SupportedFormat || (exports.SupportedFormat = {}));
-exports.CameraDirection = void 0;
-(function (CameraDirection) {
-    CameraDirection["FRONT"] = "front";
-    CameraDirection["BACK"] = "back";
-})(exports.CameraDirection || (exports.CameraDirection = {}));
+};
+const SupportedFormat = _SupportedFormat;
+const CameraDirection = {
+    FRONT: 'front',
+    BACK: 'back',
+};
 
@@ -72,13 +73,44 @@ const BarcodeScanner = core.registerPlugin('BarcodeScanner', {
 class BarcodeScannerWeb extends core.WebPlugin {
+    constructor() {
+        super(...arguments);
+        this._formats = [];
+        this._controls = null;
+        this._torchState = false;
+        this._video = null;
+        this._options = null;
+        this._backgroundColor = null;
+    }
     async prepare() {
-        throw this.unimplemented('Not implemented on web.');
+        await this._getVideoElement();
+        return;
     }
     async hideBackground() {
-        throw this.unimplemented('Not implemented on web.');
+        this._backgroundColor = document.documentElement.style.backgroundColor;
+        document.documentElement.style.backgroundColor = 'transparent';
+        return;
     }
     async showBackground() {
-        throw this.unimplemented('Not implemented on web.');
+        document.documentElement.style.backgroundColor = this._backgroundColor || '';
+        return;
     }
     async startScan(_options) {
-        throw this.unimplemented('Not implemented on web.');
+        var _a;
+        this._options = _options;
+        this._formats = [];
+        (_a = _options === null || _options === void 0 ? void 0 : _options.targetedFormats) === null || _a === void 0 ? void 0 : _a.forEach((format) => {
+            const formatIndex = Object.keys(browser.BarcodeFormat).indexOf(format);
+            if (formatIndex >= 0) {
+                this._formats.push(0);
+            }
+            else {
+                console.error(format, 'is not supported on web');
+            }
+        });
+        const video = await this._getVideoElement();
+        if (video) {
+            return await this._getFirstResultFromReader();
+        }
+        else {
+            throw this.unavailable('Missing video element');
+        }
     }
@@ -89,28 +121,184 @@ async startScanning(_options, _callback) {
     async pauseScanning() {
-        throw this.unimplemented('Not implemented on web.');
+        if (this._controls) {
+            this._controls.stop();
+            this._controls = null;
+        }
     }
     async resumeScanning() {
-        throw this.unimplemented('Not implemented on web.');
+        this._getFirstResultFromReader();
     }
     async stopScan(_options) {
-        throw this.unimplemented('Not implemented on web.');
+        this._stop();
+        if (this._controls) {
+            this._controls.stop();
+            this._controls = null;
+        }
     }
     async checkPermission(_options) {
-        throw this.unimplemented('Not implemented on web.');
+        if (typeof navigator === 'undefined' || !navigator.permissions) {
+            throw this.unavailable('Permissions API not available in this browser');
+        }
+        try {
+            // https://developer.mozilla.org/en-US/docs/Web/API/Permissions/query
+            // the specific permissions that are supported varies among browsers that implement the
+            // permissions API, so we need a try/catch in case 'camera' is invalid
+            const permission = await window.navigator.permissions.query({
+                name: 'camera',
+            });
+            if (permission.state === 'prompt') {
+                return {
+                    neverAsked: true,
+                };
+            }
+            if (permission.state === 'denied') {
+                return {
+                    denied: true,
+                };
+            }
+            if (permission.state === 'granted') {
+                return {
+                    granted: true,
+                };
+            }
+            return {
+                unknown: true,
+            };
+        }
+        catch (_a) {
+            throw this.unavailable('Camera permissions are not available in this browser');
+        }
     }
     async openAppSettings() {
-        throw this.unimplemented('Not implemented on web.');
+        throw this.unavailable('App settings are not available in this browser');
     }
     async disableTorch() {
-        throw this.unimplemented('Not implemented on web.');
+        if (this._controls && this._controls.switchTorch) {
+            this._controls.switchTorch(false);
+            this._torchState = false;
+        }
     }
     async enableTorch() {
-        throw this.unimplemented('Not implemented on web.');
+        if (this._controls && this._controls.switchTorch) {
+            this._controls.switchTorch(true);
+            this._torchState = true;
+        }
     }
     async toggleTorch() {
-        throw this.unimplemented('Not implemented on web.');
+        if (this._controls && this._controls.switchTorch) {
+            this._controls.switchTorch(true);
+        }
     }
     async getTorchState() {
-        throw this.unimplemented('Not implemented on web.');
+        return { isEnabled: this._torchState };
     }
+    async _getVideoElement() {
+        if (!this._video) {
+            await this._startVideo();
+        }
+        return this._video;
+    }
+    async _getFirstResultFromReader() {
+        const videoElement = await this._getVideoElement();
+        return new Promise(async (resolve) => {
+            if (videoElement) {
+                let hints;
+                if (this._formats.length) {
+                    hints = new Map();
+                    hints.set(library.DecodeHintType.POSSIBLE_FORMATS, this._formats);
+                }
+                const reader = new browser.BrowserQRCodeReader(hints);
+                this._controls = await reader.decodeFromVideoElement(videoElement, (result, error, controls) => {
+                    if (!error && result && result.getText()) {
+                        resolve({
+                            hasContent: true,
+                            content: result.getText(),
+                            format: result.getBarcodeFormat().toString(),
+                        });
+                        controls.stop();
+                        this._controls = null;
+                        this._stop();
+                    }
+                    if (error && error.message) {
+                        console.error(error.message);
+                    }
+                });
+            }
+        });
+    }
+    async _startVideo() {
+        return new Promise(async (resolve, reject) => {
+            var _a;
+            await navigator.mediaDevices
+                .getUserMedia({
+                audio: false,
+                video: true,
+            })
+                .then((stream) => {
+                // Stop any existing stream so we can request media with different constraints based on user input
+                stream.getTracks().forEach((track) => track.stop());
+            })
+                .catch((error) => {
+                reject(error);
+            });
+            const body = document.body;
+            const video = document.getElementById('video');
+            if (!video) {
+                const parent = document.createElement('div');
+                parent.setAttribute('style', 'position:absolute; top: 0; left: 0; width:100%; height: 100%; background-color: black;');
+                this._video = document.createElement('video');
+                this._video.id = 'video';
+                // Don't flip video feed if camera is rear facing
+                if (((_a = this._options) === null || _a === void 0 ? void 0 : _a.cameraDirection) !== CameraDirection.BACK) {
+                    this._video.setAttribute('style', '-webkit-transform: scaleX(-1); transform: scaleX(-1); width:100%; height: 100%;');
+                }
+                else {
+                    this._video.setAttribute('style', 'width:100%; height: 100%;');
+                }
+                const userAgent = navigator.userAgent.toLowerCase();
+                const isSafari = userAgent.includes('safari') && !userAgent.includes('chrome');
+                // Safari on iOS needs to have the autoplay, muted and playsinline attributes set for video.play() to be successful
+                // Without these attributes this.video.play() will throw a NotAllowedError
+                // https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari
+                if (isSafari) {
+                    this._video.setAttribute('autoplay', 'true');
+                    this._video.setAttribute('muted', 'true');
+                    this._video.setAttribute('playsinline', 'true');
+                }
+                parent.appendChild(this._video);
+                body.appendChild(parent);
+                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+                    const constraints = {
+                        video: {},
+                    };
+                    navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
+                        //video.src = window.URL.createObjectURL(stream);
+                        if (this._video) {
+                            this._video.srcObject = stream;
+                            this._video.play();
+                        }
+                        resolve({});
+                    }, (err) => {
+                        reject(err);
+                    });
+                }
+            }
+            else {
+                reject({ message: 'camera already started' });
+            }
+        });
+    }
+    async _stop() {
+        var _a;
+        if (this._video) {
+            this._video.pause();
+            const st = this._video.srcObject;
+            const tracks = st.getTracks();
+            for (var i = 0; i < tracks.length; i++) {
+                var track = tracks[i];
+                track.stop();
+            }
+            (_a = this._video.parentElement) === null || _a === void 0 ? void 0 : _a.remove();
+            this._video = null;
+        }
+    }
 }
@@ -124,2 +312,4 @@
 exports.BarcodeScanner = BarcodeScanner;
+exports.CameraDirection = CameraDirection;
+exports.SupportedFormat = SupportedFormat;
 //# sourceMappingURL=plugin.cjs.js.map

dist/plugin.js

@@ -1,6 +0,5 @@
-var capacitorExample = (function (exports, core) {
+var capacitorExample = (function (exports, core, browser, library) {
     'use strict';
 
-    exports.SupportedFormat = void 0;
-    (function (SupportedFormat) {
+    const _SupportedFormat = {
         // BEGIN 1D Product
@@ -10,53 +9,53 @@ /**
          */
-        SupportedFormat["UPC_A"] = "UPC_A";
-        SupportedFormat["UPC_E"] = "UPC_E";
+        UPC_A: 'UPC_A',
+        UPC_E: 'UPC_E',
         /**
          * Android only
          */
-        SupportedFormat["UPC_EAN_EXTENSION"] = "UPC_EAN_EXTENSION";
-        SupportedFormat["EAN_8"] = "EAN_8";
-        SupportedFormat["EAN_13"] = "EAN_13";
+        UPC_EAN_EXTENSION: 'UPC_EAN_EXTENSION',
+        EAN_8: 'EAN_8',
+        EAN_13: 'EAN_13',
         // END 1D Product
         // BEGIN 1D Industrial
-        SupportedFormat["CODE_39"] = "CODE_39";
+        CODE_39: 'CODE_39',
         /**
          * iOS only
          */
-        SupportedFormat["CODE_39_MOD_43"] = "CODE_39_MOD_43";
-        SupportedFormat["CODE_93"] = "CODE_93";
-        SupportedFormat["CODE_128"] = "CODE_128";
+        CODE_39_MOD_43: 'CODE_39_MOD_43',
+        CODE_93: 'CODE_93',
+        CODE_128: 'CODE_128',
         /**
          * Android only
          */
-        SupportedFormat["CODABAR"] = "CODABAR";
-        SupportedFormat["ITF"] = "ITF";
+        CODABAR: 'CODABAR',
+        ITF: 'ITF',
         /**
          * iOS only
          */
-        SupportedFormat["ITF_14"] = "ITF_14";
+        ITF_14: 'ITF_14',
         // END 1D Industrial
         // BEGIN 2D
-        SupportedFormat["AZTEC"] = "AZTEC";
-        SupportedFormat["DATA_MATRIX"] = "DATA_MATRIX";
+        AZTEC: 'AZTEC',
+        DATA_MATRIX: 'DATA_MATRIX',
         /**
          * Android only
          */
-        SupportedFormat["MAXICODE"] = "MAXICODE";
-        SupportedFormat["PDF_417"] = "PDF_417";
-        SupportedFormat["QR_CODE"] = "QR_CODE";
+        MAXICODE: 'MAXICODE',
+        PDF_417: 'PDF_417',
+        QR_CODE: 'QR_CODE',
         /**
          * Android only
          */
-        SupportedFormat["RSS_14"] = "RSS_14";
+        RSS_14: 'RSS_14',
         /**
          * Android only
          */
-        SupportedFormat["RSS_EXPANDED"] = "RSS_EXPANDED";
+        RSS_EXPANDED: 'RSS_EXPANDED',
         // END 2D
-    })(exports.SupportedFormat || (exports.SupportedFormat = {}));
-    exports.CameraDirection = void 0;
-    (function (CameraDirection) {
-        CameraDirection["FRONT"] = "front";
-        CameraDirection["BACK"] = "back";
-    })(exports.CameraDirection || (exports.CameraDirection = {}));
+    };
+    const SupportedFormat = _SupportedFormat;
+    const CameraDirection = {
+        FRONT: 'front',
+        BACK: 'back',
+    };
 
@@ -68,13 +67,44 @@ const BarcodeScanner = core.registerPlugin('BarcodeScanner', {
     class BarcodeScannerWeb extends core.WebPlugin {
+        constructor() {
+            super(...arguments);
+            this._formats = [];
+            this._controls = null;
+            this._torchState = false;
+            this._video = null;
+            this._options = null;
+            this._backgroundColor = null;
+        }
         async prepare() {
-            throw this.unimplemented('Not implemented on web.');
+            await this._getVideoElement();
+            return;
         }
         async hideBackground() {
-            throw this.unimplemented('Not implemented on web.');
+            this._backgroundColor = document.documentElement.style.backgroundColor;
+            document.documentElement.style.backgroundColor = 'transparent';
+            return;
         }
         async showBackground() {
-            throw this.unimplemented('Not implemented on web.');
+            document.documentElement.style.backgroundColor = this._backgroundColor || '';
+            return;
         }
         async startScan(_options) {
-            throw this.unimplemented('Not implemented on web.');
+            var _a;
+            this._options = _options;
+            this._formats = [];
+            (_a = _options === null || _options === void 0 ? void 0 : _options.targetedFormats) === null || _a === void 0 ? void 0 : _a.forEach((format) => {
+                const formatIndex = Object.keys(browser.BarcodeFormat).indexOf(format);
+                if (formatIndex >= 0) {
+                    this._formats.push(0);
+                }
+                else {
+                    console.error(format, 'is not supported on web');
+                }
+            });
+            const video = await this._getVideoElement();
+            if (video) {
+                return await this._getFirstResultFromReader();
+            }
+            else {
+                throw this.unavailable('Missing video element');
+            }
         }
@@ -85,28 +115,184 @@ async startScanning(_options, _callback) {
         async pauseScanning() {
-            throw this.unimplemented('Not implemented on web.');
+            if (this._controls) {
+                this._controls.stop();
+                this._controls = null;
+            }
         }
         async resumeScanning() {
-            throw this.unimplemented('Not implemented on web.');
+            this._getFirstResultFromReader();
         }
         async stopScan(_options) {
-            throw this.unimplemented('Not implemented on web.');
+            this._stop();
+            if (this._controls) {
+                this._controls.stop();
+                this._controls = null;
+            }
         }
         async checkPermission(_options) {
-            throw this.unimplemented('Not implemented on web.');
+            if (typeof navigator === 'undefined' || !navigator.permissions) {
+                throw this.unavailable('Permissions API not available in this browser');
+            }
+            try {
+                // https://developer.mozilla.org/en-US/docs/Web/API/Permissions/query
+                // the specific permissions that are supported varies among browsers that implement the
+                // permissions API, so we need a try/catch in case 'camera' is invalid
+                const permission = await window.navigator.permissions.query({
+                    name: 'camera',
+                });
+                if (permission.state === 'prompt') {
+                    return {
+                        neverAsked: true,
+                    };
+                }
+                if (permission.state === 'denied') {
+                    return {
+                        denied: true,
+                    };
+                }
+                if (permission.state === 'granted') {
+                    return {
+                        granted: true,
+                    };
+                }
+                return {
+                    unknown: true,
+                };
+            }
+            catch (_a) {
+                throw this.unavailable('Camera permissions are not available in this browser');
+            }
         }
         async openAppSettings() {
-            throw this.unimplemented('Not implemented on web.');
+            throw this.unavailable('App settings are not available in this browser');
         }
         async disableTorch() {
-            throw this.unimplemented('Not implemented on web.');
+            if (this._controls && this._controls.switchTorch) {
+                this._controls.switchTorch(false);
+                this._torchState = false;
+            }
         }
         async enableTorch() {
-            throw this.unimplemented('Not implemented on web.');
+            if (this._controls && this._controls.switchTorch) {
+                this._controls.switchTorch(true);
+                this._torchState = true;
+            }
         }
         async toggleTorch() {
-            throw this.unimplemented('Not implemented on web.');
+            if (this._controls && this._controls.switchTorch) {
+                this._controls.switchTorch(true);
+            }
         }
         async getTorchState() {
-            throw this.unimplemented('Not implemented on web.');
+            return { isEnabled: this._torchState };
         }
+        async _getVideoElement() {
+            if (!this._video) {
+                await this._startVideo();
+            }
+            return this._video;
+        }
+        async _getFirstResultFromReader() {
+            const videoElement = await this._getVideoElement();
+            return new Promise(async (resolve) => {
+                if (videoElement) {
+                    let hints;
+                    if (this._formats.length) {
+                        hints = new Map();
+                        hints.set(library.DecodeHintType.POSSIBLE_FORMATS, this._formats);
+                    }
+                    const reader = new browser.BrowserQRCodeReader(hints);
+                    this._controls = await reader.decodeFromVideoElement(videoElement, (result, error, controls) => {
+                        if (!error && result && result.getText()) {
+                            resolve({
+                                hasContent: true,
+                                content: result.getText(),
+                                format: result.getBarcodeFormat().toString(),
+                            });
+                            controls.stop();
+                            this._controls = null;
+                            this._stop();
+                        }
+                        if (error && error.message) {
+                            console.error(error.message);
+                        }
+                    });
+                }
+            });
+        }
+        async _startVideo() {
+            return new Promise(async (resolve, reject) => {
+                var _a;
+                await navigator.mediaDevices
+                    .getUserMedia({
+                    audio: false,
+                    video: true,
+                })
+                    .then((stream) => {
+                    // Stop any existing stream so we can request media with different constraints based on user input
+                    stream.getTracks().forEach((track) => track.stop());
+                })
+                    .catch((error) => {
+                    reject(error);
+                });
+                const body = document.body;
+                const video = document.getElementById('video');
+                if (!video) {
+                    const parent = document.createElement('div');
+                    parent.setAttribute('style', 'position:absolute; top: 0; left: 0; width:100%; height: 100%; background-color: black;');
+                    this._video = document.createElement('video');
+                    this._video.id = 'video';
+                    // Don't flip video feed if camera is rear facing
+                    if (((_a = this._options) === null || _a === void 0 ? void 0 : _a.cameraDirection) !== CameraDirection.BACK) {
+                        this._video.setAttribute('style', '-webkit-transform: scaleX(-1); transform: scaleX(-1); width:100%; height: 100%;');
+                    }
+                    else {
+                        this._video.setAttribute('style', 'width:100%; height: 100%;');
+                    }
+                    const userAgent = navigator.userAgent.toLowerCase();
+                    const isSafari = userAgent.includes('safari') && !userAgent.includes('chrome');
+                    // Safari on iOS needs to have the autoplay, muted and playsinline attributes set for video.play() to be successful
+                    // Without these attributes this.video.play() will throw a NotAllowedError
+                    // https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari
+                    if (isSafari) {
+                        this._video.setAttribute('autoplay', 'true');
+                        this._video.setAttribute('muted', 'true');
+                        this._video.setAttribute('playsinline', 'true');
+                    }
+                    parent.appendChild(this._video);
+                    body.appendChild(parent);
+                    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+                        const constraints = {
+                            video: {},
+                        };
+                        navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
+                            //video.src = window.URL.createObjectURL(stream);
+                            if (this._video) {
+                                this._video.srcObject = stream;
+                                this._video.play();
+                            }
+                            resolve({});
+                        }, (err) => {
+                            reject(err);
+                        });
+                    }
+                }
+                else {
+                    reject({ message: 'camera already started' });
+                }
+            });
+        }
+        async _stop() {
+            var _a;
+            if (this._video) {
+                this._video.pause();
+                const st = this._video.srcObject;
+                const tracks = st.getTracks();
+                for (var i = 0; i < tracks.length; i++) {
+                    var track = tracks[i];
+                    track.stop();
+                }
+                (_a = this._video.parentElement) === null || _a === void 0 ? void 0 : _a.remove();
+                this._video = null;
+            }
+        }
     }
@@ -120,2 +306,4 @@
     exports.BarcodeScanner = BarcodeScanner;
+    exports.CameraDirection = CameraDirection;
+    exports.SupportedFormat = SupportedFormat;
 
@@ -126,3 +314,3 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
-})({}, capacitorExports);
+})({}, capacitorExports, zxingBrowser, zxingLibrary);
 //# sourceMappingURL=plugin.js.map

package.json

 {
   "name": "@capacitor-community/barcode-scanner",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "A fast and efficient (QR) barcode scanner for Capacitor",
@@ -91,3 +91,6 @@ "main": "dist/plugin.cjs.js",
   },
-  "dependencies": {}
+  "dependencies": {
+    "@zxing/browser": "^0.1.1",
+    "@zxing/library": "^0.19.2"
+  }
 }

README.md

@@ -42,2 +42,4 @@ <p align="center"><br><img src="https://user-images.githubusercontent.com/236501/85893648-1c92e880-b7a8-11ea-926d-95355b8175c7.png" width="128" height="128" /></p>
 
+On **Web** this library uses [`zxing/browser`](https://github.com/zxing-js/browser). That means **[this list of barcodes](https://github.com/zxing/zxing/#supported-formats)** is supported. The web implementation is currently in development, there might be issues and not all features are currently supported!
+
 ### Note on supported Capacitor versions
@@ -44,0 +46,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

171962

increased by60.52%

Lines of code

1177

increased by122.5%

Number of lines in readme file

579

increased by0.35%

Worsened metrics

Dependency count

3

increased by200%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@zxing/browser@^0.1.1

• + Added@zxing/library@^0.19.2

• + Added@zxing/browser@0.1.4(transitive)

• + Added@zxing/library@0.19.30.20.0(transitive)

• + Added@zxing/text-encoding@0.9.0(transitive)

• + Addedts-custom-error@3.3.1(transitive)