Web-AR Image Tracking AR Application in just 10 minutes(Brand New Way - 2021)

A Simple Tutorial of WebAR(No QR code, use Full-Size image marker) with AR.js and nearly no coding is required, without any paid plugin used.
Join us on discord : / discord
With zero knowledge of web technologies, you can achieve this.
WebAR is the next big thing in Augmented Reality usage because it needs no application and no hardware support. :)
Start developing applications with WebAR in a simple way.
Find all the required links and Github repository in the below link.
Please support us with patreon.com so what we can create more useful AR content.
----------------------------------------------------------
Link: / allinreality
-----------------------------------------------------------
Github Project :
------------------
github.com/allinreality/ARjs_...
------------------
AR.js Documentation & Sample Projects:
------------------------------------------------
Docs - ar-js-org.github.io/AR.js-Docs/
Examples - github.com/AR-js-org/AR.js
Trex Image link:
--------------------
Link - arjs-cors-proxy.herokuapp.com...
--------------------
Glitch.com & Git-Hack.com links:
--------------------------------------
Glitch - glitch.com (for hosting the application to use free of cost )
Git-Hack - raw.githack.com/ (for using the git URL in the project)
Please, Link, Share and Subscribe the Channel
#WebAR #AR.js #AR #AugmentedReality

[@prashantdesani]

I loved this video. Looking forward to more tutorials on this topic like WebAR.

[@allinreality]

Its our pleasure that you liked it. Surely you will see lot of related content going forward. Please do subscribe to our channel 😉

[@LostinanimeOtaku]

Can't thank you enough. Very helpful!

[@CLOVERAQUA]

Thanks! I struggle a lot in changing the image tracker, thank you so much

[@allinreality]

Happy to help!

[@nickvandewiel64]

Hello, nice tutorial! But i'm keep getting the 'Loading, please wait...' error. Any solutions?

[@mrdxiong]

I was able to make my Entity show up from image scan, but the Entity shakes. Position isn't stable. Do you know how to work around that? I've uploaded many GLTF files and they all do the same. I noticed your video file shakes as well after scanning the T-Rex.

[@Lala-lu7xd]

Hi! I am working on integrating audio with an image marker, but haven't been successful. Please post a tutorial

[@mauriciocardonalinero2549]

Que buen tutorial. Muy útil. No sabia como subir los archivos descriptores de imagen y obtener la URL para el nft . Ningún tutorial enseña como hacerlo . Gracias y ojalá subieran mas videos sobre webar y AR.js. What a good tutorial. Very useful. I didn't know how to upload the image descriptor files and get the nft´s URL . No tutorial teaches how to do it. Thanks. Hopefully you can upload more videos about webar and AR.js

[@allinreality]

Thank you so much ❤️

[@luchoescobar]

Thanks for the tutorial I made it work but not working in IOS for iphone X usign safari and also chrome. I just doesnt show the experience. In android works fine

[@josevelasco2197]

amazing!

[@_adilme]

Hi, can you help me, when I try to download the code you wrote from github, it doesn't work, can you tell me the reason

[@josevelasco2197]

I am getting webcam error message, I can not see it in my phone neither, any ideas?

[@pv7814]

Excellent video! Can I create the same , but using a Qr code instead of a reference image?

[@allinreality]

Obviously yes, We are creating a video based on QR code too. Will be available in couple of days

[@Ikaruster]

Hi, Thank you for the great tutorial. However, I am having problem with this. When I try to open glitch link, it shows error "Request the mobile version of this site to enjoy it in immersive mode", do you have any idea how to fix this?

[@allinreality]

I will check the project and get back to you mate, anyway you are facing this in which model please elaborate. Thanks

[@pedronan5938]

Excellent tutorial! It works with the trex image in the example, but when I change this image to a custom one it does not work and the application gets stuck in the message of "loading, please wait" and never moves from here. Any idea how to fix it?

[@alwihasan8680]

same problem

[@jaydeepranpara8945]

Did you find the solution?

[@elyarmohammadzadeh5565]

I have this problem as well.

[@chase1116]

This example was helpful, thank you. But I want to know, how do I get the video to be positioned directly on the image?

[@allinreality]

Please reach us in discord channel

[@chase1116]

@@allinreality will do so👍🏻

[@ivanchl]

Doesn't work anymore. Something have changed in the repository, it only stops at the "Loading, Please wait" and that's it.

