@twintag/twintag-core 0.2.284-fix-scanner-stream-visibility-6089d4b70b168d7f36856f76561ecae7bddfb160 → 0.2.284-fix-scanner-stream-visibility-e1001dac4bbbb51970b19c08e9a5c830ae722924
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/twintag-qr-scanner.cjs.entry.js +11 -5
- package/dist/collection/components/twintag-scanner/twintag-qr-scanner.js +11 -5
- package/dist/collection/version.js +1 -1
- package/dist/components/twintag-qr-scanner.js +11 -5
- package/dist/esm/twintag-qr-scanner.entry.js +11 -5
- package/dist/stencil-web-components/p-1807206d.entry.js +1 -0
- package/dist/stencil-web-components/stencil-web-components.esm.js +1 -1
- package/dist/types/version.d.ts +1 -1
- package/package.json +1 -1
- package/dist/stencil-web-components/p-0368f0c8.entry.js +0 -1
|
@@ -226,11 +226,17 @@ const TwintagQRScanner = class {
|
|
|
226
226
|
};
|
|
227
227
|
try {
|
|
228
228
|
if (!isEmpty(scannerStore.get('deviceId'))) {
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
229
|
+
try {
|
|
230
|
+
const device_constraints = JSON.parse(JSON.stringify(constraints));
|
|
231
|
+
device_constraints.video.deviceId = {
|
|
232
|
+
exact: scannerStore.get('deviceId'),
|
|
233
|
+
};
|
|
234
|
+
await this.updateStream(device_constraints);
|
|
235
|
+
return;
|
|
236
|
+
}
|
|
237
|
+
catch (_) {
|
|
238
|
+
console.warn('Invalid deviceId stored in localStorage. Resetting...');
|
|
239
|
+
}
|
|
234
240
|
}
|
|
235
241
|
await this.updateStream(constraints);
|
|
236
242
|
const raw_devices = await navigator.mediaDevices.enumerateDevices();
|
|
@@ -161,11 +161,17 @@ export class TwintagQRScanner {
|
|
|
161
161
|
};
|
|
162
162
|
try {
|
|
163
163
|
if (!isEmpty(scannerStore.get('deviceId'))) {
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
164
|
+
try {
|
|
165
|
+
const device_constraints = JSON.parse(JSON.stringify(constraints));
|
|
166
|
+
device_constraints.video.deviceId = {
|
|
167
|
+
exact: scannerStore.get('deviceId'),
|
|
168
|
+
};
|
|
169
|
+
await this.updateStream(device_constraints);
|
|
170
|
+
return;
|
|
171
|
+
}
|
|
172
|
+
catch (_) {
|
|
173
|
+
console.warn('Invalid deviceId stored in localStorage. Resetting...');
|
|
174
|
+
}
|
|
169
175
|
}
|
|
170
176
|
await this.updateStream(constraints);
|
|
171
177
|
const raw_devices = await navigator.mediaDevices.enumerateDevices();
|
|
@@ -224,11 +224,17 @@ const TwintagQRScanner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
|
|
|
224
224
|
};
|
|
225
225
|
try {
|
|
226
226
|
if (!isEmpty(scannerStore.get('deviceId'))) {
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
227
|
+
try {
|
|
228
|
+
const device_constraints = JSON.parse(JSON.stringify(constraints));
|
|
229
|
+
device_constraints.video.deviceId = {
|
|
230
|
+
exact: scannerStore.get('deviceId'),
|
|
231
|
+
};
|
|
232
|
+
await this.updateStream(device_constraints);
|
|
233
|
+
return;
|
|
234
|
+
}
|
|
235
|
+
catch (_) {
|
|
236
|
+
console.warn('Invalid deviceId stored in localStorage. Resetting...');
|
|
237
|
+
}
|
|
232
238
|
}
|
|
233
239
|
await this.updateStream(constraints);
|
|
234
240
|
const raw_devices = await navigator.mediaDevices.enumerateDevices();
|
|
@@ -222,11 +222,17 @@ const TwintagQRScanner = class {
|
|
|
222
222
|
};
|
|
223
223
|
try {
|
|
224
224
|
if (!isEmpty(scannerStore.get('deviceId'))) {
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
225
|
+
try {
|
|
226
|
+
const device_constraints = JSON.parse(JSON.stringify(constraints));
|
|
227
|
+
device_constraints.video.deviceId = {
|
|
228
|
+
exact: scannerStore.get('deviceId'),
|
|
229
|
+
};
|
|
230
|
+
await this.updateStream(device_constraints);
|
|
231
|
+
return;
|
|
232
|
+
}
|
|
233
|
+
catch (_) {
|
|
234
|
+
console.warn('Invalid deviceId stored in localStorage. Resetting...');
|
|
235
|
+
}
|
|
230
236
|
}
|
|
231
237
|
await this.updateStream(constraints);
|
|
232
238
|
const raw_devices = await navigator.mediaDevices.enumerateDevices();
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as a,h as i,H as r}from"./p-d5d0e2ee.js";import{g as n}from"./p-60325667.js";import{c as s,a as e}from"./p-7b959006.js";const c=(t,a)=>{try{return JSON.parse(t.getItem(a))}catch(t){return null}},o=(t,a,i,r=!1)=>{var n;const e=s(null!==(n=c(t,a))&&void 0!==n?n:i),o=(()=>{let i=!1;return()=>{i||(i=!0,setTimeout((()=>{t.setItem(a,JSON.stringify(e.state)),i=!1}),0))}})();return o(),r&&window.addEventListener("storage",(()=>{const i=c(t,a);if(null!==i)for(const t in i)e.set(t,i[t])})),e.use({set:o,reset:o}),e},h=((t,a,i=!1)=>o(localStorage,"twintag-barcode-scanner",{deviceId:""},i))(),l=e(new URL("p-02c80109.js",import.meta.url).href,"scanner.worker","stencil.scanner.worker"),d=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 r=i.zoom.min,n=i.zoom.max;await a.applyConstraints({advanced:[{zoom:r+(n-r)*t.detail}]})}}}componentWillLoad(){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d",{alpha:!1,willReadFrequently:!0})}async componentDidLoad(){l.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||!this.stageScale){const t=Math.min(this.video.videoWidth,this.video.videoHeight);return this.stageScale=Math.min(t,400)/t,this.stage=t*this.stageScale,this.canvas.width=this.stage,void(this.canvas.height=this.stage)}this.drawInCanvas();const t=this.context.getImageData(0,0,this.stage,this.stage);this.decoderIsBusy||(l.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=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){throw new Error(t)}}async getTrackSettings(t){try{return(await navigator.mediaDevices.getUserMedia(t)).getVideoTracks()[0].getSettings()}catch(t){throw new Error(t)}}async getMedia(t){t.video.width={min:1080,ideal:1600,max:1920};try{if((a=h.get("deviceId"))&&0!==a.length&&a.trim())try{const a=JSON.parse(JSON.stringify(t));return a.video.deviceId={exact:h.get("deviceId")},void await this.updateStream(a)}catch(t){console.warn("Invalid deviceId stored in localStorage. Resetting...")}await this.updateStream(t);const i=(await navigator.mediaDevices.enumerateDevices()).filter((t=>"videoinput"===t.kind.toLowerCase()&&t.label.toLowerCase().includes("back")));if(0===i.length)return;if(1===i.length){const a=i[0].deviceId;h.set("deviceId",a),t.video.deviceId={exact:a},await this.updateStream(t)}let r=i.length-1;const n=i.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)))||(r=n.lastIndexOf(Math.max(...n)));const s=i[r];if(s){const a=s.deviceId;return h.set("deviceId",a),t.video.deviceId={exact:a},void await this.updateStream(t)}const e=await this.getTrackSettings(t);e.focusDistance&&(t.video.advanced=[{focusMode:"continuous",focusDistance:e.focusDistance}],await this.updateStream(t))}catch(t){t instanceof Error?console.error(t.message):console.error(t)}finally{this.stream&&this.streamIsActive.emit(!0)}var a}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&&n.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.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),n.to(this.videoContainerRef,{duration:.2,opacity:0})}disconnectedCallback(){this.eventsController.abort(),this.stopStream()}render(){return i(r,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"]}};d.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{d as twintag_qr_scanner}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-d5d0e2ee.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((e=>t([["p-d1230452",[[1,"twintag-preview",{item:[1],initial:[16],smoothExtinction:[2,"smooth-extinction"],extension:[1],showButtons:[4,"show-buttons"],previewableItem:[32],type:[32]}]]],["p-7943b86a",[[1,"twintag-auth-callback"]]],["p-f58c7a83",[[1,"twintag-auth-logout"]]],["p-6cd7075c",[[1,"twintag-media",{first:[1],middle:[1],last:[1]}]]],["p-d428ed6b",[[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-1e296694",[[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-9f7518ab",[[1,"twintag-offline-state",{onlineState:[32],pendingRequests:[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["p-a53a2c70",[[1,"twintag-offline-support",{autoSync:[4,"auto-sync"],forceOffline:[4,"force-offline"],config:[16]}]]],["p-
|
|
1
|
+
import{p as e,b as t}from"./p-d5d0e2ee.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((e=>t([["p-d1230452",[[1,"twintag-preview",{item:[1],initial:[16],smoothExtinction:[2,"smooth-extinction"],extension:[1],showButtons:[4,"show-buttons"],previewableItem:[32],type:[32]}]]],["p-7943b86a",[[1,"twintag-auth-callback"]]],["p-f58c7a83",[[1,"twintag-auth-logout"]]],["p-6cd7075c",[[1,"twintag-media",{first:[1],middle:[1],last:[1]}]]],["p-d428ed6b",[[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-1e296694",[[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-9f7518ab",[[1,"twintag-offline-state",{onlineState:[32],pendingRequests:[32]},[[8,"onlineChanged","onlineChangedHandler"],[8,"offlineRequestsChanged","offlineRequestsChangedHandler"]]]]],["p-a53a2c70",[[1,"twintag-offline-support",{autoSync:[4,"auto-sync"],forceOffline:[4,"force-offline"],config:[16]}]]],["p-1807206d",[[1,"twintag-qr-scanner",{stream:[1040],mode:[1],format:[1],crop:[514]},[[1,"updateZoom","updateZoom"]]]]],["p-a6f626bb",[[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-5bd6d110",[[1,"twintag-spinner",{color:[513],duration:[2],name:[1]}]]],["p-8806444b",[[0,"twintag-pdf-viewer",{src:[1],fileName:[1,"file-name"],file:[32],fileURL:[32]}]]]],e)));
|
package/dist/types/version.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@twintag/twintag-core",
|
|
3
|
-
"version": "0.2.284-fix-scanner-stream-visibility-
|
|
3
|
+
"version": "0.2.284-fix-scanner-stream-visibility-e1001dac4bbbb51970b19c08e9a5c830ae722924",
|
|
4
4
|
"author": "Twintag",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as a,h as i,H as r}from"./p-d5d0e2ee.js";import{g as n}from"./p-60325667.js";import{c as s,a as e}from"./p-7b959006.js";const c=(t,a)=>{try{return JSON.parse(t.getItem(a))}catch(t){return null}},o=(t,a,i,r=!1)=>{var n;const e=s(null!==(n=c(t,a))&&void 0!==n?n:i),o=(()=>{let i=!1;return()=>{i||(i=!0,setTimeout((()=>{t.setItem(a,JSON.stringify(e.state)),i=!1}),0))}})();return o(),r&&window.addEventListener("storage",(()=>{const i=c(t,a);if(null!==i)for(const t in i)e.set(t,i[t])})),e.use({set:o,reset:o}),e},h=((t,a,i=!1)=>o(localStorage,"twintag-barcode-scanner",{deviceId:""},i))(),l=e(new URL("p-02c80109.js",import.meta.url).href,"scanner.worker","stencil.scanner.worker"),d=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 r=i.zoom.min,n=i.zoom.max;await a.applyConstraints({advanced:[{zoom:r+(n-r)*t.detail}]})}}}componentWillLoad(){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d",{alpha:!1,willReadFrequently:!0})}async componentDidLoad(){l.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||!this.stageScale){const t=Math.min(this.video.videoWidth,this.video.videoHeight);return this.stageScale=Math.min(t,400)/t,this.stage=t*this.stageScale,this.canvas.width=this.stage,void(this.canvas.height=this.stage)}this.drawInCanvas();const t=this.context.getImageData(0,0,this.stage,this.stage);this.decoderIsBusy||(l.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=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){throw new Error(t)}}async getTrackSettings(t){try{return(await navigator.mediaDevices.getUserMedia(t)).getVideoTracks()[0].getSettings()}catch(t){throw new Error(t)}}async getMedia(t){t.video.width={min:1080,ideal:1600,max:1920};try{if((a=h.get("deviceId"))&&0!==a.length&&a.trim())return t.video.deviceId={exact:h.get("deviceId")},void await this.updateStream(t);await this.updateStream(t);const i=(await navigator.mediaDevices.enumerateDevices()).filter((t=>"videoinput"===t.kind.toLowerCase()&&t.label.toLowerCase().includes("back")));if(0===i.length)return;if(1===i.length){const a=i[0].deviceId;h.set("deviceId",a),t.video.deviceId={exact:a},await this.updateStream(t)}let r=i.length-1;const n=i.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)))||(r=n.lastIndexOf(Math.max(...n)));const s=i[r];if(s){const a=s.deviceId;return h.set("deviceId",a),t.video.deviceId={exact:a},void await this.updateStream(t)}const e=await this.getTrackSettings(t);e.focusDistance&&(t.video.advanced=[{focusMode:"continuous",focusDistance:e.focusDistance}],await this.updateStream(t))}catch(t){t instanceof Error?console.error(t.message):console.error(t)}finally{this.stream&&this.streamIsActive.emit(!0)}var a}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&&n.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.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),n.to(this.videoContainerRef,{duration:.2,opacity:0})}disconnectedCallback(){this.eventsController.abort(),this.stopStream()}render(){return i(r,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"]}};d.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{d as twintag_qr_scanner}
|