Я работаю над веб-приложением, которое сканирует штрих-код и передает код в поле ввода. Я использую Quagga JS считыватель штрих-кода. Вот мой код JSfiddle code
HTML code
<!-- Div to show the scanner -->
<p id="code"></p>
<div id="scanner-container"></div>
<input type="button" id="btn" value="Start/Stop the scanner" />
<script src="https://cdn.rawgit.com/serratus/quaggaJS/0420d5e0/dist/quagga.min.js"></script>
Javascript
var _scannerIsRunning = false;
function startScanner() {
Quagga.init({
inputStream: {
name: "Live",
type: "LiveStream",
target: document.querySelector('#scanner-container'),
area: { // defines rectangle of the detection/localization area
top: "20%", // top offset
right: "20%", // right offset
left: "20%", // left offset
bottom: "20%" // bottom offset
},
constraints: {
audio: true,
video: {
width: 640,
height: 480
},
facingMode: "environment"
},
},
locate: false,
decoder: {
readers: ["code_39_reader"],
debug: {
showCanvas: true,
showPatches: true,
showFoundPatches: true,
showSkeleton: true,
showLabels: true,
showPatchLabels: true,
showRemainingPatchLabels: true,
boxFromPatches: {
showTransformed: true,
showTransformedBox: true,
showBB: true
}
},
multiple: false
},
}, function (err) {
if (err) {
console.log(err);
return
}
console.log("Initialization finished. Ready to start");
Quagga.start();
// Set flag to is running
_scannerIsRunning = true;
});
Quagga.onProcessed(function (result) {
var drawingCtx = Quagga.canvas.ctx.overlay,
drawingCanvas = Quagga.canvas.dom.overlay;
if (result) {
if (result.boxes) {
drawingCtx.clearRect(0,0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
result.boxes.filter(function (box) {
return box !== result.box;
}).forEach(function (box) {
Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });
});
}
if (result.box) {
Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
}
if (result.codeResult && result.codeResult.code) {
Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
}
}
});
Quagga.onDetected(function (result) {
console.log("Barcode detected and processed : [" + result.codeResult.code + "]", result);
//document.write(result.codeResult.code);
Quagga.stop();
document.getElementById('code').innerHTML = result.codeResult.code;
document.getElementById('scanner-container').style.display = 'none';
});
}
// Start/stop scanner
document.getElementById("btn").addEventListener("click", function () {
if (_scannerIsRunning) {
Quagga.stop();
} else {
startScanner();
}
}, false);
CSS
/* In order to place the tracking correctly */
canvas.drawing, canvas.drawingBuffer {
position: absolute;
left: 0;
top: 0;
}
Все отлично работает в браузере рабочего стола. Но в браузере Safari iphone это создает проблемы. После сканирования штрих-кода на нем отображается черный экран, который пользователь должен закрыть, нажав кнопку с крестиком.
Но я хочу, чтобы он закрылся автоматически. Есть ли способ сделать это?