[@wilsondaniel4430]

yes i'm also getting same . did you find any solution?

[@iamloner5147]

Same here tooooo

[@dinogoh7216]

Hi, This is great..how can I play more video with different image marker? Example, I need two different image marker and play two different video.appreciated if you can help..thank

[@allinreality]

Surely, Just duplicate the lines of code for one more marker & video and repeat the process for those too

[@vee4681]

Thanks for the video. I have problem playing sound on my clip. How to fix it?

[@allinreality]

Let me check

[@gedekeresnadi]

Hi, thank you for the tutorial. But I have a question, how to enable sounds of the video?. The video able to play on my AR but there's no audio. Anybody can help me? (Edited) I already solve it. Just delete the muted statement. Thanks guys

[@allinreality]

Sorry for the late response. Thats the right way

[@asst.prof.lindaintralak4947]

Thanks for sharing. possible to change from vdo to 3d model?

[@allinreality]

Yes for sure you can upload gltF format 3d model

[@alepereira5627]

I get a "loading, please wait message...". But nothing loads, I don't have any errors ... how ever long I leave it. What could I do to fix it ? Also, in the first part of the video you use an image of trex, have you already uploaded and created a marker with it ? Is that how it works out of the box?

[@allinreality]

I will check the project and get back to you mate

[@camisc99]

@@allinreality I have the same problem with the loading message!

[@pedronan5938]

I have the same problem, the application is stuck in the message of "loading, please wait" and never moves from here. I am not using trex image but creating my own...

[@bijalpatel3364]

Yes i am facing the same issue.

[@jaydeepranpara8945]

Did you find the solution?

[@AryanKumar-it7gn]

how to creat a QR code shows AR visuals after scanning

[@fedeout]

Thanks for the video, reaally helpful. I didnt try it yet, but I am wondering if it would also work with multiple image targets. Like copying and pasting the line multiple times?

[@allinreality]

Yea it should work, even you can create UI to select the images accordingly.

[@john90135]

Will the link work for both Android and iOS

[@daltonsessumes2495]

The only image target I could get to work was the trex example provided. I followed the steps to create the reference files for my own image, but the website only shows "loading, please wait..." with any other image targets

[@daltonsessumes2495]

My problem was that my github repository hosting the reference image files was private. I turned it to public, and now I can get past the "loading, please wait" screen

[@elyarmohammadzadeh5565]

@@daltonsessumes2495 Hi...my repo is already public, but I've still stuck with this problem

[@huibertdejong_norway]

Thank you

[@allinreality]

Thanks alot for the support, please do subscribe and press the Bell icon for more AR related content

[@mohamadrandiandika933]

so helpful...

[@martinc2772]

a question, how can the video be stabilized? i have trembling problem. I would like to fix it. Thank you!

[@allinreality]

Which part?

[@martinc2772]

@@allinreality when the video appears, it shakes

[@luchoescobar]

Yep its jumping everywhere, theres has to be something to smoth the animation or getting slower

[@albertomatias8815]

Hi! Great video!! I just have one question.. How can I stabilized the video? It shakes a lot! Thank you!!

[@allinreality]

Let me check

[@user-tu9lg2xl7t]

