... import { BarcodeScanner } from '@capacitor-community/barcode-scanner'; ... export class HomePage { public scanStatus:boolean = false; // no inicio da página, coloca o estado do código qr para falso public result:any; constructor() {} async scanCode () { this.setPermissions(); /* chama as permissões à camera */ BarcodeScanner.hideBackground(); // coloca o fundo transparente this.scanStatus = true; // ao mudar esta variável para true, estamos a puxar o qr code scanner document.body.classList.add("qrscanner"); // adiciona a classe css que fizemos no global const result = await BarcodeScanner.startScan(); // começa a fazer scan e espera por um result // se o qr scanner detectou algum número, então ele faz o código abaixo if (result.hasContent) { this.scanStatus = false; //como é obvio, ele tem de desligar o scanner ao obter o resultado BarcodeScanner.stopScan(); //para o scan this.result = result.content; // passa o resultado para a variável global result BarcodeScanner.showBackground(); //volta a mostrar o fundo document.body.classList.remove("qrscanner"); //remove a classe css que criamos no global } } async setPermissions(){ const status = await BarcodeScanner.checkPermission({ force: true }); /* força a permissão para true, caso o utilizador não aceite, o scanner não funciona */ if (status.granted) { // the user granted permission return true; // se o utilizador aceitou as permissões retorna true } return false; // se o utilizador não aceitou retorna false } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter