@twintag/twintag-core 0.2.284-fix-stream-visibility-9ac029dedd8eb46b8c97b6a6b8dfdb114e5e5de8 → 0.2.284-fix-scanner-stream-visibility-fa1b63f803fa98c0ac1314c5943dd3461e208cfb

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],"mode":[1],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"devices":[32]},[[0,"updateZoom","updateZoom"],[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":[514],"devices":[32],"decoderIsBusy":[32]},[[1,"updateZoom","updateZoom"]]]]],["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],"mode":[1],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"devices":[32]},[[0,"updateZoom","updateZoom"],[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":[514]},[[1,"updateZoom","updateZoom"]]]]],["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],"mode":[1],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"devices":[32]},[[0,"updateZoom","updateZoom"],[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":[514],"devices":[32],"decoderIsBusy":[32]},[[1,"updateZoom","updateZoom"]]]]],["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],"mode":[1],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"devices":[32]},[[0,"updateZoom","updateZoom"],[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":[514]},[[1,"updateZoom","updateZoom"]]]]],["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-qr-scanner.cjs.entry.js

@@ -19,11 +19,11 @@ const TwintagQRScanner = class {
     this.symbol = index.createEvent(this, "symbol", 7);
     this.streamIsActive = index.createEvent(this, "streamIsActive", 7);
     this.frame = index.createEvent(this, "frame", 7);
+    this.stage = 0;
     this.stageScale = 1;
-    this.eventsController = new AbortController();
     this.videoIsPlaying = false;
-    this.devices = [];
     this.decoderIsBusy = false;
+    this.eventsController = new AbortController();
     this.stream = null;
     this.mode = 'single';
     this.format = 'QRCode';
@@ -56,7 +56,6 @@ const TwintagQRScanner = class {
     if (event.code === 'ready') {
       this.decoderIsBusy = false;
       this.symbol.emit(event.result);
-      this.frame.emit(this.canvas.toDataURL('image/png', 0.7));
       if (this.mode === 'single') {
         this.eventsController.abort();
         this.stopStream();
@@ -109,32 +108,35 @@ const TwintagQRScanner = class {
     }
   }
   readBarcodeFromCanvas() {
+    this.reqAnimFrame = requestAnimationFrame(this.readBarcodeFromCanvas.bind(this));
+    if (!this.stage)
+      return;
     this.drawInCanvas();
-    const imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
+    const imageData = this.context.getImageData(0, 0, this.stage, this.stage);
     const sourceBuffer = imageData.data;
     if (!this.decoderIsBusy) {
       worker.postMessage({
         type: 'read',
         format: this.format,
         details: {
-          width: this.canvas.width,
-          height: this.canvas.height,
+          width: this.stage,
+          height: this.stage,
           sourceBuffer: sourceBuffer,
         },
       });
+      this.frame.emit(this.canvas.toDataURL('image/png', 0.7));
     }
-    requestAnimationFrame(this.readBarcodeFromCanvas.bind(this));
   }
   drawInCanvas() {
-    const stage = Math.min(this.video.videoWidth, this.video.videoHeight);
-    const squareLength = stage * this.crop;
+    const videoStage = Math.min(this.video.videoWidth, this.video.videoHeight);
+    const squareLength = videoStage * this.crop;
     const center = {
       x: this.video.videoWidth / 2,
       y: this.video.videoHeight / 2,
     };
     const sx = center.x - squareLength / 2;
     const sy = center.y - squareLength / 2;
-    this.context.drawImage(this.video, sx, sy, squareLength, squareLength, 0, 0, stage * this.stageScale, stage * this.stageScale);
+    this.context.drawImage(this.video, sx, sy, squareLength, squareLength, 0, 0, videoStage * this.stageScale, videoStage * this.stageScale);
   }
   async updateStream(constraints) {
     if (this.stream) {
@@ -181,20 +183,20 @@ const TwintagQRScanner = class {
     };
     try {
       await this.updateStream(constraints);
-      const devices = await navigator.mediaDevices.enumerateDevices();
-      this.devices = devices.filter((device) => device.kind.toLowerCase() === 'videoinput' &&
+      const raw_devices = await navigator.mediaDevices.enumerateDevices();
+      const devices = raw_devices.filter((device) => device.kind.toLowerCase() === 'videoinput' &&
         device.label.toLowerCase().includes('back'));
-      if (this.devices.length === 0) {
+      if (devices.length === 0) {
         return;
       }
-      if (this.devices.length === 1) {
+      if (devices.length === 1) {
         constraints.video.deviceId = {
-          exact: this.devices[0].deviceId,
+          exact: devices[0].deviceId,
         };
         await this.updateStream(constraints);
       }
-      let backCameraIndex = this.devices.length - 1;
-      const cameraResolutions = this.devices.map((camera) => {
+      let backCameraIndex = devices.length - 1;
+      const cameraResolutions = devices.map((camera) => {
         const match = camera.label.match(/\b([0-9]+)MP?\b/i);
         if (match != null) {
           return parseInt(match[1], 10);
@@ -205,7 +207,7 @@ const TwintagQRScanner = class {
         backCameraIndex = cameraResolutions.lastIndexOf(Math.max(...cameraResolutions));
       }
       // back camera with the highest resolution
-      const backCamera = this.devices[backCameraIndex];
+      const backCamera = devices[backCameraIndex];
       if (backCamera) {
         constraints.video.deviceId = {
           exact: backCamera.deviceId,
@@ -250,11 +252,11 @@ const TwintagQRScanner = class {
           const currentStage = Math.min(this.video.videoWidth, this.video.videoHeight);
           const maxStageValue = 400;
           this.stageScale = Math.min(currentStage, maxStageValue) / currentStage;
-          const stage = currentStage * this.stageScale;
-          this.canvas.width = stage;
-          this.canvas.height = stage;
-          this.context.canvas.width = stage;
-          this.context.canvas.height = stage;
+          this.stage = currentStage * this.stageScale;
+          this.canvas.width = this.stage;
+          this.canvas.height = this.stage;
+          this.context.canvas.width = this.stage;
+          this.context.canvas.height = this.stage;
           this.readBarcodeFromCanvas();
         },
       });
@@ -262,10 +264,11 @@ const TwintagQRScanner = class {
   }
   stopStream() {
     this.streamIsActive.emit(false);
+    this.video.srcObject = null;
     this.stream.getTracks().forEach((track) => {
       track.stop();
     });
-    this.video.srcObject = null;
+    cancelAnimationFrame(this.reqAnimFrame);
     this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
     index$1.gsapWithCSS.to(this.videoContainerRef, {
       duration: 0.2,

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

@@ -3,11 +3,11 @@ import gsap from 'gsap';
 import { worker } from '../../scanner.worker?worker';
 export class TwintagQRScanner {
   constructor() {
+    this.stage = 0;
     this.stageScale = 1;
-    this.eventsController = new AbortController();
     this.videoIsPlaying = false;
-    this.devices = [];
     this.decoderIsBusy = false;
+    this.eventsController = new AbortController();
     this.stream = null;
     this.mode = 'single';
     this.format = 'QRCode';
@@ -40,7 +40,6 @@ export class TwintagQRScanner {
     if (event.code === 'ready') {
       this.decoderIsBusy = false;
       this.symbol.emit(event.result);
-      this.frame.emit(this.canvas.toDataURL('image/png', 0.7));
       if (this.mode === 'single') {
         this.eventsController.abort();
         this.stopStream();
@@ -93,32 +92,35 @@ export class TwintagQRScanner {
     }
   }
   readBarcodeFromCanvas() {
+    this.reqAnimFrame = requestAnimationFrame(this.readBarcodeFromCanvas.bind(this));
+    if (!this.stage)
+      return;
     this.drawInCanvas();
-    const imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
+    const imageData = this.context.getImageData(0, 0, this.stage, this.stage);
     const sourceBuffer = imageData.data;
     if (!this.decoderIsBusy) {
       worker.postMessage({
         type: 'read',
         format: this.format,
         details: {
-          width: this.canvas.width,
-          height: this.canvas.height,
+          width: this.stage,
+          height: this.stage,
           sourceBuffer: sourceBuffer,
         },
       });
+      this.frame.emit(this.canvas.toDataURL('image/png', 0.7));
     }
-    requestAnimationFrame(this.readBarcodeFromCanvas.bind(this));
   }
   drawInCanvas() {
-    const stage = Math.min(this.video.videoWidth, this.video.videoHeight);
-    const squareLength = stage * this.crop;
+    const videoStage = Math.min(this.video.videoWidth, this.video.videoHeight);
+    const squareLength = videoStage * this.crop;
     const center = {
       x: this.video.videoWidth / 2,
       y: this.video.videoHeight / 2,
     };
     const sx = center.x - squareLength / 2;
     const sy = center.y - squareLength / 2;
-    this.context.drawImage(this.video, sx, sy, squareLength, squareLength, 0, 0, stage * this.stageScale, stage * this.stageScale);
+    this.context.drawImage(this.video, sx, sy, squareLength, squareLength, 0, 0, videoStage * this.stageScale, videoStage * this.stageScale);
   }
   async updateStream(constraints) {
     if (this.stream) {
@@ -165,20 +167,20 @@ export class TwintagQRScanner {
     };
     try {
       await this.updateStream(constraints);
-      const devices = await navigator.mediaDevices.enumerateDevices();
-      this.devices = devices.filter((device) => device.kind.toLowerCase() === 'videoinput' &&
+      const raw_devices = await navigator.mediaDevices.enumerateDevices();
+      const devices = raw_devices.filter((device) => device.kind.toLowerCase() === 'videoinput' &&
         device.label.toLowerCase().includes('back'));
-      if (this.devices.length === 0) {
+      if (devices.length === 0) {
         return;
       }
-      if (this.devices.length === 1) {
+      if (devices.length === 1) {
         constraints.video.deviceId = {
-          exact: this.devices[0].deviceId,
+          exact: devices[0].deviceId,
         };
         await this.updateStream(constraints);
       }
-      let backCameraIndex = this.devices.length - 1;
-      const cameraResolutions = this.devices.map((camera) => {
+      let backCameraIndex = devices.length - 1;
+      const cameraResolutions = devices.map((camera) => {
         const match = camera.label.match(/\b([0-9]+)MP?\b/i);
         if (match != null) {
           return parseInt(match[1], 10);
@@ -189,7 +191,7 @@ export class TwintagQRScanner {
         backCameraIndex = cameraResolutions.lastIndexOf(Math.max(...cameraResolutions));
       }
       // back camera with the highest resolution
-      const backCamera = this.devices[backCameraIndex];
+      const backCamera = devices[backCameraIndex];
       if (backCamera) {
         constraints.video.deviceId = {
           exact: backCamera.deviceId,
@@ -234,11 +236,11 @@ export class TwintagQRScanner {
           const currentStage = Math.min(this.video.videoWidth, this.video.videoHeight);
           const maxStageValue = 400;
           this.stageScale = Math.min(currentStage, maxStageValue) / currentStage;
-          const stage = currentStage * this.stageScale;
-          this.canvas.width = stage;
-          this.canvas.height = stage;
-          this.context.canvas.width = stage;
-          this.context.canvas.height = stage;
+          this.stage = currentStage * this.stageScale;
+          this.canvas.width = this.stage;
+          this.canvas.height = this.stage;
+          this.context.canvas.width = this.stage;
+          this.context.canvas.height = this.stage;
           this.readBarcodeFromCanvas();
         },
       });
@@ -246,10 +248,11 @@ export class TwintagQRScanner {
   }
   stopStream() {
     this.streamIsActive.emit(false);
+    this.video.srcObject = null;
     this.stream.getTracks().forEach((track) => {
       track.stop();
     });
-    this.video.srcObject = null;
+    cancelAnimationFrame(this.reqAnimFrame);
     this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
     gsap.to(this.videoContainerRef, {
       duration: 0.2,
@@ -359,12 +362,6 @@ export class TwintagQRScanner {
       }
     };
   }
-  static get states() {
-    return {
-      "devices": {},
-      "decoderIsBusy": {}
-    };
-  }
   static get events() {
     return [{
         "method": "symbol",

package/dist/collection/version.js

@@ -2,4 +2,4 @@
 /**
  * The library version.
  */
-export const VERSION = '0.2.284-fix-stream-visibility-9ac029dedd8eb46b8c97b6a6b8dfdb114e5e5de8';
+export const VERSION = '0.2.284-fix-scanner-stream-visibility-fa1b63f803fa98c0ac1314c5943dd3461e208cfb';

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

@@ -17,11 +17,11 @@ const TwintagQRScanner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.symbol = createEvent(this, "symbol", 7);
     this.streamIsActive = createEvent(this, "streamIsActive", 7);
     this.frame = createEvent(this, "frame", 7);
+    this.stage = 0;
     this.stageScale = 1;
-    this.eventsController = new AbortController();
     this.videoIsPlaying = false;
-    this.devices = [];
     this.decoderIsBusy = false;
+    this.eventsController = new AbortController();
     this.stream = null;
     this.mode = 'single';
     this.format = 'QRCode';
@@ -54,7 +54,6 @@ const TwintagQRScanner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     if (event.code === 'ready') {
       this.decoderIsBusy = false;
       this.symbol.emit(event.result);
-      this.frame.emit(this.canvas.toDataURL('image/png', 0.7));
       if (this.mode === 'single') {
         this.eventsController.abort();
         this.stopStream();
@@ -107,32 +106,35 @@ const TwintagQRScanner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     }
   }
   readBarcodeFromCanvas() {
+    this.reqAnimFrame = requestAnimationFrame(this.readBarcodeFromCanvas.bind(this));
+    if (!this.stage)
+      return;
     this.drawInCanvas();
-    const imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
+    const imageData = this.context.getImageData(0, 0, this.stage, this.stage);
     const sourceBuffer = imageData.data;
     if (!this.decoderIsBusy) {
       worker.postMessage({
         type: 'read',
         format: this.format,
         details: {
-          width: this.canvas.width,
-          height: this.canvas.height,
+          width: this.stage,
+          height: this.stage,
           sourceBuffer: sourceBuffer,
         },
       });
+      this.frame.emit(this.canvas.toDataURL('image/png', 0.7));
     }
-    requestAnimationFrame(this.readBarcodeFromCanvas.bind(this));
   }
   drawInCanvas() {
-    const stage = Math.min(this.video.videoWidth, this.video.videoHeight);
-    const squareLength = stage * this.crop;
+    const videoStage = Math.min(this.video.videoWidth, this.video.videoHeight);
+    const squareLength = videoStage * this.crop;
     const center = {
       x: this.video.videoWidth / 2,
       y: this.video.videoHeight / 2,
     };
     const sx = center.x - squareLength / 2;
     const sy = center.y - squareLength / 2;
-    this.context.drawImage(this.video, sx, sy, squareLength, squareLength, 0, 0, stage * this.stageScale, stage * this.stageScale);
+    this.context.drawImage(this.video, sx, sy, squareLength, squareLength, 0, 0, videoStage * this.stageScale, videoStage * this.stageScale);
   }
   async updateStream(constraints) {
     if (this.stream) {
@@ -179,20 +181,20 @@ const TwintagQRScanner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     };
     try {
       await this.updateStream(constraints);
-      const devices = await navigator.mediaDevices.enumerateDevices();
-      this.devices = devices.filter((device) => device.kind.toLowerCase() === 'videoinput' &&
+      const raw_devices = await navigator.mediaDevices.enumerateDevices();
+      const devices = raw_devices.filter((device) => device.kind.toLowerCase() === 'videoinput' &&
         device.label.toLowerCase().includes('back'));
-      if (this.devices.length === 0) {
+      if (devices.length === 0) {
         return;
       }
-      if (this.devices.length === 1) {
+      if (devices.length === 1) {
         constraints.video.deviceId = {
-          exact: this.devices[0].deviceId,
+          exact: devices[0].deviceId,
         };
         await this.updateStream(constraints);
       }
-      let backCameraIndex = this.devices.length - 1;
-      const cameraResolutions = this.devices.map((camera) => {
+      let backCameraIndex = devices.length - 1;
+      const cameraResolutions = devices.map((camera) => {
         const match = camera.label.match(/\b([0-9]+)MP?\b/i);
         if (match != null) {
           return parseInt(match[1], 10);
@@ -203,7 +205,7 @@ const TwintagQRScanner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
         backCameraIndex = cameraResolutions.lastIndexOf(Math.max(...cameraResolutions));
       }
       // back camera with the highest resolution
-      const backCamera = this.devices[backCameraIndex];
+      const backCamera = devices[backCameraIndex];
       if (backCamera) {
         constraints.video.deviceId = {
           exact: backCamera.deviceId,
@@ -248,11 +250,11 @@ const TwintagQRScanner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
           const currentStage = Math.min(this.video.videoWidth, this.video.videoHeight);
           const maxStageValue = 400;
           this.stageScale = Math.min(currentStage, maxStageValue) / currentStage;
-          const stage = currentStage * this.stageScale;
-          this.canvas.width = stage;
-          this.canvas.height = stage;
-          this.context.canvas.width = stage;
-          this.context.canvas.height = stage;
+          this.stage = currentStage * this.stageScale;
+          this.canvas.width = this.stage;
+          this.canvas.height = this.stage;
+          this.context.canvas.width = this.stage;
+          this.context.canvas.height = this.stage;
           this.readBarcodeFromCanvas();
         },
       });
@@ -260,10 +262,11 @@ const TwintagQRScanner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   }
   stopStream() {
     this.streamIsActive.emit(false);
+    this.video.srcObject = null;
     this.stream.getTracks().forEach((track) => {
       track.stop();
     });
-    this.video.srcObject = null;
+    cancelAnimationFrame(this.reqAnimFrame);
     this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
     gsapWithCSS.to(this.videoContainerRef, {
       duration: 0.2,
@@ -283,9 +286,7 @@ const TwintagQRScanner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     "stream": [1040],
     "mode": [1],
     "format": [1],
-    "crop": [514],
-    "devices": [32],
-    "decoderIsBusy": [32]
+    "crop": [514]
   }, [[1, "updateZoom", "updateZoom"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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],"mode":[1],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"devices":[32]},[[0,"updateZoom","updateZoom"],[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":[514],"devices":[32],"decoderIsBusy":[32]},[[1,"updateZoom","updateZoom"]]]]],["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],"mode":[1],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"devices":[32]},[[0,"updateZoom","updateZoom"],[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":[514]},[[1,"updateZoom","updateZoom"]]]]],["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],"mode":[1],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"devices":[32]},[[0,"updateZoom","updateZoom"],[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":[514],"devices":[32],"decoderIsBusy":[32]},[[1,"updateZoom","updateZoom"]]]]],["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],"mode":[1],"cropX":[2,"crop-x"],"cropY":[2,"crop-y"],"devices":[32]},[[0,"updateZoom","updateZoom"],[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":[514]},[[1,"updateZoom","updateZoom"]]]]],["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-qr-scanner.entry.js

@@ -15,11 +15,11 @@ const TwintagQRScanner = class {
     this.symbol = createEvent(this, "symbol", 7);
     this.streamIsActive = createEvent(this, "streamIsActive", 7);
     this.frame = createEvent(this, "frame", 7);
+    this.stage = 0;
     this.stageScale = 1;
-    this.eventsController = new AbortController();
     this.videoIsPlaying = false;
-    this.devices = [];
     this.decoderIsBusy = false;
+    this.eventsController = new AbortController();
     this.stream = null;
     this.mode = 'single';
     this.format = 'QRCode';
@@ -52,7 +52,6 @@ const TwintagQRScanner = class {
     if (event.code === 'ready') {
       this.decoderIsBusy = false;
       this.symbol.emit(event.result);
-      this.frame.emit(this.canvas.toDataURL('image/png', 0.7));
       if (this.mode === 'single') {
         this.eventsController.abort();
         this.stopStream();
@@ -105,32 +104,35 @@ const TwintagQRScanner = class {
     }
   }
   readBarcodeFromCanvas() {
+    this.reqAnimFrame = requestAnimationFrame(this.readBarcodeFromCanvas.bind(this));
+    if (!this.stage)
+      return;
     this.drawInCanvas();
-    const imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
+    const imageData = this.context.getImageData(0, 0, this.stage, this.stage);
     const sourceBuffer = imageData.data;
     if (!this.decoderIsBusy) {
       worker.postMessage({
         type: 'read',
         format: this.format,
         details: {
-          width: this.canvas.width,
-          height: this.canvas.height,
+          width: this.stage,
+          height: this.stage,
           sourceBuffer: sourceBuffer,
         },
       });
+      this.frame.emit(this.canvas.toDataURL('image/png', 0.7));
     }
-    requestAnimationFrame(this.readBarcodeFromCanvas.bind(this));
   }
   drawInCanvas() {
-    const stage = Math.min(this.video.videoWidth, this.video.videoHeight);
-    const squareLength = stage * this.crop;
+    const videoStage = Math.min(this.video.videoWidth, this.video.videoHeight);
+    const squareLength = videoStage * this.crop;
     const center = {
       x: this.video.videoWidth / 2,
       y: this.video.videoHeight / 2,
     };
     const sx = center.x - squareLength / 2;
     const sy = center.y - squareLength / 2;
-    this.context.drawImage(this.video, sx, sy, squareLength, squareLength, 0, 0, stage * this.stageScale, stage * this.stageScale);
+    this.context.drawImage(this.video, sx, sy, squareLength, squareLength, 0, 0, videoStage * this.stageScale, videoStage * this.stageScale);
   }
   async updateStream(constraints) {
     if (this.stream) {
@@ -177,20 +179,20 @@ const TwintagQRScanner = class {
     };
     try {
       await this.updateStream(constraints);
-      const devices = await navigator.mediaDevices.enumerateDevices();
-      this.devices = devices.filter((device) => device.kind.toLowerCase() === 'videoinput' &&
+      const raw_devices = await navigator.mediaDevices.enumerateDevices();
+      const devices = raw_devices.filter((device) => device.kind.toLowerCase() === 'videoinput' &&
         device.label.toLowerCase().includes('back'));
-      if (this.devices.length === 0) {
+      if (devices.length === 0) {
         return;
       }
-      if (this.devices.length === 1) {
+      if (devices.length === 1) {
         constraints.video.deviceId = {
-          exact: this.devices[0].deviceId,
+          exact: devices[0].deviceId,
         };
         await this.updateStream(constraints);
       }
-      let backCameraIndex = this.devices.length - 1;
-      const cameraResolutions = this.devices.map((camera) => {
+      let backCameraIndex = devices.length - 1;
+      const cameraResolutions = devices.map((camera) => {
         const match = camera.label.match(/\b([0-9]+)MP?\b/i);
         if (match != null) {
           return parseInt(match[1], 10);
@@ -201,7 +203,7 @@ const TwintagQRScanner = class {
         backCameraIndex = cameraResolutions.lastIndexOf(Math.max(...cameraResolutions));
       }
       // back camera with the highest resolution
-      const backCamera = this.devices[backCameraIndex];
+      const backCamera = devices[backCameraIndex];
       if (backCamera) {
         constraints.video.deviceId = {
           exact: backCamera.deviceId,
@@ -246,11 +248,11 @@ const TwintagQRScanner = class {
           const currentStage = Math.min(this.video.videoWidth, this.video.videoHeight);
           const maxStageValue = 400;
           this.stageScale = Math.min(currentStage, maxStageValue) / currentStage;
-          const stage = currentStage * this.stageScale;
-          this.canvas.width = stage;
-          this.canvas.height = stage;
-          this.context.canvas.width = stage;
-          this.context.canvas.height = stage;
+          this.stage = currentStage * this.stageScale;
+          this.canvas.width = this.stage;
+          this.canvas.height = this.stage;
+          this.context.canvas.width = this.stage;
+          this.context.canvas.height = this.stage;
           this.readBarcodeFromCanvas();
         },
       });
@@ -258,10 +260,11 @@ const TwintagQRScanner = class {
   }
   stopStream() {
     this.streamIsActive.emit(false);
+    this.video.srcObject = null;
     this.stream.getTracks().forEach((track) => {
       track.stop();
     });
-    this.video.srcObject = null;
+    cancelAnimationFrame(this.reqAnimFrame);
     this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
     gsapWithCSS.to(this.videoContainerRef, {
       duration: 0.2,

package/dist/stencil-web-components/p-6e35bc47.entry.js

@@ -0,0 +1 @@
+import{r as t,c as a,h as i,H as n}from"./p-cb286d41.js";import{g as r}from"./p-60325667.js";import{c as s}from"./p-5e046324.js";const c=s(new URL("p-02c80109.js",import.meta.url).href,"scanner.worker","stencil.scanner.worker"),e=class{constructor(i){t(this,i),this.symbol=a(this,"symbol",7),this.streamIsActive=a(this,"streamIsActive",7),this.frame=a(this,"frame",7),this.stage=0,this.stageScale=1,this.videoIsPlaying=!1,this.decoderIsBusy=!1,this.eventsController=new AbortController,this.stream=null,this.mode="single",this.format="QRCode",this.crop=1}async updateZoom(t){const[a]=this.stream.getVideoTracks();if(a.getCapabilities&&"function"==typeof a.applyConstraints){const i=a.getCapabilities();if("zoom"in a.getSettings()){const n=i.zoom.min,r=i.zoom.max;await a.applyConstraints({advanced:[{zoom:n+(r-n)*t.detail}]})}}}messageHandler(t){const a=t.data;"busy"===a.code&&(this.decoderIsBusy=!0),"ready"===a.code&&(this.decoderIsBusy=!1,this.symbol.emit(a.result),"single"===this.mode&&(this.eventsController.abort(),this.stopStream()))}componentWillLoad(){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d",{alpha:!1,willReadFrequently:!0})}async componentDidLoad(){c.addEventListener("message",(t=>{const a=t.data;"busy"===a.code&&(this.decoderIsBusy=!0),"ready"===a.code&&(this.decoderIsBusy=!1,this.symbol.emit(a.result),"single"===this.mode&&(this.eventsController.abort(),this.stopStream()))}),{passive:!0,signal:this.eventsController.signal}),document.addEventListener("visibilitychange",(async()=>{document.hidden?this.stream&&this.stopStream():await this.startStream()}),{passive:!0,signal:this.eventsController.signal}),this.videoContainerRef.style.setProperty("--crop",""+50*(1-this.crop)),document.hidden||await this.startStream()}readBarcodeFromCanvas(){if(this.reqAnimFrame=requestAnimationFrame(this.readBarcodeFromCanvas.bind(this)),!this.stage)return;this.drawInCanvas();const t=this.context.getImageData(0,0,this.stage,this.stage);this.decoderIsBusy||(c.postMessage({type:"read",format:this.format,details:{width:this.stage,height:this.stage,sourceBuffer:t.data}}),this.frame.emit(this.canvas.toDataURL("image/png",.7)))}drawInCanvas(){const t=Math.min(this.video.videoWidth,this.video.videoHeight),a=t*this.crop;this.context.drawImage(this.video,this.video.videoWidth/2-a/2,this.video.videoHeight/2-a/2,a,a,0,0,t*this.stageScale,t*this.stageScale)}async updateStream(t){this.stream&&this.stream.getTracks().forEach((t=>{t.stop()}));try{this.stream=await navigator.mediaDevices.getUserMedia(t),this.video.srcObject=null,this.video.srcObject=this.stream,this.video.setAttribute("playsinline","true"),this.video.onplaying=()=>{this.videoIsPlaying=!0},this.video.onpause=()=>{this.videoIsPlaying=!1},this.videoIsPlaying||(await this.video.play(),this.videoIsPlaying=!0)}catch(t){console.error(t)}}async getTrackSettings(t){try{return(await navigator.mediaDevices.getUserMedia(t)).getVideoTracks()[0].getSettings()}catch(t){console.error(t)}}async getMedia(t){t.video.width={min:1080,ideal:1600,max:1920};try{await this.updateStream(t);const a=(await navigator.mediaDevices.enumerateDevices()).filter((t=>"videoinput"===t.kind.toLowerCase()&&t.label.toLowerCase().includes("back")));if(0===a.length)return;1===a.length&&(t.video.deviceId={exact:a[0].deviceId},await this.updateStream(t));let i=a.length-1;const n=a.map((t=>{const a=t.label.match(/\b([0-9]+)MP?\b/i);return null!=a?parseInt(a[1],10):NaN}));n.some((t=>isNaN(t)))||(i=n.lastIndexOf(Math.max(...n)));const r=a[i];if(r)return t.video.deviceId={exact:r.deviceId},void await this.updateStream(t);const s=await this.getTrackSettings(t);s.focusDistance&&(t.video.advanced=[{focusMode:"continuous",focusDistance:s.focusDistance}],await this.updateStream(t))}catch(t){console.error(t)}this.stream&&this.streamIsActive.emit(!0)}async startStream(){const t={audio:!1,video:{aspectRatio:{ideal:1},facingMode:"environment"}};navigator.mediaDevices.getSupportedConstraints().zoom&&(t.video.zoom=!0),await this.getMedia(t),this.videoIsPlaying&&r.to(this.videoContainerRef,{duration:.2,opacity:1,onComplete:()=>{const t=Math.min(this.video.videoWidth,this.video.videoHeight);this.stageScale=Math.min(t,400)/t,this.stage=t*this.stageScale,this.canvas.width=this.stage,this.canvas.height=this.stage,this.context.canvas.width=this.stage,this.context.canvas.height=this.stage,this.readBarcodeFromCanvas()}})}stopStream(){this.streamIsActive.emit(!1),this.video.srcObject=null,this.stream.getTracks().forEach((t=>{t.stop()})),cancelAnimationFrame(this.reqAnimFrame),this.context.clearRect(0,0,this.context.canvas.width,this.context.canvas.height),r.to(this.videoContainerRef,{duration:.2,opacity:0})}disconnectedCallback(){this.eventsController.abort(),this.stopStream()}render(){return i(n,null,i("div",{class:"video-container",ref:t=>this.videoContainerRef=t},i("div",{class:"video-corners"}),i("video",{crossOrigin:"Anonymous",autoplay:!0,playsinline:!0,ref:t=>this.video=t})))}static get assetsDirs(){return["assets"]}};e.style=':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)}';export{e as twintag_qr_scanner}

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

@@ -1 +1 @@
-import{p as e,b as t}from"./p-cb286d41.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((e=>t([["p-fb43176d",[[1,"twintag-preview",{item:[1],initial:[16],smoothExtinction:[2,"smooth-extinction"],extension:[1],showButtons:[4,"show-buttons"],previewableItem:[32],type:[32]}]]],["p-821ba724",[[1,"twintag-auth-callback"]]],["p-0be73e86",[[1,"twintag-auth-logout"]]],["p-84e1cfed",[[1,"twintag-media",{first:[1],middle:[1],last:[1]}]]],["p-dff77416",[[1,"twintag-ocr-scanner",{stream:[1040],mode:[1],cropX:[2,"crop-x"],cropY:[2,"crop-y"],devices:[32]},[[0,"updateZoom","updateZoom"],[2,"recognize","ocrHandler"]]]]],["p-67e2625e",[[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"]]]]],["p-37b2160f",[[1,"twintag-offline-state",{onlineState:[32],pendingRequests:[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["p-5f1060fe",[[1,"twintag-offline-support",{autoSync:[4,"auto-sync"],forceOffline:[4,"force-offline"],config:[16]}]]],["p-b3abcf46",[[1,"twintag-qr-scanner",{stream:[1040],mode:[1],format:[1],crop:[514],devices:[32],decoderIsBusy:[32]},[[1,"updateZoom","updateZoom"]]]]],["p-feeba1cd",[[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"]]]]],["p-4a001573",[[1,"twintag-spinner",{color:[513],duration:[2],name:[1]}]]],["p-01d4afb8",[[0,"twintag-pdf-viewer",{src:[1],fileName:[1,"file-name"],file:[32],fileURL:[32]}]]]],e)));
+import{p as e,b as t}from"./p-cb286d41.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((e=>t([["p-fb43176d",[[1,"twintag-preview",{item:[1],initial:[16],smoothExtinction:[2,"smooth-extinction"],extension:[1],showButtons:[4,"show-buttons"],previewableItem:[32],type:[32]}]]],["p-821ba724",[[1,"twintag-auth-callback"]]],["p-0be73e86",[[1,"twintag-auth-logout"]]],["p-84e1cfed",[[1,"twintag-media",{first:[1],middle:[1],last:[1]}]]],["p-dff77416",[[1,"twintag-ocr-scanner",{stream:[1040],mode:[1],cropX:[2,"crop-x"],cropY:[2,"crop-y"],devices:[32]},[[0,"updateZoom","updateZoom"],[2,"recognize","ocrHandler"]]]]],["p-67e2625e",[[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"]]]]],["p-37b2160f",[[1,"twintag-offline-state",{onlineState:[32],pendingRequests:[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["p-5f1060fe",[[1,"twintag-offline-support",{autoSync:[4,"auto-sync"],forceOffline:[4,"force-offline"],config:[16]}]]],["p-6e35bc47",[[1,"twintag-qr-scanner",{stream:[1040],mode:[1],format:[1],crop:[514]},[[1,"updateZoom","updateZoom"]]]]],["p-feeba1cd",[[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"]]]]],["p-4a001573",[[1,"twintag-spinner",{color:[513],duration:[2],name:[1]}]]],["p-01d4afb8",[[0,"twintag-pdf-viewer",{src:[1],fileName:[1,"file-name"],file:[32],fileURL:[32]}]]]],e)));

package/dist/types/components/twintag-scanner/twintag-qr-scanner.d.ts

@@ -7,11 +7,12 @@ export declare class TwintagQRScanner {
   canvas: HTMLCanvasElement;
   context: CanvasRenderingContext2D;
   preprocessor: Preprocessing;
+  stage: number;
   stageScale: number;
-  eventsController: AbortController;
+  reqAnimFrame: number;
   videoIsPlaying: boolean;
-  devices: MediaDeviceInfo[];
   decoderIsBusy: boolean;
+  eventsController: AbortController;
   stream: MediaStream | null;
   mode: 'single' | 'streaming';
   format: Format;

package/dist/types/version.d.ts

@@ -1,4 +1,4 @@
 /**
  * The library version.
  */
-export declare const VERSION = "0.2.284-fix-stream-visibility-9ac029dedd8eb46b8c97b6a6b8dfdb114e5e5de8";
+export declare const VERSION = "0.2.284-fix-scanner-stream-visibility-fa1b63f803fa98c0ac1314c5943dd3461e208cfb";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twintag/twintag-core",
-  "version": "0.2.284-fix-stream-visibility-9ac029dedd8eb46b8c97b6a6b8dfdb114e5e5de8",
+  "version": "0.2.284-fix-scanner-stream-visibility-fa1b63f803fa98c0ac1314c5943dd3461e208cfb",
   "author": "Twintag",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/stencil-web-components/p-b3abcf46.entry.js

@@ -1 +0,0 @@
-import{r as t,c as a,h as i,H as n}from"./p-cb286d41.js";import{g as r}from"./p-60325667.js";import{c as s}from"./p-5e046324.js";const c=s(new URL("p-02c80109.js",import.meta.url).href,"scanner.worker","stencil.scanner.worker"),e=class{constructor(i){t(this,i),this.symbol=a(this,"symbol",7),this.streamIsActive=a(this,"streamIsActive",7),this.frame=a(this,"frame",7),this.stageScale=1,this.eventsController=new AbortController,this.videoIsPlaying=!1,this.devices=[],this.decoderIsBusy=!1,this.stream=null,this.mode="single",this.format="QRCode",this.crop=1}async updateZoom(t){const[a]=this.stream.getVideoTracks();if(a.getCapabilities&&"function"==typeof a.applyConstraints){const i=a.getCapabilities();if("zoom"in a.getSettings()){const n=i.zoom.min,r=i.zoom.max;await a.applyConstraints({advanced:[{zoom:n+(r-n)*t.detail}]})}}}messageHandler(t){const a=t.data;"busy"===a.code&&(this.decoderIsBusy=!0),"ready"===a.code&&(this.decoderIsBusy=!1,this.symbol.emit(a.result),this.frame.emit(this.canvas.toDataURL("image/png",.7)),"single"===this.mode&&(this.eventsController.abort(),this.stopStream()))}componentWillLoad(){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d",{alpha:!1,willReadFrequently:!0})}async componentDidLoad(){c.addEventListener("message",(t=>{const a=t.data;"busy"===a.code&&(this.decoderIsBusy=!0),"ready"===a.code&&(this.decoderIsBusy=!1,this.symbol.emit(a.result),"single"===this.mode&&(this.eventsController.abort(),this.stopStream()))}),{passive:!0,signal:this.eventsController.signal}),document.addEventListener("visibilitychange",(async()=>{document.hidden?this.stream&&this.stopStream():await this.startStream()}),{passive:!0,signal:this.eventsController.signal}),this.videoContainerRef.style.setProperty("--crop",""+50*(1-this.crop)),document.hidden||await this.startStream()}readBarcodeFromCanvas(){this.drawInCanvas();const t=this.context.getImageData(0,0,this.canvas.width,this.canvas.height);this.decoderIsBusy||c.postMessage({type:"read",format:this.format,details:{width:this.canvas.width,height:this.canvas.height,sourceBuffer:t.data}}),requestAnimationFrame(this.readBarcodeFromCanvas.bind(this))}drawInCanvas(){const t=Math.min(this.video.videoWidth,this.video.videoHeight),a=t*this.crop;this.context.drawImage(this.video,this.video.videoWidth/2-a/2,this.video.videoHeight/2-a/2,a,a,0,0,t*this.stageScale,t*this.stageScale)}async updateStream(t){this.stream&&this.stream.getTracks().forEach((t=>{t.stop()}));try{this.stream=await navigator.mediaDevices.getUserMedia(t),this.video.srcObject=null,this.video.srcObject=this.stream,this.video.setAttribute("playsinline","true"),this.video.onplaying=()=>{this.videoIsPlaying=!0},this.video.onpause=()=>{this.videoIsPlaying=!1},this.videoIsPlaying||(await this.video.play(),this.videoIsPlaying=!0)}catch(t){console.error(t)}}async getTrackSettings(t){try{return(await navigator.mediaDevices.getUserMedia(t)).getVideoTracks()[0].getSettings()}catch(t){console.error(t)}}async getMedia(t){t.video.width={min:1080,ideal:1600,max:1920};try{await this.updateStream(t);const a=await navigator.mediaDevices.enumerateDevices();if(this.devices=a.filter((t=>"videoinput"===t.kind.toLowerCase()&&t.label.toLowerCase().includes("back"))),0===this.devices.length)return;1===this.devices.length&&(t.video.deviceId={exact:this.devices[0].deviceId},await this.updateStream(t));let i=this.devices.length-1;const n=this.devices.map((t=>{const a=t.label.match(/\b([0-9]+)MP?\b/i);return null!=a?parseInt(a[1],10):NaN}));n.some((t=>isNaN(t)))||(i=n.lastIndexOf(Math.max(...n)));const r=this.devices[i];if(r)return t.video.deviceId={exact:r.deviceId},void await this.updateStream(t);const s=await this.getTrackSettings(t);s.focusDistance&&(t.video.advanced=[{focusMode:"continuous",focusDistance:s.focusDistance}],await this.updateStream(t))}catch(t){console.error(t)}this.stream&&this.streamIsActive.emit(!0)}async startStream(){const t={audio:!1,video:{aspectRatio:{ideal:1},facingMode:"environment"}};navigator.mediaDevices.getSupportedConstraints().zoom&&(t.video.zoom=!0),await this.getMedia(t),this.videoIsPlaying&&r.to(this.videoContainerRef,{duration:.2,opacity:1,onComplete:()=>{const t=Math.min(this.video.videoWidth,this.video.videoHeight);this.stageScale=Math.min(t,400)/t;const a=t*this.stageScale;this.canvas.width=a,this.canvas.height=a,this.context.canvas.width=a,this.context.canvas.height=a,this.readBarcodeFromCanvas()}})}stopStream(){this.streamIsActive.emit(!1),this.stream.getTracks().forEach((t=>{t.stop()})),this.video.srcObject=null,this.context.clearRect(0,0,this.context.canvas.width,this.context.canvas.height),r.to(this.videoContainerRef,{duration:.2,opacity:0})}disconnectedCallback(){this.eventsController.abort(),this.stopStream()}render(){return i(n,null,i("div",{class:"video-container",ref:t=>this.videoContainerRef=t},i("div",{class:"video-corners"}),i("video",{crossOrigin:"Anonymous",autoplay:!0,playsinline:!0,ref:t=>this.video=t})))}static get assetsDirs(){return["assets"]}};e.style=':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)}';export{e as twintag_qr_scanner}