A-Frame AR.js on android portrait mode not showing in place

[hsj63]

I am developing a webAR using AR-js and A-frame, works perfectly with iPhone in landscape and portrait mode BUT in android only in landscape, when in portrait all augmented reality is not shown on the trigger image (Image Target ), appears shifted sideways and quite unsteadily. Is there any way to fix this?

I'm using a template based on the example at https://medium.com/swlh/ar-js-the-simplest-way-to-get-cross-browser-augmented-reality-on-the-web-10cbc721debc:

Thanks in advance for any help because I've been trying to solve this for weeks! :(

[peterhintondesign]

I'm having the same issue (see thread #596), no fix yet.

I've found that it's only a few Android devices that have the issues, the majority still work in portrait.

[hsj63]

The whole problem is caused when EMBEDDED component is present in a-scene, without it all augmented reality is centered on the marker. however the aspect ratio is completely lost, even adapting width and height, it becomes unstable, and will be shown differently on various screen sizes. This only happens with Android.

This centralization issue is also reported in thread #580

There must be a way to equalize this but I didn't find it, I even tested it with one of the latest AR.js versions 2.0.1 and the problem was not solved.

[peterhintondesign]

When I get some time free I'm going to try changing A-Frame to ThreeJS to see whether that resolves the issue.

[Darrel-Collinsworth]

Cool! I was worried I was the only person getting this issue. Do you guys have an issue where you'll get a console error saying "Device not recognized" and it cannot resize the frame so it creates a weird jittery motion and constantly is loading?

[yeahdino]

I've had similar issues. Positions/rotations vary across different mobile browsers on at least android, and Y coordinates are offset on PC. Downgrading to A-Frame 0.8.2 seems to fix it.

Edit: If the downgrade works, this was the solution to my original problem: #498.

A-frame 1.0.0 works for me now. I have my scene entities inside of <a-marker-camera> tags, instead of how that Medium article marks things up.

[hsj63]

Hi yeahdino and everyone, I'm back on this project and updated it to A-Frame 1.0.3.min and aframe-ar-2.1.8.min, then I tried it the way you mentioned, putting my entities inside the <a-marker -camera>, instead at the end, but unfortunately I couldn't solve the problem. I don't know if I'm doing something wrong... Could please provide any simple example how to accomplish that?

Also, when I have EMBEDDED component to <a-scene>, to ensure more stability and correct aspect ratio, it also cause problems with the size of other elements divs (menu and etc), shrinking them to tiny sizes, this only happens in Android in portrait mode, not in PC or IOS.

Thanks in advance!

[hsj63]

Part of my latest code:

<a-scene embedded loading-screen="dotsColor: white; backgroundColor: #2AA2B0" vr-mode-ui="enabled: false" arjs='debugUIEnabled:false; patternRatio: 0.90; sourceType: webcam; sourceWidth:1280; sourceHeight:960; displayWidth: 1280; displayHeight: 960; detectionMode: mono_and_matrix; matrixCodeType: 3x3; cameraParametersUrl: camera_para.dat; maxDetectionRate: 10; trackingMethod: best; renderer="logarithmicDepthBuffer: true; precision: high'>

<a-assets><video id="video1" response-type="arraybuffer" loop crossorigin webkit-playsinline playsinline controls><source src="https://www.site.com/video.mp4" class="media"></video></a-assets>

<a-marker-camera preset='custom'>

<a-marker vidhandler emitevents="true" preset='custom' type='pattern' url='pattern-icone_video_1.patt'><a-video video1marker src="#video1" width="2" height="1.18" position="0 0 0" rotation="-90 0 0" scale="1 1 1" color="#FFFFFF" shader="flat" side="front" transparent="true" opacity="1"></a-video></a-marker>

</a-marker-camera>

[kalwalt]

Hi @hsj63 and all Have you tried with a <a-entity camera></a-entity> instead?

[hsj63]

Hi @kalwalt yes I did, that's what I had before. I'm almost giving up on ar.js with a-frame. Thanks.

[nicolocarpignoli]

Hi there, please, re-open issue on the new AR.js repository: https://github.com/AR-js-org/AR.js

thank you