Framos
Janeiro 27, 2021, 11:16am
1
Olá,
Semana passada recebi a missão de realizar a leitura de códigos de barras pelo LATROMI, então logo pensei a biblioteca instascan que geralmente é utilizada para realizar esse trabalho na plataforma.
Criei um formulário com ajuda de um tutorial da comunidade, porém, não consegui ler o código de barras com a biblioteca instascan
Fiz o teste com o mesmo código de barras, porém, com a biblioteca QuaggaJS e consegui realizar a leitura do código de barras online, no site da biblioteca.
Para utilizar a biblioteca QuaggaJS no LATROMI exportei a biblioteca para o servidor
Criei um arquivo chamado initQuaggaJS que basicamente serviria para iniciar a utilização da biblioteca.
Quagga.init({
inputStream: {
name: "Live",
type: "LiveStream",
target: document.querySelector('#preview')
},
decoder: {
readers: ["code_128_reader"]
}
}, function (err) {
if (err) {
console.log(err);
return
}
console.log("Initialization finished. Ready to start");
Quagga.start();
});
Quagga.onDetected(function (data) {
console.log(data);
});
E para mostrar as imagem da câmera criei um objeto HTMLElement com o código HTML dentro para ser identificado pelo initQuaggaJS.
<!--<video id="preview" style="width:100%;height:100%"></video> -->
<div id="preview" style="width:100%;height:100%"></div>
As leituras deveriam sair no console, mas isso não esta acontecendo.
Alguém tem alguma ideia de como eu poderia utilizar a biblioteca?
Olá @Framos !
Acho que o problema é que você está iniciando a biblioteca Quagga antes do Formulário Dinâmico estar completamente carregado.
Modifique o JavaScript e coloque o código de inicialização do Quagga como callback do “evento” FormCreated, dessa forma:
latromi.formManager.setOnFormCreatedCallback( function(args) {
// Coloque o código "Quagga.init" aqui
});
Se ainda assim não funcionar, tente fazer a leitura usando um computador, com a aba console do navegador aberta para ver se ocorre algum erro.
1 curtida
Framos
Janeiro 27, 2021, 7:40pm
3
Framos:
QuaggaJS
Olá @daniel.giacomelli , muito obrigado por ajudar, funcionou perfeitamente.
2 curtidas
@Framos , tentamos implementar este exemplo do Quagga , mas encontramos um probleminha.
O elemento target não pode ser um video, mas sim um container para o elemento video.
Trocamos para um elemento div e funcionou. Alterei o código no tua postagem original.
Framos
Fevereiro 20, 2021, 4:00am
5
Estou compartilhando uma implementação de teste que realizamos do QuaggaJS.
O exemplo em funcionamento pode ser conferido neste link .
Adicione os elementos abaixo em um Formulário Dinâmico .
quagga.min.js - Referencie o arquivo da biblioteca
QuaggaInit.js - Crie um novo arquivo, e adicione o código a seguir:
(function () {
// Elemento que recebe o video
var container = document.createElement('div');
container.id = 'video-container';
// Botão para encerrar
var closeButton = document.createElement('button');
closeButton.type = 'button';
closeButton.innerHTML = 'Fechar';
closeButton.className = 'close-button';
closeButton.addEventListener('click', scannerEnd);
container.appendChild(closeButton);
document.body.appendChild(container);
})();
function scannerInit (initializedCallback) {
Quagga.init({
inputStream: {
name: "Live",
type: "LiveStream",
target: document.querySelector('#video-container')
},
locate: true,
halfSample: true,
decoder: {
readers: ["code_128_reader"]
}
}, function (err) {
if (err) {
alert('Error: ' + err);
return
}
Quagga.start();
if (initializedCallback)
initializedCallback();
});
};
function scannerStart() {
scannerInit(function() {
document.getElementById('video-container').style.display = 'block';
});
}
function scannerEnd() {
Quagga.stop();
document.getElementById('video-container').style.display = 'none';
}
Quagga.onDetected(function (data) {
scannerEnd();
var code = data.codeResult.code;
if (code !== null && code !== undefined)
latromi.formManager.getFormInstance().setFieldValue('barCode', code);
});
barCode - Campo do tipo TextBox , que vai receber o código de barras após a leitura.
scanButton - Campo do tipo Button , que vai iniciar o processo de leitura do código de barras.
scanButton_Click - Procedimento vinculado ao evento Click do botão “scanButton”. Adicione uma ação do tipo Executar Código JavaScript , e informe o código a seguir para iniciar a leitura do código de barras:scannerStart();
Você pode enfrentar problemas ao implementar esta biblioteca caso não esteja utilizando o protocolo HTTPS
Framos
Dezembro 12, 2022, 11:18am
7
Bom dia á todos.
Existe uma maneira de ligarmos a luz do flash quando rodarmos o procedimento que liga a câmera, para leitura em locais escuros?
Olá @Framos
O código abaixo liga ou desliga a lanterna do celular. Basta passar true ou false no parâmetro on:
// Liga/desliga a luz da camera
function torchSwitch(on) {
navigator.mediaDevices.getUserMedia({
video: {
facingMode: 'environment',
}
})
.then((stream) => {
const video = document.querySelector('video');
video.srcObject = stream;
// get the active track of the stream
const track = stream.getVideoTracks()[0];
video.addEventListener('loadedmetadata', (e) => {
window.setTimeout(() => (
onCapabilitiesReady(track.getCapabilities())
), 500);
});
function onCapabilitiesReady(capabilities) {
if (capabilities.torch) {
track.applyConstraints({
advanced: [{ torch: on }]
})
.catch(e => console.log(e));
}
}
})
.catch(err => alert('getUserMedia() failed: ' + err));
}
Fonte: Let’s light a torch and explore MediaStreamTrack’s capabilities
1 curtida
