74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
import QrScanner from 'qr-scanner';
|
|
import Services from '../../services/service';
|
|
import { prepareAndSendPairingTx } from '~/utils/sp-address.utils';
|
|
|
|
export default class QrScannerComponent extends HTMLElement {
|
|
videoElement: any;
|
|
wrapper: any;
|
|
qrScanner: any;
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: 'open' });
|
|
this.wrapper = document.createElement('div');
|
|
this.wrapper.style.position = 'relative';
|
|
this.wrapper.style.width = '150px';
|
|
this.wrapper.style.height = '150px';
|
|
|
|
this.videoElement = document.createElement('video');
|
|
this.videoElement.style.width = '100%';
|
|
document.body?.append(this.wrapper);
|
|
this.wrapper.prepend(this.videoElement);
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.initializeScanner();
|
|
}
|
|
|
|
async initializeScanner() {
|
|
if (!this.videoElement) {
|
|
console.error('Video element not found!');
|
|
return;
|
|
}
|
|
console.log('🚀 ~ QrScannerComponent ~ initializeScanner ~ this.videoElement:', this.videoElement);
|
|
this.qrScanner = new QrScanner(this.videoElement, (result) => this.onQrCodeScanned(result), {
|
|
highlightScanRegion: true,
|
|
highlightCodeOutline: true,
|
|
});
|
|
|
|
try {
|
|
await QrScanner.hasCamera();
|
|
this.qrScanner.start();
|
|
this.videoElement.style = 'height: 200px; width: 200px';
|
|
this.shadowRoot?.appendChild(this.wrapper);
|
|
} catch (e) {
|
|
console.error('No camera found or error starting the QR scanner', e);
|
|
}
|
|
}
|
|
|
|
async onQrCodeScanned(result: any) {
|
|
console.log(`QR Code detected:`, result);
|
|
const data = result.data;
|
|
const scannedUrl = new URL(data);
|
|
|
|
// Extract the 'sp_address' parameter
|
|
const spAddress = scannedUrl.searchParams.get('sp_address');
|
|
if (spAddress) {
|
|
// Call the sendPairingTx function with the extracted sp_address
|
|
try {
|
|
await prepareAndSendPairingTx(spAddress);
|
|
} catch (e) {
|
|
console.error('Failed to pair:', e);
|
|
}
|
|
}
|
|
this.qrScanner.stop(); // if you want to stop scanning after one code is detected
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
if (this.qrScanner) {
|
|
this.qrScanner.destroy();
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('qr-scanner', QrScannerComponent);
|