I am developing an ionic angular app and I am trying to add a component that uses an iframe to a html
component.html
<ion-content class="ion-padding" [fullscreen]="true">
<iframe [src]="sanitizedURL" style="position:absolute; width: 100%; height: 100%;" id="cameraFrame"></iframe>
<ion-fab-button color="dark" class="ion-text-center" size="small" (click)="captureImage()" id="capture">
<ion-icon style="fill: white;" name="camera" color="customcolor"></ion-icon>
</ion-fab-button>
</ion-content>
aframe.html
<head>
...
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-look-at-component.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
</head>
...
const latitude = place.location.lat;
const longitude = place.location.lng;
// add place icon
const icon = document.createElement('a-image');
icon.setAttribute('gps-entity-place', `latitude: ${latitude}; longitude: ${longitude}`);
icon.setAttribute('name', place.name);
icon.setAttribute('src', 'https://cdn4.iconfinder.com/data/icons/small-n-flat/24/map-marker-512.png');
// icon.setAttribute('src', './map-marker.png');
icon.setAttribute('scale', '3, 3');
icon.addEventListener('loaded', () => window.dispatchEvent(new CustomEvent('gps-entity-place-loaded')));
scene.appendChild(icon);
...
<body style="margin: 0; overflow: hidden;">
<a-scene vr-mode-ui="enabled: true" raycaster="objects: [gps-entity-place];" arjs="debugUIEnabled: false;" embedded>
<a-camera gps-camera rotation-reader>
</a-camera>
</a-scene>
</body>
It is working as expected on web and even when I open the app as a page like https://localhost:8100/camera from the phone, but it is not showing the marker when I build and deploy the app on a phone. Any idea why this is happening? Is this something that is not supported?
The code is working as expected in a page, but not working in a ionic angular app.