Compatibility Issue - [iOS 17.2.3] [Safari] - Only black screen is visible once camera permission is given.

[rpshah]

Describe the bug
I am using v2.3.8 to scan QR codes. It is wrapped in angularJs v1.7. It is working fine on desktop browsers, android mobile browsers, and Android apps. It was working on iOS also previously. But for the last month, it has stopped working on the iPhone Safari browser as well as on the iPhone app.

Here is the code:
var html5QrCode; html5QrCode = new Html5Qrcode("reader"); var config = { fps: 30, qrbox: { width: 250, height: 250 }, aspectRatio: 1.777778 }; html5QrCode.start({ facingMode: "environment" }, config, function(a,b){ console.log(a,b); }, function(err){ console.log('QR CODE ERROR', err); });

Describe the browser:

• OS: [iOS 17.2.3] [Safari]

Screenshots

Additional context
I have tried Html5QrcodeScanner as well as different aspect ratios, but it is not working. If I click on the cross button in the black screen then it shows the last captured frame of the camera. One weird thing is even a black screen is there, if I place a QR code in front of the camera it prints results in the console. So, the screen is blank but scanning is working in the background.

[simon-aschemeier]

This is not a failure in the qr code scanner script but the buggy auto-fullscreen feature of iOS. Since iOS 17.2 the maximized view is black while in the background the camera is still working. Add "displayinline" to your video div and allow inlinemediaplayback in your wkwebview in ios app.