Compatibility - [Windows] [Firefox] - [Request Camera Permissions]

[starcccAAA]

In Firefox, if you put the div into the html <form> tag, the Request Camera Permissions button will not working. you will always get a new page with input name in url.

[mebjas]

Ah this is interesting, thanks for raising this. To double confirm this is happening by using Html5QrcodeScanner class right?

[BitPoet]

I just stumbled over this issue and can confirm that it happens using Html5QrcodeScanner.

[Irata]

I can also confirm this issue is happening with FireFox and not on Chrome or Edge in a Windows 10 desktop environment using the sample code for HTML.

If the following <div> is placed inside the <form></form> <div id="qr-reader" style="width:500px"></div> and you press the 'Start Scanning' button the Firefox permission box displays for the Camera, however the permission box then closes and the page Reloads.

If you move the above <div id="qr-reader" style="width:500px"></div> outside the <form> and select 'Start Scanning' the permission box will appear and stay there giving you the chance Allow its use as expected.

If you then move the <div> back inside the <form> and select 'Start Scanning' the permission box doesn't appear, I expect because you have already given permission, and then the page Reloads.

I suspect the issue isn't really related to the Camera or permissions as such but something in the way Firefox processes a Form is slightly different to the other Browsers.

The problem could be resolved by an obvious documentation change in the smaples highlighting not to include the <div> inside at the <form>

[Irata]

I have found the same issue and the fix is mentioned in the discussions here, https://github.com/mebjas/html5-qrcode/discussions/413