I am trying to work with https://github.com/mebjas/html5-qrcode where once I scan anything the result would be populated in input field id "output". However the output is not getting populated in output id.
var html5QrcodeScanner = new Html5QrcodeScanner(
"qr-reader", { fps: 10, qrbox: 250 });
function onScanSuccess(decodedText, decodedResult) {
// Handle on success condition with the decoded text or result.
console.log(`Scan result: ${decodedText}`, decodedResult);
// ...
//html5QrcodeScanner.clear();
// ^ this will stop the scanner (video feed) and clear the scan area.
}
//Modification Attempt starts here
let QrResult = function(onCloseCallback) {
let scanResultParsed = document.getElementById("output");
}
QrResult.onScanSuccess = function(decodedText) {
this.__onScanSuccess(decodedText);
}
html5QrcodeScanner.render(onScanSuccess);
function onScanSuccess(decodedText, decodedResult) {
console.log(decodedText, decodedResult);
if (html5QrcodeScanner.getState()
!== Html5QrcodeScannerState.NOT_STARTED) {
html5QrcodeScanner.pause(/* shouldPauseVideo= */ true);
}
let scanType = "camera";
if (html5QrcodeScanner.getState()
=== Html5QrcodeScannerState.NOT_STARTED) {
scanType = "file";
}
qrResultHandler.onScanSuccess(decodedText, decodedResult, scanType);
}
html5QrcodeScanner.render(onScanSuccess);
<script src="https://github.com/mebjas/html5-qrcode/releases/download/v2.1.6/html5-qrcode.min.js"></script>
<body>
<div id="qr-reader"></div>
<div id="qr-reader-results">
<input id="output" name="output" type="text" readonly="readonly">
</div>How about something like
let outputContainer = document.getElementById('output');
var html5QrcodeScanner = new Html5QrcodeScanner(
"qr-reader", { fps: 10, qrbox: 250 });
function onScanSuccess(decodedText, decodedResult) {
// Handle on success condition with the decoded text or result.
console.log(`Scan result: ${decodedText}`, decodedResult);
outputContainer.value = decodedText;
}
html5QrcodeScanner.render(onScanSuccess);