Estou utilizando o QR Scanner para tentar fazer a leitura de códigos QR através de cameras de dispositivos mobile, porém é detectado a câmera do dispositivo mas não mostra nenhuma imagem da câmera na aplicação.
Device has camera: true
Realizei o download dos arquivos minificados especificados abaixo e foi modificado o Path corretamente de cada um no modulo como no código abaixo.
qr-scanner.min.js
qr-scanner-worker.min.js
O meu documento está apenas com o código de exemplo que eles apresentam, mesmo assim nada é apresentado e nenhum erro é mostrado no console. Alguem poderia me ajudar?
<script type="module">
import QrScanner from "../../Scripts/QRScanner/qr-scanner.min.js";
QrScanner.WORKER_PATH = '../../Scripts/QRScanner/qr-scanner-worker.min.js';
const video = document.getElementById('qr-video');
const debugCheckbox = document.getElementById('debug-checkbox');
const debugCanvas = document.getElementById('debug-canvas');
const debugCanvasContext = debugCanvas.getContext('2d');
const camHasCamera = document.getElementById('cam-has-camera');
const camQrResult = document.getElementById('cam-qr-result');
const fileSelector = document.getElementById('file-selector');
const fileQrResult = document.getElementById('file-qr-result');
function setResult(label, result) {
label.textContent = result;
label.style.color = 'teal';
clearTimeout(label.highlightTimeout);
label.highlightTimeout = setTimeout(() => label.style.color = 'inherit', 100);
}
// ####### Web Cam Scanning #######
QrScanner.hasCamera().then(hasCamera => camHasCamera.textContent = hasCamera);
const scanner = new QrScanner(video, result => setResult(camQrResult, result));
scanner.start();
document.getElementById('inversion-mode-select').addEventListener('change', event => {
scanner.setInversionMode(event.target.value);
});
// ####### File Scanning #######
fileSelector.addEventListener('change', event => {
const file = fileSelector.files[0];
if (!file) {
return;
}
QrScanner.scanImage(file)
.then(result => setResult(fileQrResult, result))
.catch(e => setResult(fileQrResult, e || 'No QR code found.'));
});
// ####### debug mode related code #######
debugCheckbox.addEventListener('change', () => setDebugMode(debugCheckbox.checked));
function setDebugMode(isDebug) {
const worker = scanner._qrWorker;
worker.postMessage({
type: 'setDebug',
data: isDebug
});
if (isDebug) {
debugCanvas.style.display = 'block';
worker.addEventListener('message', handleDebugImage);
} else {
debugCanvas.style.display = 'none';
worker.removeEventListener('message', handleDebugImage);
}
}
function handleDebugImage(event) {
const type = event.data.type;
if (type === 'debugImage') {
const imageData = event.data.data;
if (debugCanvas.width !== imageData.width || debugCanvas.height !== imageData.height) {
debugCanvas.width = imageData.width;
debugCanvas.height = imageData.height;
}
debugCanvasContext.putImageData(imageData, 0, 0);
}
}
</script>
<style>
canvas {
display: none;
}
hr {
margin-top: 32px;
}
input[type="file"] {
display: block;
margin-bottom: 16px;
}
</style>
<h1>Scan from WebCam:</h1>
<div>
<b>Device has camera: </b>
<span id="cam-has-camera"></span>
<br>
<video id="qr-video"></video>
<canvas id="debug-canvas"></canvas>
</div>
<div>
<select id="inversion-mode-select">
<option value="original">Scan original (dark QR code on bright background)</option>
<option value="invert">Scan with inverted colors (bright QR code on dark background)</option>
<option value="both">Scan both</option>
</select>
<br>
<input type="checkbox" id="debug-checkbox">
<label for="debug-checkbox">Show debug image</label>
</div>
<b>Detected QR code: </b>
<span id="cam-qr-result">None</span>
<hr>
<h1>Scan from File:</h1>
<input type="file" id="file-selector">
<b>Detected QR code: </b>
<span id="file-qr-result">None</span>
Obs: A leitura de QR Code através de um arquivo de imagem pré-selecionado funciona perfeitamente.
Obs2: Fiz uns testes em diferentes dispositivos e vi que é uma particularidade do Android a regra de não mostrar nenhuma imagem.
Obs3: Por fim optei por retirar o código por não poder oferecer suporte a todos os tipos de dispositivos, mas gostaria ainda de saber a resposta
import
do lado do browser não é default em todos os browsers ainda... Pode estar ocorrendo de alguns navegadores que você usa no android não suportar esse tipo de import – Anderson Henrique 22/08/19 às 16:48