Tutorial: Show Webpage in Augmented Reality using AR.js 🔥🔥

Tutorial Show webpage in Augmented Reality using AR.js
Download Link: drive.google.com/file/d/1fI_e...
Extract to your webserver using WinRar
Find Password in video!
patt marker training (patt generator) link: jeromeetienne.github.io/AR.js...
Consider make simple marker, if failed, you can just copy from github
If you find this content useful, please send me "Super Thanks"
Don't forget to like and subscribe my channel

[@rizqifadlilah2834]

Mantap pak, kontennya sangat bermanfaat buat para pembelajar😊

[@YaserAliHusen]

Alhamdulillah,
Terima kasih

[@linda_norhan]

Kereennn banget 🎉🎉🎉

[@globalwastesolution2055]

Best❤❤❤❤

[@bennguyen1313]

Any thoughts on how difficult it would be to create a BINGO-like AR app that overlays a coin on a specific square in a grid?
For example, if A4 is said/entered, the app would use some marker/fiducial on the page to know how far into the grid it needs to place a coin.. scaling the coin size depending on the angle and how close the camera is to the paper?
And is Flet/Flutter something that could be used for such an app?

[@YaserAliHusen]

Actually this is just simple AR, we cant expect more like application AR.
For complex usage, you can use another AR maker such as unity 3D or Unreal Engine

[@HadiatSeefulHayat]

Super thanks

[@linda_norhan]

Terima kasih.

[@PIDOtomasyon]

Thank you for works.

[@YaserAliHusen]

You're welcome!

[@iot-guru]

Can you export and add the Node-Red flow in the zip as well?

[@YaserAliHusen]

The Node-Red flow is easy, just follow same in the video, only use Launch, URL, Screenshot, and Close Browser then Write File
I have already deleted the flow from my Node-Red

[@bugkuska]

Thanks

[@spreadItWide]

Why wouldn't you just render the actual HTML document as a material shader? I know you said we can't with AR.js, but I know we can with Three.js or A-Frame. This way you can actually interact with the webpage instead of just look at it as an image.

[@YaserAliHusen]

It sounds great.
Did you try it?
Or do you have any reference?
Maybe I can make the video

[@spreadItWide]

@@YaserAliHusen I gotta dig for it, but I'll share. There's a few ways you could do it, I know there's html2canvas, or something along those lines. I'll get back to you on it too. I'm putting video chat in one of my VR/AR apps and need to make the call in 2D, but my scene just calls the 2D as a material to a plane (or any geometry), just need a tick function on the material shader.

[@HuynhLuong227]

i want ask you a question, it's work on ios devices?

[@YaserAliHusen]

Yes,
When accessing, only use browser

[@HuynhLuong227]

@@YaserAliHusen Wwow thanks

[@De_Van001]

How would you go about opening the html on your phone?

[@YaserAliHusen]

access the html page of your server in browser.
Did you watch the video till the end?

[@De_Van001]

I watched the video 4 times full 😂 am I missing something

[@YaserAliHusen]

@@De_Van001, I mentioned in video the steps starting from webserver using apache or another, and put the html code on server, then access the html page from browser, you can use a smartphone or tablet within same network of server

[@kevs_404]

thanks bro, but i do have a question is it possible to display multiple images in ar.js?

[@YaserAliHusen]

Do you mean multiple marker?
Yes, in my example I use multiple marker for multiple images.
1 marker for a image

[@kevs_404]

@@YaserAliHusen how can i convert png image to patt file format bro

[@YaserAliHusen]

Please see in my Video Description link for marker training @@kevs_404

[@kevs_404]

does the sizing of printed image affect the ar bro? because I have an issue that the plane will not appear

[@YaserAliHusen]

@@kevs_404, you can try use marker from github instead generated your own, for testing

[@DevTogether_from0]

Can I change image to 3D models

[@YaserAliHusen]

Yes, you can use 3d model, just visit their github page

[@GedeNingrum-yt4no]

bangg apakah ar pake ar.js bisa interaktif juga? seperti dikasih annotation dan suara?

[@YaserAliHusen]

Sepertinya belum bisa Om

[@user-jx9xz7mt2z]

is this could be achieved in flutter ?

[@YaserAliHusen]

I don't use flutter,
Only use notepad as editor
I don't know it can be used in flutter

[@mnurihzaasyura4362]

Apakah bisa menampilkan beberapa gambar dalam 1 penanda?

[@YaserAliHusen]

Belum pernah coba, mungkin bsia ditambahkan elementnya lagi, tambah plane element.
Coba saja!

[@mnurihzaasyura4362]

Apa tampilan ar tersebut dapat menampilkan google?

[@YaserAliHusen]

Bisa, tinggal discreenshot googlenya.
jadi sebenarnya ini menampilkan screenshot

[@mnurihzaasyura4362]

@@YaserAliHusen untuk yang video yang anda buat bgaiamana caranya agar angka dan tulisannya bisa berubah2

[@VWTesla]

I couldn't find the password in the video

[@YaserAliHusen]

Please watch the video till the end, don't skip😉😉

[@VWTesla]

@@YaserAliHusen Thanks! I missed it the first few times because there was something else on my screen but I got it. Found a typo when I typed in the HTML myself so thanks! I'm all sorted :)

[@barkahadekurnia9891]

TUTOR BANG

[@YaserAliHusen]

itu tutorialnya, ikuti aja konsep dan langkah2nya

[@barkahadekurnia9891]

nggih maturnuwun bang@@YaserAliHusen

[@mnurihzaasyura4362]

Bagaimana cara mengambil text htmlnya

[@YaserAliHusen]

semua kode ada di link di video description

[@mnurihzaasyura4362]

Bisa di buatkan video bgaimana cara mengaksesnya dengan kamera hp

[@mnurihzaasyura4362]

Dan bisakah di jelaskan cara mengubah penanda hiro jadi barcode

[@YaserAliHusen]

@@mnurihzaasyura4362 , caranya hanya dengan mengakses IP address server yang menjalankan ARJS

[@YaserAliHusen]

@@mnurihzaasyura4362 , untuk mengubah barcode menjadi marker ada marker generatornya bisa dilihat pada github atau official website ARJS, tetapi menurut pengalaman saya, jika terlalu rumit akan sulit untuk dideteksi