this._calculateScanRegion is not a function

[Lionberg]

Documentation says I can use option calculateScanRegion

But when I initialize an object with this option, I get error.

window.lubenreader_scanner = new QrScanner(window.lubenreader_videoFrameElement, 
    function(result){
        window.lubenreader_setResult(result);
    },
    {highlightScanRegion: true,
    highlightCodeOutline: true,
    calculateScanRegion: {width: 200, height: 200 }});

this._calculateScanRegion is not a function

[03juan]

The typespec defines this parameter as a function that receives the HTMLVideoElement and expects you to return a ScanRegion.

calculateScanRegion?: (video: HTMLVideoElement) => QrScanner.ScanRegion;

Your code should at minimum change to:

calculateScanRegion: () => { return { width: 200, height: 200 } }

[orun028]

How do I get it to update to the right position in the middle of the screen?

[jewelsonn]

How do I get it to update to the right position in the middle of the screen?

This was the test code I used in my vue 3
Pass in this option to the scanner instance

calculateScanRegion: () => {
          return {
            x: (calculateScanRegion(scannerVideo.value).x),
            y: (calculateScanRegion(scannerVideo.value).y),
            width: (calculateScanRegion(scannerVideo.value).width),
            height: (calculateScanRegion(scannerVideo.value).height)
          }
        }

Calculate the region x and y and size to center it

const calculateScanRegion = (video) => {
  const videoWidth = video.videoWidth;
  const videoHeight = video.videoHeight;
  const size = Math.min(videoWidth, videoHeight) * 0.67; // Adjust the factor as needed
  const x = (videoWidth - size) / 2;
  const y = (videoHeight - size) / 2;

  return { x, y, width: size, height: size };
};

This is the css code for the <div id="video-container> which has a <video id="camera-sensor"> element as child with the

#video-container {
  line-height: 0;
  position: absolute;
  width: inherit !important;
  height: inherit !important;
  overflow: hidden;
}

#camera--sensor {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: auto;
  height: inherit;
  width: inherit;
  object-fit: cover;
  overflow: hidden;
}