Как автоматически закрыть черный экран в мобильном телефоне после сканирования штрих-кода с помощью Quagga JS? - PullRequest
0 голосов
/ 21 апреля 2020

Я работаю над веб-приложением, которое сканирует штрих-код и передает код в поле ввода. Я использую 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 это создает проблемы. После сканирования штрих-кода на нем отображается черный экран, который пользователь должен закрыть, нажав кнопку с крестиком.

enter image description here

Но я хочу, чтобы он закрылся автоматически. Есть ли способ сделать это?

...