Cordova: Scanner appears in full screen

[davidjandrey-sv]

Description
When using this feature in a Cordova native app on iOS, the scanner isn't (just) embedded in the DOM as on web, but with it appears a fullscreen overlay with an X in the top left and a mute button in the top right, that doesn't seem to contain scanner functionality. Once that view is closed via the X button, the DOM-embedded scanner is frozen.

We don't want that to happen, we just want it to be integrated into our webpage, just like it works for us in Chrome, Firefox and Safari.
I'm not sure whether this is a bug or a configuration issue, so here's the relevant code snipped from our side:

const configSetup: Html5QrcodeFullConfig = {
    verbose: false,
    formatsToSupport: [
        Html5QrcodeSupportedFormats.QR_CODE,
        Html5QrcodeSupportedFormats.EAN_8,
        Html5QrcodeSupportedFormats.EAN_13,
    ],
}

const configUI: Html5QrcodeCameraScanConfig = {
    fps: 10,
    videoConstraints: {
        height: { min: 720, ideal: 1920, max: 2560 },
        width: { min: 480, ideal: 1080, max: 1440 }, // no idea why this has to be the wrong way around
        facingMode: "environment",
    },
    qrbox: (w, h) => {
        const size = Math.min(w, h) * 0.9
        return {
            width: Math.max(size, 50),
            height: Math.max(size, 50),
        }
    },
}

const scanner = new Html5Qrcode(elementId, configSetup)
await scanner.start(
    { facingMode: "environment" },
    configUI,
    (text, result) => {
        onResult(text, result.result.format?.formatName)
    },
    () => {}
)

(Also for some reason width and height are swapped for the scanner view in DOM)

iOS native (actual behavior):

iOS Safari (expected behavior):

[Michae1Weiss]

Hi,
The issue you're experiencing is due to how <video> tags are handled in Cordova apps on iOS. By default, iOS opens media content using its native media viewer, which causes the fullscreen overlay you're seeing.

Solution

To prevent this and allow inline media playback (so the scanner remains embedded in the DOM as expected), you can modify your config.xml file in your your Cordova project by adding the following line:

<preference name="AllowInlineMediaPlayback" value="true"/>

This setting enables media content to be displayed inline, without triggering the iOS default media viewer.

See Cordova documentation:
https://cordova.apache.org/docs/en/12.x/config_ref/index.html#preference

Testing Environment

I tested this solution on an iPad 10th Gen.

Versions:

• Cordova CLI: 12.0.0
• iOS Platform: 7.1.1
• Xcode: 15.4
• OS: macOS Sonoma 14.5