Cordova iOS application - Opening a barcode reader causes a new screen to appear on top of the existing screen

After a recent IOS update, when we open the scanner an additional blank screen pops out apart from the regular scanner screen because of which the scanner functionality doesn't work. Refer attached video

Package used: vue-barcode-reader (https://github.com/olefirenko/vue-barcode-reader) Created iOS build in Quasar

<template>
  <q-page class="pages q-pa-none">
    <div class="flex full-width justify-center items-center">
      <div class="neumorphism q-ma-md q-pa-md">
        <q-spinner
          color="primary"
          size="3em"
          :thickness="4"
          v-if="!scanerLoaded"
        />
        <StreamBarcodeReader
          @decode="onDecode"
          @loaded="onLoaded"
        ></StreamBarcodeReader>
      </div>
    </div>

    <div class="barcodePwaInfo neumorphism q-pa-lg">
      {{ result }}
    </div>
  </q-page>
</template>

<script setup>
import { ref } from "vue";
import { StreamBarcodeReader } from "vue-barcode-reader";

const scanedInProgress = ref(false);
const scanerLoaded = ref(false);
const result = ref("");

function onDecode(text) {
  result.value = text;
}
function onLoaded() {
  scanedInProgress.value = false;
  scanerLoaded.value = true;
}

function scanned(result) {
  console.log(result);
}
</script>

Here is the video for the issues (https://github.com/olefirenko/vue-barcode-reader/assets/94589861/a2c7401f-0401-44ab-b3b4-c642f7aafd50)

I have try multiple way but didn't work.

Solution

I encountered a similar issue after a recent iOS update, where opening the scanner would trigger an additional blank screen, rendering the scanner functionality inoperative. After three days of extensive research and development, I experimented with several approaches and finally discovered a solution.

To resolve the issue, add the following line to your config.xml file:

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

This setting allows inline media playback, which seems to mitigate the problem caused by the iOS update. Inline media playback is essential for certain functionalities in Cordova applications, particularly those involving camera or media elements. By enabling this preference, the scanner screen operates correctly without displaying the additional blank screen.

Here is the updated section of config.xml for reference:

<?xml version='1.0' encoding='utf-8'?>
<widget id="your.app.id" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>YourAppName</name>
    <description>Your app description</description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">Your Name</author>
    <preference name="AllowInlineMediaPlayback" value="true" />
    <!-- other configurations -->
</widget>

This solution worked for my setup, which includes vue-barcode-reader, Quasar, Cordova, and Vue 3. If you're facing similar issues, I recommend trying this configuration change.