capacitor

[MohMehrnia]

I used wowza-webrtc-player on Quasar and Capacitor and on the web, PWA is ok but Android native (capacitor) can not show the camera in the video element, how can it be fixed.

My Code

<template>
  <q-page padding>
    <q-card flat>
      <q-card-section class="text-center">
        <p>
          <span class="text-subtitle1 text-purple-10">تعداد فراگیران متصل: </span>
          <span><b v-if="liveStreamInfo" class="text-bold text-purple-10">{{liveStreamInfo.totalConnections}}</b></span>
        </p>
      </q-card-section>
      <q-card-section class="text-center">
        <video ref="publishVideo" width="auto" style="background-color: black;border-radius: 10px" :height="$q.screen.lt.md?'180px':'480px'"
               autoplay playsinline />
      </q-card-section>
      <q-card-actions align="center">
        <q-btn color="purple" label="شروع کلاس" @click="startPublishing" />
        <q-btn color="purple" label="به اشتراک گذاری دسکتاپ" @click="shareDesktop" />
        <q-btn color="purple" label="خاتمه کلاس" @click="stopPublishing" />
      </q-card-actions>
    </q-card>
  </q-page>
</template>

<script setup lang="ts">
import { WowzaWebRTCPlayer } from 'wowza-webrtc-player';

import { ref } from 'vue';
import { useLiveStreamStore } from 'stores/liveStream-store';
import StreamInfo from 'stores/models/StreamInfo';

const liveStream = useLiveStreamStore();
const liveStreamInfo = ref<StreamInfo | undefined>(undefined);

setInterval(async () => {
  liveStreamInfo.value = await liveStream.getStreamInfo() as StreamInfo
}, 5000);

let publishVideo = ref(null);
let player = ref();

const startPublishing = async () => {
  if (publishVideo.value) {
    player.value = new WowzaWebRTCPlayer(publishVideo.value);

    player.value.setConfigurations({
      sdpUrl: 'wss://ssl.sin-platform.ir/webrtc-session.json',
      applicationName: 'live',
      streamName: 'myStream'
    });
    for (const codec of ['42e01f', 'VP9', 'VP8']) {
      try {
        const p = player.value.publish({
          videoConfigs: {
            ...player.value.videoConfigs,
            codec
          }
        });

        player.value.getPeerConnection();
        await p;
        break;

      } catch (e) {
        console.log(e);
      }
    }
  }
};

const stopPublishing = async () => {
  await player.value.stop();
  await player.value.stopLocal();
  player.value = undefined;
};

const shareDesktop = async () => {
  const constraints = { video: true, audio: true };
  const mediaStream = await navigator.mediaDevices.getDisplayMedia(constraints);
  player.value.attachStream(mediaStream);
};
</script>

<style scoped>

</style>