<video> seems to get visibility:hidden; after change tab and back.

[notalentgeek]

Here are my HTML.

<div id="video_container" style="align-items:center;display:flex;height:100%;justify-content:center;margin-bottom:0px;margin-left:0px;margin-right:0px;margin-top:2.5px;overflow:hidden;">
  <video id="video" width="50%" autoplay loop muted preload></video>
</div>

I am using the example codes.

let scanner = new Instascan.Scanner({ video: document.getElementById('video') });
scanner.addListener('scan', function (content) {
  console.log(content);
});
Instascan.Camera.getCameras().then(function (cameras) {
  if (cameras.length > 0) {
    scanner.start(cameras[0]);
  } else {
    console.error('No cameras found.');
  }
}).catch(function (e) {
  console.error(e);
});

Here is animated .gif of the problem. After I change tab (twice) the <video> gone although the DOM is still the same.

The screen shot of the <video> when it is gone.

[notalentgeek]

Further doing, commenting //scanner.start(cameras[0]); remove the problem but also the QR scanner. What to do?

[notalentgeek]

I use this QR reader along with face detection from TrackingJS. If I deactivate face tracking from TrackingJS the problem is gone.

What is my workaround if I need both face and QR detection?

[notalentgeek]

Are these codes the culprit?

  _disableScan() {
    this.video.src = ''"

It makes the src goes unknown.

[notalentgeek]

Alright, my bad... backgroundScan:true, fixes this.

[schmich]

@notalentgeek Yep, sorry, just saw this issue. By default, scanning is disabled when the tab is not focused to save on CPU/power consumption, but you found the flag to disable that behavior.