same problem:(

[@Shreyash-j9u]

Hello. This is a great video but when I tried opening the live app with the link, it just shows "Loading, please wait..." for an unusually long time.

[@ankanghosh9837]

same here please let me know if faund any way I also will let you know

[@anahorn.]

Who made this worked could help me pls? fot me didnt worked :(

[@waxers123456789]

The camera is accepted, however there is text saying "loading, please wait..." any idea what could be causing this and how I might fix it?

[@allinreality]

Could you, Please let me know which mobile hand set you are using ? or from Web ?

[@LostinanimeOtaku]

It is a glitch thing. If you have the boosted version, it will not come. You just have to wait for like 5 to 10 seconds and it will work.

[@jaydeepranpara8945]

@@LostinanimeOtaku dont have boosted version but it doesnt work even after 5 min

[@rehanahmad1012]

Thanks a lot for this wonderful tutorial. Everything is working fine for me except that I cannot hear the sound from the video that is playing. i used .mp4 format for the video. I'm running it on chrome browser from my android 10 phone.

[@allinreality]

We already solved it. Just delete the muted statement.

[@rehanahmad1012]

@@allinreality Yes it worked for me Thanks

[@shafiqurrehman6184]

Cost kiyni ati h isko bnany m

[@shahbazkhan471]

It is workable only for sampleMarker and trex image, it's not working for my own image. Could you please help me with this?

[@allinreality]

Please use this NFT marker creator carnaux.github.io/NFT-Marker-Creator/ and it will generate the .fset, .fset3, .iset files. Upload them into GitHub repo/ any location to refer from the code. Kindly follow the tutorial and convert the link using GitHack and paste it in the code. It should work 😊 if you follow this steps

[@shahbazkhan471]

@@allinreality I did same and i have gone through the tutorial it's really amazing but i don't know why it's not working in my case😔

[@allinreality]

@@shahbazkhan471 Please find an image which has many color's as possible for better image recognition.

[@fioalmaedi2993]

Hi thanks for this video, it works great but my video doesn't seem to autoplay? Do you know what could be fixed?

[@mahesh526babu7]

Own image tracking is not working please can u check once I tried

[@allinreality]

It will work with more Colors and details. Let me check and see

[@AskeKnudsen]

I built a version based on your example and it worked, but now it doesn't. Since the official example doesn't work either (ar-js-org.github.io/AR.js-Docs/image-tracking/ ) I assume it's due to some update in the library. The issue with loading the libraries from source and not ones own copy is that with updates to the library your application may not continue to work with future updates. Can you show us how to find a working version of the library / example, and then how to use one's own copy of a working library version instead. To ensure that ones application continues working? Btw. Great video, explained a few things I was missing. I appreciate that :)

[@allinreality]

The libraries are working fine. Because the application which we have built for video is still working perfectly fine. Maybe there is an issue with the Image Target you are using. In order to fix this please use Image Target's URL from our example (Trex/SampleARMarker1 - which are available in our GIT repo) and test the application. Let us know the findings so that we could help you. Git Repo - github.com/allinreality/ARjs_ImageMarker Image URL' s - Trex - arjs-cors-proxy.herokuapp.com/raw.githack.com/allinreality/ARjs_ImageMarker/master/trex SampleARMarker1 - arjs-cors-proxy.herokuapp.com/raw.githack.com/allinreality/ARjs_ImageMarker/master/SampleARMarker1

[@AskeKnudsen]

@@allinreality Thank you for the support. Hmm... It did work fine with my version but then the day after it stopped working. When I get a chance I'll try out your suggestion.

[@allinreality]

A Subscribe & Like would be very helpful and amazing 😀

[@devmelife]

how to center the video ?

[@allinreality]

Please change the position and rotation values in script that should help

[@wahidhasyim3806]

Should i add arjs-cors-proxy.herokuapp.com/ if i hosted my nft in my own hosting? coz when i visit it, heroku said "There's nothing here, yet."

[@allinreality]

You have to address your assets as well

[@allinreality]

Either from ur file server or githack you can provide URL

[@shahbazkhan471]

Trex image link is not working.

[@allinreality]

Please use this Link in url = "arjs-cors-proxy.herokuapp.com/raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex"

[@allinreality]

Please find the image file here - github.com/allinreality/ARjs_ImageMarker/blob/master/trex-image-big.jpeg . You can save as the file and use for the target

[@shahbazkhan471]

@@allinreality Thanks, I got it

[@shahbazkhan471]

@@allinreality This link is still not working

[@allinreality]

Could you please tell me what's the exact issue you are facing so that I can help you with ?

[@vamsikrishna-my5wv]

👍

[@allinreality]

Thank you Mate

[@macrumpton]

Useful content, but it sounds like you are shouting down a 3" pipe.

[@allinreality]

Sorry for that bad quality 😔

[@asurstark]

NFT Creator is taking too long to respond!!

[@bassleveler]

I get a "loading, please wait message...". But nothing loads, I don't have any errors ... how ever long I leave it. What could I do to fix it ? Also, in the first part of the video you use an image of trex, have you already uploaded and created a marker with it ? Is that how it works out of the box?

[@allinreality]

I will check the project and get back to you mate

[@roqueiroz6]

I had the same problem friend!!! did you fix?

[@jaydeepranpara8945]

any way to solve the said problem?

[@prashant_jain]

​@@jaydeepranpara8945 waiting for solution to this exact issue.

[@prashant_jain]

@@allinreality ​waiting for solution to this exact issue.