@twintag/twintag-core 0.2.279-fix-ocr-scanner-update-6ec656becd9d1b5b7652da56c9cf57d84db8e05f → 0.2.279-fix-ocr-scanner-update-ce883df10b1d4b81e7cf691ed723691d6f7bc81c

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["twintag-preview.cjs",[[1,"twintag-preview",{"item":[1],"initial":[16],"smoothExtinction":[2,"smooth-extinction"],"extension":[1],"showButtons":[4,"show-buttons"],"previewableItem":[32],"type":[32]}]]],["twintag-auth-callback.cjs",[[1,"twintag-auth-callback"]]],["twintag-auth-logout.cjs",[[1,"twintag-auth-logout"]]],["twintag-media.cjs",[[1,"twintag-media",{"first":[1],"middle":[1],"last":[1]}]]],["twintag-ocr-scanner.cjs",[[1,"twintag-ocr-scanner",{"stream":[1040],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"zoom":[514],"devices":[32]}]]],["twintag-offline-actions.cjs",[[1,"twintag-offline-actions",{"enableSingleRetry":[4,"enable-single-retry"],"header":[1],"showTimestamp":[4,"show-timestamp"],"showDescription":[4,"show-description"],"closeText":[1,"close-text"],"retryText":[1,"retry-text"],"noPendingActionsText":[1,"no-pending-actions-text"],"pendingOfflineRequests":[32],"processing":[32]},[[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-state.cjs",[[1,"twintag-offline-state",{"onlineState":[32],"pendingRequests":[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-support.cjs",[[1,"twintag-offline-support",{"autoSync":[4,"auto-sync"],"forceOffline":[4,"force-offline"],"config":[16]}]]],["twintag-qr-scanner.cjs",[[1,"twintag-qr-scanner",{"stream":[1040],"mode":[1],"format":[1],"crop":[2],"zoom":[514],"devices":[32]}]]],["twintag-share.cjs",[[1,"twintag-share",{"url":[1],"modalTitle":[1,"modal-title"],"modalSubtitle":[1,"modal-subtitle"],"closeBtn":[1,"close-btn"],"copyClipboardBtn":[1,"copy-clipboard-btn"],"open":[1540]},[[0,"keydown","handleKeyDown"]]]]],["twintag-spinner.cjs",[[1,"twintag-spinner",{"color":[513],"duration":[2],"name":[1]}]]],["twintag-pdf-viewer.cjs",[[0,"twintag-pdf-viewer",{"src":[1],"fileName":[1,"file-name"],"file":[32],"fileURL":[32]}]]]], options);
+  return index.bootstrapLazy([["twintag-preview.cjs",[[1,"twintag-preview",{"item":[1],"initial":[16],"smoothExtinction":[2,"smooth-extinction"],"extension":[1],"showButtons":[4,"show-buttons"],"previewableItem":[32],"type":[32]}]]],["twintag-auth-callback.cjs",[[1,"twintag-auth-callback"]]],["twintag-auth-logout.cjs",[[1,"twintag-auth-logout"]]],["twintag-media.cjs",[[1,"twintag-media",{"first":[1],"middle":[1],"last":[1]}]]],["twintag-ocr-scanner.cjs",[[1,"twintag-ocr-scanner",{"stream":[1040],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"zoom":[514],"devices":[32]},[[2,"recognize","ocrHandler"]]]]],["twintag-offline-actions.cjs",[[1,"twintag-offline-actions",{"enableSingleRetry":[4,"enable-single-retry"],"header":[1],"showTimestamp":[4,"show-timestamp"],"showDescription":[4,"show-description"],"closeText":[1,"close-text"],"retryText":[1,"retry-text"],"noPendingActionsText":[1,"no-pending-actions-text"],"pendingOfflineRequests":[32],"processing":[32]},[[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-state.cjs",[[1,"twintag-offline-state",{"onlineState":[32],"pendingRequests":[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-support.cjs",[[1,"twintag-offline-support",{"autoSync":[4,"auto-sync"],"forceOffline":[4,"force-offline"],"config":[16]}]]],["twintag-qr-scanner.cjs",[[1,"twintag-qr-scanner",{"stream":[1040],"mode":[1],"format":[1],"crop":[2],"zoom":[514],"devices":[32]}]]],["twintag-share.cjs",[[1,"twintag-share",{"url":[1],"modalTitle":[1,"modal-title"],"modalSubtitle":[1,"modal-subtitle"],"closeBtn":[1,"close-btn"],"copyClipboardBtn":[1,"copy-clipboard-btn"],"open":[1540]},[[0,"keydown","handleKeyDown"]]]]],["twintag-spinner.cjs",[[1,"twintag-spinner",{"color":[513],"duration":[2],"name":[1]}]]],["twintag-pdf-viewer.cjs",[[0,"twintag-pdf-viewer",{"src":[1],"fileName":[1,"file-name"],"file":[32],"fileURL":[32]}]]]], options);
   });
 };
 

package/dist/cjs/stencil-web-components.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["twintag-preview.cjs",[[1,"twintag-preview",{"item":[1],"initial":[16],"smoothExtinction":[2,"smooth-extinction"],"extension":[1],"showButtons":[4,"show-buttons"],"previewableItem":[32],"type":[32]}]]],["twintag-auth-callback.cjs",[[1,"twintag-auth-callback"]]],["twintag-auth-logout.cjs",[[1,"twintag-auth-logout"]]],["twintag-media.cjs",[[1,"twintag-media",{"first":[1],"middle":[1],"last":[1]}]]],["twintag-ocr-scanner.cjs",[[1,"twintag-ocr-scanner",{"stream":[1040],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"zoom":[514],"devices":[32]}]]],["twintag-offline-actions.cjs",[[1,"twintag-offline-actions",{"enableSingleRetry":[4,"enable-single-retry"],"header":[1],"showTimestamp":[4,"show-timestamp"],"showDescription":[4,"show-description"],"closeText":[1,"close-text"],"retryText":[1,"retry-text"],"noPendingActionsText":[1,"no-pending-actions-text"],"pendingOfflineRequests":[32],"processing":[32]},[[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-state.cjs",[[1,"twintag-offline-state",{"onlineState":[32],"pendingRequests":[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-support.cjs",[[1,"twintag-offline-support",{"autoSync":[4,"auto-sync"],"forceOffline":[4,"force-offline"],"config":[16]}]]],["twintag-qr-scanner.cjs",[[1,"twintag-qr-scanner",{"stream":[1040],"mode":[1],"format":[1],"crop":[2],"zoom":[514],"devices":[32]}]]],["twintag-share.cjs",[[1,"twintag-share",{"url":[1],"modalTitle":[1,"modal-title"],"modalSubtitle":[1,"modal-subtitle"],"closeBtn":[1,"close-btn"],"copyClipboardBtn":[1,"copy-clipboard-btn"],"open":[1540]},[[0,"keydown","handleKeyDown"]]]]],["twintag-spinner.cjs",[[1,"twintag-spinner",{"color":[513],"duration":[2],"name":[1]}]]],["twintag-pdf-viewer.cjs",[[0,"twintag-pdf-viewer",{"src":[1],"fileName":[1,"file-name"],"file":[32],"fileURL":[32]}]]]], options);
+  return index.bootstrapLazy([["twintag-preview.cjs",[[1,"twintag-preview",{"item":[1],"initial":[16],"smoothExtinction":[2,"smooth-extinction"],"extension":[1],"showButtons":[4,"show-buttons"],"previewableItem":[32],"type":[32]}]]],["twintag-auth-callback.cjs",[[1,"twintag-auth-callback"]]],["twintag-auth-logout.cjs",[[1,"twintag-auth-logout"]]],["twintag-media.cjs",[[1,"twintag-media",{"first":[1],"middle":[1],"last":[1]}]]],["twintag-ocr-scanner.cjs",[[1,"twintag-ocr-scanner",{"stream":[1040],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"zoom":[514],"devices":[32]},[[2,"recognize","ocrHandler"]]]]],["twintag-offline-actions.cjs",[[1,"twintag-offline-actions",{"enableSingleRetry":[4,"enable-single-retry"],"header":[1],"showTimestamp":[4,"show-timestamp"],"showDescription":[4,"show-description"],"closeText":[1,"close-text"],"retryText":[1,"retry-text"],"noPendingActionsText":[1,"no-pending-actions-text"],"pendingOfflineRequests":[32],"processing":[32]},[[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-state.cjs",[[1,"twintag-offline-state",{"onlineState":[32],"pendingRequests":[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-support.cjs",[[1,"twintag-offline-support",{"autoSync":[4,"auto-sync"],"forceOffline":[4,"force-offline"],"config":[16]}]]],["twintag-qr-scanner.cjs",[[1,"twintag-qr-scanner",{"stream":[1040],"mode":[1],"format":[1],"crop":[2],"zoom":[514],"devices":[32]}]]],["twintag-share.cjs",[[1,"twintag-share",{"url":[1],"modalTitle":[1,"modal-title"],"modalSubtitle":[1,"modal-subtitle"],"closeBtn":[1,"close-btn"],"copyClipboardBtn":[1,"copy-clipboard-btn"],"open":[1540]},[[0,"keydown","handleKeyDown"]]]]],["twintag-spinner.cjs",[[1,"twintag-spinner",{"color":[513],"duration":[2],"name":[1]}]]],["twintag-pdf-viewer.cjs",[[0,"twintag-pdf-viewer",{"src":[1],"fileName":[1,"file-name"],"file":[32],"fileURL":[32]}]]]], options);
 });

package/dist/cjs/twintag-ocr-scanner.cjs.entry.js

@@ -1892,11 +1892,12 @@ var src = {
 
 const twintagScannerCss = ":host{--twintag-scanner-bg-select-cameras:white;--twintag-scanner-text-select-cameras:black;--twintag-scanner-radius-select-cameras:6px 0 0 0;--twintag-scanner-min-height:min-content;--twintag-scanner-corners-color:white;--twintag-scanner-corners-width:4px;--twintag-scanner-corners-length:36px;--twintag-scanner-corners-offset:24px;display:grid;place-items:center;position:relative;width:100%}:host .icon-container{display:grid;place-items:center;position:absolute;inset:0;z-index:-2222}:host .icon-container .check-icon{opacity:0;z-index:2222}:host .video-container{--crop:0;--crop-x:var(--crop);--crop-y:var(--crop);display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;opacity:0;overflow:hidden;z-index:1}:host .video-container::after{content:\"\";position:absolute;width:100%;height:100%;opacity:inherit;background:rgba(0, 0, 0, 0.5);-webkit-clip-path:polygon(0% 0%, 0% 100%, calc(var(--crop-x) * 1%) 100%, calc(var(--crop-x) * 1%) calc(var(--crop-y) * 1%), calc(calc(100 - var(--crop-x)) * 1%) calc(var(--crop-y) * 1%), calc(calc(100 - var(--crop-x)) * 1%) calc(calc(100 - var(--crop-y)) * 1%), calc(var(--crop-x) * 1%) calc(calc(100 - var(--crop-y)) * 1%), calc(var(--crop-x) * 1%) 100%, 100% 100%, 100% 0%);clip-path:polygon(0% 0%, 0% 100%, calc(var(--crop-x) * 1%) 100%, calc(var(--crop-x) * 1%) calc(var(--crop-y) * 1%), calc(calc(100 - var(--crop-x)) * 1%) calc(var(--crop-y) * 1%), calc(calc(100 - var(--crop-x)) * 1%) calc(calc(100 - var(--crop-y)) * 1%), calc(var(--crop-x) * 1%) calc(calc(100 - var(--crop-y)) * 1%), calc(var(--crop-x) * 1%) 100%, 100% 100%, 100% 0%)}:host .video-container:before{display:block;content:\"\";width:100%;padding-top:100%}:host .video-container .video-corners{position:absolute;width:calc((1 - var(--crop-x) / 50) * 100% + var(--twintag-scanner-corners-offset));height:calc((1 - var(--crop-y) / 50) * 100% + var(--twintag-scanner-corners-offset));opacity:inherit;background:linear-gradient(to right, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 0 0, linear-gradient(to right, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 0 100%, linear-gradient(to left, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 100% 0, linear-gradient(to left, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 100% 100%, linear-gradient(to bottom, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 0 0, linear-gradient(to bottom, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 100% 0, linear-gradient(to top, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 0 100%, linear-gradient(to top, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 100% 100%;background-size:var(--twintag-scanner-corners-length) var(--twintag-scanner-corners-length);background-repeat:no-repeat;z-index:2222}:host .video-container video{position:absolute;width:100% !important;object-fit:cover;object-position:center;aspect-ratio:1/1 !important;min-height:var(--twintag-scanner-min-height)}";
 
-const TwintagOCRScanner = class {
+const TwintagOcrScanner = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.symbol = index.createEvent(this, "symbol", 7);
     this.streamIsActive = index.createEvent(this, "streamIsActive", 7);
+    this.canRecognize = index.createEvent(this, "canRecognize", 7);
     this.frame = index.createEvent(this, "frame", 7);
     this.devices = [];
     this.stream = null;
@@ -1904,6 +1905,15 @@ const TwintagOCRScanner = class {
     this.cropY = 1;
     this.zoom = 0;
   }
+  async ocrHandler() {
+    const { text, frame } = await this.readBarcodeFromCanvas();
+    this.symbol.emit({
+      text,
+      format: 'OCR',
+    });
+    this.frame.emit(frame);
+    this.stopStream();
+  }
   async connectedCallback() {
     this.worker = await src.createWorker('eng');
   }
@@ -1921,24 +1931,22 @@ const TwintagOCRScanner = class {
     this.drawInCanvas();
     const frame = this.canvas.toDataURL('image/png');
     const { data: { text } } = await this.worker.recognize(frame);
-    this.symbol.emit({
+    return {
       text,
-      format: 'OCR',
-    });
-    this.frame.emit(frame);
-    this.stopStream();
+      frame,
+    };
   }
   drawInCanvas() {
     const stage = Math.min(this.video.videoWidth, this.video.videoHeight);
-    const xLength = stage * this.cropX;
-    const yLength = stage * this.cropY;
+    const width = stage * this.cropX;
+    const height = stage * this.cropY;
     const center = {
       x: this.video.videoWidth / 2,
       y: this.video.videoHeight / 2,
     };
-    const sx = center.x - xLength / 2;
-    const sy = center.y - yLength / 2;
-    this.context.drawImage(this.video, sx, sy, xLength, yLength, 0, 0, stage, stage);
+    const sx = center.x - width / 2;
+    const sy = center.y - height / 2;
+    this.context.drawImage(this.video, sx, sy, width, height, 0, 0, width, height);
   }
   async updateStream(constraints) {
     if (this.stream) {
@@ -2045,9 +2053,11 @@ const TwintagOCRScanner = class {
       onComplete: () => {
         this.streamIsActive.emit(true);
         const stage = Math.min(this.video.videoWidth, this.video.videoHeight);
-        this.canvas.width = stage;
-        this.canvas.height = stage;
-        this.readBarcodeFromCanvas();
+        const width = stage * this.cropX;
+        const height = stage * this.cropY;
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.canRecognize.emit(true);
       }
     });
   }
@@ -2063,6 +2073,7 @@ const TwintagOCRScanner = class {
         this.video.srcObject = null;
         this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
         await this.worker.terminate();
+        this.canRecognize.emit(false);
       },
     });
   }
@@ -2073,6 +2084,6 @@ const TwintagOCRScanner = class {
     return (index.h(index.Host, null, index.h("div", { class: "video-container", ref: (el) => (this.videoContainer = el) }, index.h("div", { class: "video-corners" }), index.h("video", { crossOrigin: "Anonymous", autoplay: true, playsinline: true, ref: (el) => (this.video = el) }))));
   }
 };
-TwintagOCRScanner.style = twintagScannerCss;
+TwintagOcrScanner.style = twintagScannerCss;
 
-exports.twintag_ocr_scanner = TwintagOCRScanner;
+exports.twintag_ocr_scanner = TwintagOcrScanner;

package/dist/cjs/twintag-offline-support.cjs.entry.js

@@ -206,7 +206,7 @@ class IndexedDbService {
 /**
  * The SDK version.
  */
-const VERSION = '0.2.279-fix-ocr-scanner-update-6ec656becd9d1b5b7652da56c9cf57d84db8e05f';
+const VERSION = '0.2.279-fix-ocr-scanner-update-ce883df10b1d4b81e7cf691ed723691d6f7bc81c';
 
 class TwintagErrorValue {
 }

package/dist/collection/components/twintag-scanner/twintag-ocr-scanner.js

@@ -1,7 +1,7 @@
 import { h, Host, } from '@stencil/core';
 import gsap from 'gsap';
 import { createWorker } from 'tesseract.js';
-export class TwintagOCRScanner {
+export class TwintagOcrScanner {
   constructor() {
     this.devices = [];
     this.stream = null;
@@ -9,6 +9,15 @@ export class TwintagOCRScanner {
     this.cropY = 1;
     this.zoom = 0;
   }
+  async ocrHandler() {
+    const { text, frame } = await this.readBarcodeFromCanvas();
+    this.symbol.emit({
+      text,
+      format: 'OCR',
+    });
+    this.frame.emit(frame);
+    this.stopStream();
+  }
   async connectedCallback() {
     this.worker = await createWorker('eng');
   }
@@ -26,24 +35,22 @@ export class TwintagOCRScanner {
     this.drawInCanvas();
     const frame = this.canvas.toDataURL('image/png');
     const { data: { text } } = await this.worker.recognize(frame);
-    this.symbol.emit({
+    return {
       text,
-      format: 'OCR',
-    });
-    this.frame.emit(frame);
-    this.stopStream();
+      frame,
+    };
   }
   drawInCanvas() {
     const stage = Math.min(this.video.videoWidth, this.video.videoHeight);
-    const xLength = stage * this.cropX;
-    const yLength = stage * this.cropY;
+    const width = stage * this.cropX;
+    const height = stage * this.cropY;
     const center = {
       x: this.video.videoWidth / 2,
       y: this.video.videoHeight / 2,
     };
-    const sx = center.x - xLength / 2;
-    const sy = center.y - yLength / 2;
-    this.context.drawImage(this.video, sx, sy, xLength, yLength, 0, 0, stage, stage);
+    const sx = center.x - width / 2;
+    const sy = center.y - height / 2;
+    this.context.drawImage(this.video, sx, sy, width, height, 0, 0, width, height);
   }
   async updateStream(constraints) {
     if (this.stream) {
@@ -150,9 +157,11 @@ export class TwintagOCRScanner {
       onComplete: () => {
         this.streamIsActive.emit(true);
         const stage = Math.min(this.video.videoWidth, this.video.videoHeight);
-        this.canvas.width = stage;
-        this.canvas.height = stage;
-        this.readBarcodeFromCanvas();
+        const width = stage * this.cropX;
+        const height = stage * this.cropY;
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.canRecognize.emit(true);
       }
     });
   }
@@ -168,6 +177,7 @@ export class TwintagOCRScanner {
         this.video.srcObject = null;
         this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
         await this.worker.terminate();
+        this.canRecognize.emit(false);
       },
     });
   }
@@ -303,6 +313,21 @@ export class TwintagOCRScanner {
           "resolved": "boolean",
           "references": {}
         }
+      }, {
+        "method": "canRecognize",
+        "name": "canRecognize",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
       }, {
         "method": "frame",
         "name": "frame",
@@ -320,4 +345,13 @@ export class TwintagOCRScanner {
         }
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "recognize",
+        "method": "ocrHandler",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/version.js

@@ -2,4 +2,4 @@
 /**
  * The library version.
  */
-export const VERSION = '0.2.279-fix-ocr-scanner-update-6ec656becd9d1b5b7652da56c9cf57d84db8e05f';
+export const VERSION = '0.2.279-fix-ocr-scanner-update-ce883df10b1d4b81e7cf691ed723691d6f7bc81c';

package/dist/components/index.d.ts

@@ -2,7 +2,7 @@
 export { TwintagAuthCallback as TwintagAuthCallback } from '../types/components/twintag-auth-callback/twintag-auth-callback';
 export { TwintagAuthLogout as TwintagAuthLogout } from '../types/components/twintag-auth-logout/twintag-auth-logout';
 export { TwintagMedia as TwintagMedia } from '../types/components/twintag-media/twintag-media';
-export { TwintagOCRScanner as TwintagOcrScanner } from '../types/components/twintag-scanner/twintag-ocr-scanner';
+export { TwintagOcrScanner as TwintagOcrScanner } from '../types/components/twintag-scanner/twintag-ocr-scanner';
 export { TwintagOfflineActions as TwintagOfflineActions } from '../types/components/twintag-offline-support/twintag-offline-actions/twintag-offline-actions';
 export { TwintagOfflineState as TwintagOfflineState } from '../types/components/twintag-offline-support/twintag-connection-state/twintag-offline-state';
 export { TwintagOfflineSupport as TwintagOfflineSupport } from '../types/components/twintag-offline-support/twintag-offline-support';

package/dist/components/twintag-ocr-scanner.js

@@ -1888,13 +1888,14 @@ var src = {
 
 const twintagScannerCss = ":host{--twintag-scanner-bg-select-cameras:white;--twintag-scanner-text-select-cameras:black;--twintag-scanner-radius-select-cameras:6px 0 0 0;--twintag-scanner-min-height:min-content;--twintag-scanner-corners-color:white;--twintag-scanner-corners-width:4px;--twintag-scanner-corners-length:36px;--twintag-scanner-corners-offset:24px;display:grid;place-items:center;position:relative;width:100%}:host .icon-container{display:grid;place-items:center;position:absolute;inset:0;z-index:-2222}:host .icon-container .check-icon{opacity:0;z-index:2222}:host .video-container{--crop:0;--crop-x:var(--crop);--crop-y:var(--crop);display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;opacity:0;overflow:hidden;z-index:1}:host .video-container::after{content:\"\";position:absolute;width:100%;height:100%;opacity:inherit;background:rgba(0, 0, 0, 0.5);-webkit-clip-path:polygon(0% 0%, 0% 100%, calc(var(--crop-x) * 1%) 100%, calc(var(--crop-x) * 1%) calc(var(--crop-y) * 1%), calc(calc(100 - var(--crop-x)) * 1%) calc(var(--crop-y) * 1%), calc(calc(100 - var(--crop-x)) * 1%) calc(calc(100 - var(--crop-y)) * 1%), calc(var(--crop-x) * 1%) calc(calc(100 - var(--crop-y)) * 1%), calc(var(--crop-x) * 1%) 100%, 100% 100%, 100% 0%);clip-path:polygon(0% 0%, 0% 100%, calc(var(--crop-x) * 1%) 100%, calc(var(--crop-x) * 1%) calc(var(--crop-y) * 1%), calc(calc(100 - var(--crop-x)) * 1%) calc(var(--crop-y) * 1%), calc(calc(100 - var(--crop-x)) * 1%) calc(calc(100 - var(--crop-y)) * 1%), calc(var(--crop-x) * 1%) calc(calc(100 - var(--crop-y)) * 1%), calc(var(--crop-x) * 1%) 100%, 100% 100%, 100% 0%)}:host .video-container:before{display:block;content:\"\";width:100%;padding-top:100%}:host .video-container .video-corners{position:absolute;width:calc((1 - var(--crop-x) / 50) * 100% + var(--twintag-scanner-corners-offset));height:calc((1 - var(--crop-y) / 50) * 100% + var(--twintag-scanner-corners-offset));opacity:inherit;background:linear-gradient(to right, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 0 0, linear-gradient(to right, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 0 100%, linear-gradient(to left, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 100% 0, linear-gradient(to left, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 100% 100%, linear-gradient(to bottom, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 0 0, linear-gradient(to bottom, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 100% 0, linear-gradient(to top, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 0 100%, linear-gradient(to top, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 100% 100%;background-size:var(--twintag-scanner-corners-length) var(--twintag-scanner-corners-length);background-repeat:no-repeat;z-index:2222}:host .video-container video{position:absolute;width:100% !important;object-fit:cover;object-position:center;aspect-ratio:1/1 !important;min-height:var(--twintag-scanner-min-height)}";
 
-const TwintagOCRScanner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
+const TwintagOcrScanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
     this.symbol = createEvent(this, "symbol", 7);
     this.streamIsActive = createEvent(this, "streamIsActive", 7);
+    this.canRecognize = createEvent(this, "canRecognize", 7);
     this.frame = createEvent(this, "frame", 7);
     this.devices = [];
     this.stream = null;
@@ -1902,6 +1903,15 @@ const TwintagOCRScanner = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.cropY = 1;
     this.zoom = 0;
   }
+  async ocrHandler() {
+    const { text, frame } = await this.readBarcodeFromCanvas();
+    this.symbol.emit({
+      text,
+      format: 'OCR',
+    });
+    this.frame.emit(frame);
+    this.stopStream();
+  }
   async connectedCallback() {
     this.worker = await src.createWorker('eng');
   }
@@ -1919,24 +1929,22 @@ const TwintagOCRScanner = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.drawInCanvas();
     const frame = this.canvas.toDataURL('image/png');
     const { data: { text } } = await this.worker.recognize(frame);
-    this.symbol.emit({
+    return {
       text,
-      format: 'OCR',
-    });
-    this.frame.emit(frame);
-    this.stopStream();
+      frame,
+    };
   }
   drawInCanvas() {
     const stage = Math.min(this.video.videoWidth, this.video.videoHeight);
-    const xLength = stage * this.cropX;
-    const yLength = stage * this.cropY;
+    const width = stage * this.cropX;
+    const height = stage * this.cropY;
     const center = {
       x: this.video.videoWidth / 2,
       y: this.video.videoHeight / 2,
     };
-    const sx = center.x - xLength / 2;
-    const sy = center.y - yLength / 2;
-    this.context.drawImage(this.video, sx, sy, xLength, yLength, 0, 0, stage, stage);
+    const sx = center.x - width / 2;
+    const sy = center.y - height / 2;
+    this.context.drawImage(this.video, sx, sy, width, height, 0, 0, width, height);
   }
   async updateStream(constraints) {
     if (this.stream) {
@@ -2043,9 +2051,11 @@ const TwintagOCRScanner = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       onComplete: () => {
         this.streamIsActive.emit(true);
         const stage = Math.min(this.video.videoWidth, this.video.videoHeight);
-        this.canvas.width = stage;
-        this.canvas.height = stage;
-        this.readBarcodeFromCanvas();
+        const width = stage * this.cropX;
+        const height = stage * this.cropY;
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.canRecognize.emit(true);
       }
     });
   }
@@ -2061,6 +2071,7 @@ const TwintagOCRScanner = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
         this.video.srcObject = null;
         this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
         await this.worker.terminate();
+        this.canRecognize.emit(false);
       },
     });
   }
