Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-5230

adding Barcodescanner twice causes javascript errors

    XMLWordPrintable

Details

    • Bug
    • Resolution: Unresolved
    • Normal
    • None
    • 9.6.2
    • None
    • Security Level: Jimmy
    • None

    Description

      Steps to Reproduce

      1. click "add" button, wait the camera to start showing the video around 3 seconds
      2. Click "remove" button
      3. click "add" button

      Current Result

      The barscanner widget keeps producing the error:

      zkmax.barscanner.wpd:13600 Uncaught TypeError: Cannot read properties of undefined (reading 'getContext')
      at Object.callback (zkmax.barscanner.wpd:13600:40)
      at n (zkmax.barscanner.wpd:1991:19)
      at zkmax.barscanner.wpd:2018:13
      at Array.forEach (<anonymous>)
      at Object.publish (zkmax.barscanner.wpd:2017:29)
      at v (zkmax.barscanner.wpd:1633:59)
      at n.worker.onmessage (zkmax.barscanner.wpd:1680:102)

      Expected Result

      no error

      Workaround

      Similar to the workaround in ZK-4338

      script><![CDATA[
           zk.afterLoad('zkmax.barscanner', function() {
                var xBarcodescanner = {};
                zk.override(zkmax.barscanner.Barcodescanner, xBarcodescanner ,{
                    _quaggaInit: function (wgt, video, canvas, target) {
                        //zkmax.barscanner.Barcodescanner.quaggaApp.init(wgt);
                        var readerType = [],
                            reader = wgt._QUAGGAReader;
                        wgt.debug = false;
                        reader._ready = false;
                        readerType = zkmax.barscanner.Barcodescanner._quaggaTypeFilter(wgt); //Before quagga.init, the video status should be 4, so it has videoWidth and videoHeight attribute to set the
                        //size of canvas
      
                        new Promise(function (resolve, reject) {
                            var waitVideo = setInterval(function () {
                                if (video.readyState == 4) {
                                    clearInterval(waitVideo);
                                    resolve();
                                }
                            }, 50, wgt);
                        }).then(function () {
                            reader.init({
                                locate: true,
                                inputStream: {
                                    name: 'Live',
                                    type: 'LiveStream',
                                    target: target,
                                    // Or '#yourElement' (optional)
                                    area: {
                                        // defines rectangle of the detection/localization area
                                        top: '0%',
                                        // top offset
                                        right: '0%',
                                        // right offset
                                        left: '0%',
                                        // left offset
                                        bottom: '0%' // bottom offset
      
                                    }
                                },
                                frequency: 1000,
                                decoder: {
                                    readers: readerType,
                                    // List of active readers
                                    debug: {
                                        drawBoundingBox: false,
                                        showFrequency: false,
                                        drawScanline: false,
                                        showPattern: false
                                    },
                                    multiple: false
                                },
                                locator: {
                                    halfSample: false,
                                    patchSize: 'medium',
                                    // x-small, small, medium, large, x-large
                                    debug: {
                                        showCanvas: wgt.debug,
                                        showPatches: wgt.debug,
                                        showFoundPatches: wgt.debug,
                                        showSkeleton: wgt.debug,
                                        showLabels: wgt.debug,
                                        showPatchLabels: wgt.debug,
                                        showRemainingPatchLabels: wgt.debug,
                                        boxFromPatches: {
                                            showTransformed: wgt.debug,
                                            showTransformedBox: wgt.debug,
                                            showBB: wgt.debug
                                        }
                                    }
                                },
                                debug: wgt.debug
                            }, function (err) {
                                if (err) {
                                    zk.error(err);
                                    return;
                                }
      
                                reader.canvas = jq.extend(true, {}, zkmax.barscanner.quagga.canvas);
                                reader._ready = true;
                                reader._reset = true;
                                reader._consistencyBuffer = [];
                            });
                        });
                        var onProcessedCallback = function (result) {
                            if (wgt.$n() == null) {
                                reader.offProcessed(onProcessedCallback);
                                return;
                            }
                            var q = zkmax.barscanner.quagga,
                                drawingCanvas = wgt.$n('canvas'),
                                drawingCtx = drawingCanvas.getContext('2d');
      
                            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) {
                                        q.ImageDebug.drawPath(box, {
                                            x: 0,
                                            y: 1
                                        }, drawingCtx, {
                                            color: 'green',
                                            lineWidth: 2
                                        });
                                    });
                                }
      
                                if (result.box) q.ImageDebug.drawPath(result.box, {
                                    x: 0,
                                    y: 1
                                }, drawingCtx, {
                                    color: 'blue',
                                    lineWidth: 2
                                });
                                if (result.codeResult && result.codeResult.code) q.ImageDebug.drawPath(result.line, {
                                    x: 'x',
                                    y: 'y'
                                }, drawingCtx, {
                                    color: 'red',
                                    lineWidth: 3
                                });
                            }
                        }
                        reader.onProcessed(onProcessedCallback);
                        reader.onDetected(function (result) {
                            if (result[0] != undefined) {
                                result = result[0];
                            }
      
                            var errors = result.codeResult.decodedCodes.filter(function (i) {
                                    return i.error !== undefined;
                                }).map(function (i) {
                                    return i.error;
                                }),
                                errorFactor = 0;
      
                            if (errors.length > 0) {
                                // ZK-4498: errors is empty in codabar
                                var errorSum = errors.reduce(function (prev, next) {
                                    return prev + next;
                                });
                                errorFactor = errorSum / errors.length;
                            }
      
                            if (errorFactor <= wgt._errorAcceptance) {
                                var format = result.codeResult.format.replace('_', ''),
                                    value = result.codeResult.code,
                                    buf = reader._consistencyBuffer;
                                buf.push(value);
                                if (buf.length > wgt._consistencyBufferSize) buf.shift();
      
                                if (buf.filter(function (v) {
                                    return v === value;
                                }).length >= wgt._consistencyThreshold) {
                                    reader._consistencyBuffer = [];
      
                                    wgt._doDetect(format, value);
      
                                    reader.processing = false;
                                    reader.pause();
                                }
                            }
                        });
                    }
            });//zk.override
            zkmax.barscanner.Barcodescanner._initLibrary()
        });//zk.afterLoad
        ]]>
        </script>
      

      Attachments

        Issue Links

          Activity

            People

              Unassigned Unassigned
              hawk hawk
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

                Created:
                Updated: