search

AR-js-org / AR.js

Image tracking, Location Based AR, Marker tracking. All on the Web.
MIT License
5.47k stars 931 forks source link

Image Tracking based WebAR using AR.js and A-Frame isn't working properly #338

Open gbhanuteja23 opened 3 years ago

gbhanuteja23 commented 3 years ago

Today I tried Image Tracking based WebAR using A-Frame and AR.js, I have followed the AR.js documentation as shown here:- https://ar-js-org.github.io/AR.js-Docs/image-tracking/ and the samples by AR.js on GitHub to create my project, but it's not working as expected. It just shows this Loading message that is there in the body and in the background, it accesses the Camera of the device but it's not tracking the Image Descriptor. Why is it happening like that? I have tried the live(hosted) example by AR.js, in that also the same issue was there

My hosted project:- https://g-bhanuteja.me/Image_Tracking_WebAR/

Image Target for the project:-

https://github.com/gbhanuteja23/Image_Tracking_WebAR/blob/main/Project%20Files/Image%20Target.png

index.html of my Project:- https://github.com/gbhanuteja23/Image_Tracking_WebAR/blob/main/index.html

Issue_1

Whereas I had once again tried the Demo WebAR project that I had made using ARWT SDK using which WebAR projects can be developed using Unity itself, it's working perfectly ( It also uses A-Frame and AR.js internally but it's working )

Reference Image:-
Refrence_Working_ARWT

Phone Model:-

Motorola One Fusion Plus and Samsung Galaxy M20

brandon-verastegui commented 3 years ago

Hi I had the same issue, so would you suggest to use ARWT instead of AR.js package? I am using unity and I've been trying to find a way to image training for AR experiences but I've only found marker target. How did you train your image when you used ARWT?

kalwalt commented 2 years ago

Hi @gbhanuteja23 have you seen the messages in the console log? They are Cors errors because as described in the README.md:

Important! Be aware that if you are referring to external resources, in any app, especially those using NFT, you will encounter CORS problems if those resources are not in the same server of the code. If you can’t see the tracking, please open your Browser Dev Tools and check if you have CORS errors in the console. If so, you have to fix those errors in order to see your content. The correct fix is to place your resources on the same server of your code.

If you cannot do that, you can host a proxy anywhere server to solve that (https://github.com/Rob--W/cors-anywhere). Please note that several hosting services have policies that does not permit to use such server. Always check hosting services policies before using them to avoid account suspensions

Fix them and it will works.