@@ -2077,7 +2088,7 @@ const TwintagOCRScanner = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "cropY": [2, "crop-y"],
     "zoom": [514],
     "devices": [32]
-  }]);
+  }, [[2, "recognize", "ocrHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
@@ -2086,13 +2097,13 @@ function defineCustomElement$1() {
   components.forEach(tagName => { switch (tagName) {
     case "twintag-ocr-scanner":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, TwintagOCRScanner);
+        customElements.define(tagName, TwintagOcrScanner$1);
       }
       break;
   } });
 }
 
-const TwintagOcrScanner = TwintagOCRScanner;
+const TwintagOcrScanner = TwintagOcrScanner$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { TwintagOcrScanner, defineCustomElement };

package/dist/components/twintag-offline-support.js

@@ -223,7 +223,7 @@ class IndexedDbService {
 /**
  * The SDK version.
  */
-const VERSION = '0.2.279-fix-ocr-scanner-update-6ec656becd9d1b5b7652da56c9cf57d84db8e05f';
+const VERSION = '0.2.279-fix-ocr-scanner-update-ce883df10b1d4b81e7cf691ed723691d6f7bc81c';
 
 class TwintagErrorValue {
 }

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["twintag-preview",[[1,"twintag-preview",{"item":[1],"initial":[16],"smoothExtinction":[2,"smooth-extinction"],"extension":[1],"showButtons":[4,"show-buttons"],"previewableItem":[32],"type":[32]}]]],["twintag-auth-callback",[[1,"twintag-auth-callback"]]],["twintag-auth-logout",[[1,"twintag-auth-logout"]]],["twintag-media",[[1,"twintag-media",{"first":[1],"middle":[1],"last":[1]}]]],["twintag-ocr-scanner",[[1,"twintag-ocr-scanner",{"stream":[1040],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"zoom":[514],"devices":[32]}]]],["twintag-offline-actions",[[1,"twintag-offline-actions",{"enableSingleRetry":[4,"enable-single-retry"],"header":[1],"showTimestamp":[4,"show-timestamp"],"showDescription":[4,"show-description"],"closeText":[1,"close-text"],"retryText":[1,"retry-text"],"noPendingActionsText":[1,"no-pending-actions-text"],"pendingOfflineRequests":[32],"processing":[32]},[[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-state",[[1,"twintag-offline-state",{"onlineState":[32],"pendingRequests":[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-support",[[1,"twintag-offline-support",{"autoSync":[4,"auto-sync"],"forceOffline":[4,"force-offline"],"config":[16]}]]],["twintag-qr-scanner",[[1,"twintag-qr-scanner",{"stream":[1040],"mode":[1],"format":[1],"crop":[2],"zoom":[514],"devices":[32]}]]],["twintag-share",[[1,"twintag-share",{"url":[1],"modalTitle":[1,"modal-title"],"modalSubtitle":[1,"modal-subtitle"],"closeBtn":[1,"close-btn"],"copyClipboardBtn":[1,"copy-clipboard-btn"],"open":[1540]},[[0,"keydown","handleKeyDown"]]]]],["twintag-spinner",[[1,"twintag-spinner",{"color":[513],"duration":[2],"name":[1]}]]],["twintag-pdf-viewer",[[0,"twintag-pdf-viewer",{"src":[1],"fileName":[1,"file-name"],"file":[32],"fileURL":[32]}]]]], options);
+  return bootstrapLazy([["twintag-preview",[[1,"twintag-preview",{"item":[1],"initial":[16],"smoothExtinction":[2,"smooth-extinction"],"extension":[1],"showButtons":[4,"show-buttons"],"previewableItem":[32],"type":[32]}]]],["twintag-auth-callback",[[1,"twintag-auth-callback"]]],["twintag-auth-logout",[[1,"twintag-auth-logout"]]],["twintag-media",[[1,"twintag-media",{"first":[1],"middle":[1],"last":[1]}]]],["twintag-ocr-scanner",[[1,"twintag-ocr-scanner",{"stream":[1040],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"zoom":[514],"devices":[32]},[[2,"recognize","ocrHandler"]]]]],["twintag-offline-actions",[[1,"twintag-offline-actions",{"enableSingleRetry":[4,"enable-single-retry"],"header":[1],"showTimestamp":[4,"show-timestamp"],"showDescription":[4,"show-description"],"closeText":[1,"close-text"],"retryText":[1,"retry-text"],"noPendingActionsText":[1,"no-pending-actions-text"],"pendingOfflineRequests":[32],"processing":[32]},[[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-state",[[1,"twintag-offline-state",{"onlineState":[32],"pendingRequests":[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-support",[[1,"twintag-offline-support",{"autoSync":[4,"auto-sync"],"forceOffline":[4,"force-offline"],"config":[16]}]]],["twintag-qr-scanner",[[1,"twintag-qr-scanner",{"stream":[1040],"mode":[1],"format":[1],"crop":[2],"zoom":[514],"devices":[32]}]]],["twintag-share",[[1,"twintag-share",{"url":[1],"modalTitle":[1,"modal-title"],"modalSubtitle":[1,"modal-subtitle"],"closeBtn":[1,"close-btn"],"copyClipboardBtn":[1,"copy-clipboard-btn"],"open":[1540]},[[0,"keydown","handleKeyDown"]]]]],["twintag-spinner",[[1,"twintag-spinner",{"color":[513],"duration":[2],"name":[1]}]]],["twintag-pdf-viewer",[[0,"twintag-pdf-viewer",{"src":[1],"fileName":[1,"file-name"],"file":[32],"fileURL":[32]}]]]], options);
   });
 };
 

package/dist/esm/stencil-web-components.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["twintag-preview",[[1,"twintag-preview",{"item":[1],"initial":[16],"smoothExtinction":[2,"smooth-extinction"],"extension":[1],"showButtons":[4,"show-buttons"],"previewableItem":[32],"type":[32]}]]],["twintag-auth-callback",[[1,"twintag-auth-callback"]]],["twintag-auth-logout",[[1,"twintag-auth-logout"]]],["twintag-media",[[1,"twintag-media",{"first":[1],"middle":[1],"last":[1]}]]],["twintag-ocr-scanner",[[1,"twintag-ocr-scanner",{"stream":[1040],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"zoom":[514],"devices":[32]}]]],["twintag-offline-actions",[[1,"twintag-offline-actions",{"enableSingleRetry":[4,"enable-single-retry"],"header":[1],"showTimestamp":[4,"show-timestamp"],"showDescription":[4,"show-description"],"closeText":[1,"close-text"],"retryText":[1,"retry-text"],"noPendingActionsText":[1,"no-pending-actions-text"],"pendingOfflineRequests":[32],"processing":[32]},[[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-state",[[1,"twintag-offline-state",{"onlineState":[32],"pendingRequests":[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-support",[[1,"twintag-offline-support",{"autoSync":[4,"auto-sync"],"forceOffline":[4,"force-offline"],"config":[16]}]]],["twintag-qr-scanner",[[1,"twintag-qr-scanner",{"stream":[1040],"mode":[1],"format":[1],"crop":[2],"zoom":[514],"devices":[32]}]]],["twintag-share",[[1,"twintag-share",{"url":[1],"modalTitle":[1,"modal-title"],"modalSubtitle":[1,"modal-subtitle"],"closeBtn":[1,"close-btn"],"copyClipboardBtn":[1,"copy-clipboard-btn"],"open":[1540]},[[0,"keydown","handleKeyDown"]]]]],["twintag-spinner",[[1,"twintag-spinner",{"color":[513],"duration":[2],"name":[1]}]]],["twintag-pdf-viewer",[[0,"twintag-pdf-viewer",{"src":[1],"fileName":[1,"file-name"],"file":[32],"fileURL":[32]}]]]], options);
+  return bootstrapLazy([["twintag-preview",[[1,"twintag-preview",{"item":[1],"initial":[16],"smoothExtinction":[2,"smooth-extinction"],"extension":[1],"showButtons":[4,"show-buttons"],"previewableItem":[32],"type":[32]}]]],["twintag-auth-callback",[[1,"twintag-auth-callback"]]],["twintag-auth-logout",[[1,"twintag-auth-logout"]]],["twintag-media",[[1,"twintag-media",{"first":[1],"middle":[1],"last":[1]}]]],["twintag-ocr-scanner",[[1,"twintag-ocr-scanner",{"stream":[1040],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"zoom":[514],"devices":[32]},[[2,"recognize","ocrHandler"]]]]],["twintag-offline-actions",[[1,"twintag-offline-actions",{"enableSingleRetry":[4,"enable-single-retry"],"header":[1],"showTimestamp":[4,"show-timestamp"],"showDescription":[4,"show-description"],"closeText":[1,"close-text"],"retryText":[1,"retry-text"],"noPendingActionsText":[1,"no-pending-actions-text"],"pendingOfflineRequests":[32],"processing":[32]},[[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-state",[[1,"twintag-offline-state",{"onlineState":[32],"pendingRequests":[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["twintag-offline-support",[[1,"twintag-offline-support",{"autoSync":[4,"auto-sync"],"forceOffline":[4,"force-offline"],"config":[16]}]]],["twintag-qr-scanner",[[1,"twintag-qr-scanner",{"stream":[1040],"mode":[1],"format":[1],"crop":[2],"zoom":[514],"devices":[32]}]]],["twintag-share",[[1,"twintag-share",{"url":[1],"modalTitle":[1,"modal-title"],"modalSubtitle":[1,"modal-subtitle"],"closeBtn":[1,"close-btn"],"copyClipboardBtn":[1,"copy-clipboard-btn"],"open":[1540]},[[0,"keydown","handleKeyDown"]]]]],["twintag-spinner",[[1,"twintag-spinner",{"color":[513],"duration":[2],"name":[1]}]]],["twintag-pdf-viewer",[[0,"twintag-pdf-viewer",{"src":[1],"fileName":[1,"file-name"],"file":[32],"fileURL":[32]}]]]], options);
 });

package/dist/esm/twintag-ocr-scanner.entry.js

@@ -1888,11 +1888,12 @@ var src = {
 
 const twintagScannerCss = ":host{--twintag-scanner-bg-select-cameras:white;--twintag-scanner-text-select-cameras:black;--twintag-scanner-radius-select-cameras:6px 0 0 0;--twintag-scanner-min-height:min-content;--twintag-scanner-corners-color:white;--twintag-scanner-corners-width:4px;--twintag-scanner-corners-length:36px;--twintag-scanner-corners-offset:24px;display:grid;place-items:center;position:relative;width:100%}:host .icon-container{display:grid;place-items:center;position:absolute;inset:0;z-index:-2222}:host .icon-container .check-icon{opacity:0;z-index:2222}:host .video-container{--crop:0;--crop-x:var(--crop);--crop-y:var(--crop);display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;opacity:0;overflow:hidden;z-index:1}:host .video-container::after{content:\"\";position:absolute;width:100%;height:100%;opacity:inherit;background:rgba(0, 0, 0, 0.5);-webkit-clip-path:polygon(0% 0%, 0% 100%, calc(var(--crop-x) * 1%) 100%, calc(var(--crop-x) * 1%) calc(var(--crop-y) * 1%), calc(calc(100 - var(--crop-x)) * 1%) calc(var(--crop-y) * 1%), calc(calc(100 - var(--crop-x)) * 1%) calc(calc(100 - var(--crop-y)) * 1%), calc(var(--crop-x) * 1%) calc(calc(100 - var(--crop-y)) * 1%), calc(var(--crop-x) * 1%) 100%, 100% 100%, 100% 0%);clip-path:polygon(0% 0%, 0% 100%, calc(var(--crop-x) * 1%) 100%, calc(var(--crop-x) * 1%) calc(var(--crop-y) * 1%), calc(calc(100 - var(--crop-x)) * 1%) calc(var(--crop-y) * 1%), calc(calc(100 - var(--crop-x)) * 1%) calc(calc(100 - var(--crop-y)) * 1%), calc(var(--crop-x) * 1%) calc(calc(100 - var(--crop-y)) * 1%), calc(var(--crop-x) * 1%) 100%, 100% 100%, 100% 0%)}:host .video-container:before{display:block;content:\"\";width:100%;padding-top:100%}:host .video-container .video-corners{position:absolute;width:calc((1 - var(--crop-x) / 50) * 100% + var(--twintag-scanner-corners-offset));height:calc((1 - var(--crop-y) / 50) * 100% + var(--twintag-scanner-corners-offset));opacity:inherit;background:linear-gradient(to right, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 0 0, linear-gradient(to right, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 0 100%, linear-gradient(to left, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 100% 0, linear-gradient(to left, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 100% 100%, linear-gradient(to bottom, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 0 0, linear-gradient(to bottom, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 100% 0, linear-gradient(to top, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 0 100%, linear-gradient(to top, var(--twintag-scanner-corners-color) var(--twintag-scanner-corners-width), transparent var(--twintag-scanner-corners-width)) 100% 100%;background-size:var(--twintag-scanner-corners-length) var(--twintag-scanner-corners-length);background-repeat:no-repeat;z-index:2222}:host .video-container video{position:absolute;width:100% !important;object-fit:cover;object-position:center;aspect-ratio:1/1 !important;min-height:var(--twintag-scanner-min-height)}";
 
-const TwintagOCRScanner = class {
+const TwintagOcrScanner = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.symbol = createEvent(this, "symbol", 7);
     this.streamIsActive = createEvent(this, "streamIsActive", 7);
+    this.canRecognize = createEvent(this, "canRecognize", 7);
     this.frame = createEvent(this, "frame", 7);
     this.devices = [];
     this.stream = null;
@@ -1900,6 +1901,15 @@ const TwintagOCRScanner = class {
     this.cropY = 1;
     this.zoom = 0;
   }
+  async ocrHandler() {
+    const { text, frame } = await this.readBarcodeFromCanvas();
+    this.symbol.emit({
+      text,
+      format: 'OCR',
+    });
+    this.frame.emit(frame);
+    this.stopStream();
+  }
   async connectedCallback() {
     this.worker = await src.createWorker('eng');
   }
@@ -1917,24 +1927,22 @@ const TwintagOCRScanner = class {
     this.drawInCanvas();
     const frame = this.canvas.toDataURL('image/png');
     const { data: { text } } = await this.worker.recognize(frame);
-    this.symbol.emit({
+    return {
       text,
-      format: 'OCR',
-    });
-    this.frame.emit(frame);
-    this.stopStream();
+      frame,
+    };
   }
   drawInCanvas() {
     const stage = Math.min(this.video.videoWidth, this.video.videoHeight);
-    const xLength = stage * this.cropX;
-    const yLength = stage * this.cropY;
+    const width = stage * this.cropX;
+    const height = stage * this.cropY;
     const center = {
       x: this.video.videoWidth / 2,
       y: this.video.videoHeight / 2,
     };
-    const sx = center.x - xLength / 2;
-    const sy = center.y - yLength / 2;
-    this.context.drawImage(this.video, sx, sy, xLength, yLength, 0, 0, stage, stage);
+    const sx = center.x - width / 2;
+    const sy = center.y - height / 2;
+    this.context.drawImage(this.video, sx, sy, width, height, 0, 0, width, height);
   }
   async updateStream(constraints) {
     if (this.stream) {
@@ -2041,9 +2049,11 @@ const TwintagOCRScanner = class {
       onComplete: () => {
         this.streamIsActive.emit(true);
         const stage = Math.min(this.video.videoWidth, this.video.videoHeight);
-        this.canvas.width = stage;
-        this.canvas.height = stage;
-        this.readBarcodeFromCanvas();
+        const width = stage * this.cropX;
+        const height = stage * this.cropY;
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.canRecognize.emit(true);
       }
     });
   }
@@ -2059,6 +2069,7 @@ const TwintagOCRScanner = class {
         this.video.srcObject = null;
         this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
         await this.worker.terminate();
+        this.canRecognize.emit(false);
       },
     });
   }
@@ -2069,6 +2080,6 @@ const TwintagOCRScanner = class {
     return (h(Host, null, h("div", { class: "video-container", ref: (el) => (this.videoContainer = el) }, h("div", { class: "video-corners" }), h("video", { crossOrigin: "Anonymous", autoplay: true, playsinline: true, ref: (el) => (this.video = el) }))));
   }
 };
-TwintagOCRScanner.style = twintagScannerCss;
+TwintagOcrScanner.style = twintagScannerCss;
 
-export { TwintagOCRScanner as twintag_ocr_scanner };
+export { TwintagOcrScanner as twintag_ocr_scanner };

package/dist/esm/twintag-offline-support.entry.js

@@ -202,7 +202,7 @@ class IndexedDbService {
 /**
  * The SDK version.
  */
-const VERSION = '0.2.279-fix-ocr-scanner-update-6ec656becd9d1b5b7652da56c9cf57d84db8e05f';
+const VERSION = '0.2.279-fix-ocr-scanner-update-ce883df10b1d4b81e7cf691ed723691d6f7bc81c';
 
 class TwintagErrorValue {
 }