Set negative z-index of the web video

[iBobik]

Describe the bug Native video is always behind the webview, but web version has video element behind the content, so it does not behave similarly. It also does not have unique class nor id, so it is not easy to fix.

<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black;">
  <video id="video" style="-webkit-transform: scaleX(-1); transform: scaleX(-1); width:100%; height: 100%;" autoplay="true" muted="true" playsinline="true"></video>
</div>

Let's add e.g. z-index: -1000; to the div, so it will behave similarly like on native and helps to develop UI.

To Reproduce Steps to reproduce the behavior:

1. Start scanning
2. See camera video covering all UI

Expected behavior Video will be under all UI. Version 3.0.3

Desktop (please complete the following information):

• OS: macOS
• Browser Safari
• Version 16.4

[thegnuu]

Yeah you are right, the different behaviour is by design and cannot be changed unfortunately. The web implementation is still in a very early beta state, I just merged a PR with a working, but quite minimal implementation. Adding a z-index and an id to the injected video element would be a good idea though. But I am not sure about the future of the web implementation anyways to be honest, since the result compared to the upcoming ml-kit implementation are really bad (QR works, but everything else is horrible).

I tested a few other web-implementation for scanning and the only one I found with decent results uses a WebAssembly implementation of ZBar (https://github.com/undecaf/barcode-detector-polyfill). Unfortunately this is not an option for this plugin, since the license of this implementation won't allow bundling it, so it will require updating the packaging of any app, which would generate massive amounts of issues.

I am thinking about removing the web implementation entirely in v4 and provide proper instructions and a demo application how to implement a web solution outside of this project. The overhead to implement a solution for PWA is not that big in my opinion and we have a lot of issues regarding "bad barcode detection" and we cannot really do anything to "fix" this issue. We had the same issues with the different implementation on Android and iOS but luckily found a solution with ml-kit. This would as well open up the possibility to use whatever plugin you want.

We will think about it, maybe we can as well fix the basic problems with the zxing-js implementation and mark it in the readme as "This will not provide the best results, if you are not happy with the detection try the BarcodeDetector polyfill" as long as BarcodeDetector is not widely available and there are no better web plugins.

[peitschie]

Interestingly, barcode-detector-polyfill has a closed issue some time ago where the author agreed that perhaps bundling was ok: https://github.com/undecaf/barcode-detector-polyfill/issues/2#issuecomment-1093806316

But, they then closed without making the promised changes to the documents or examples...

[thegnuu]

Interesting, somehow I missed that. I will update the linked issue this afternoon :) The ability to use this library for web would be a great addition to this plugin.