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

[@rizqifadlilah2834]

Mantap pak, kontennya sangat bermanfaat buat para pembelajar😊

[@YaserAliHusen]

Alhamdulillah, Terima kasih

[@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

[@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

[@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.

[@linda_norhan]

Kereennn banget 🎉🎉🎉

[@linda_norhan]

Terima kasih.

[@GedeNingrum-yt4no]

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

[@YaserAliHusen]

Sepertinya belum bisa Om

[@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

[@mnurihzaasyura4362]

Apakah bisa menampilkan beberapa gambar dalam 1 penanda?

[@YaserAliHusen]

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

[@globalwastesolution2055]

Best❤❤❤❤

[@DevTogether_from0]

Can I change image to 3D models

[@YaserAliHusen]

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

[@HadiatSeefulHayat]

Super thanks

[@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

[@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

[@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 :)

[@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

[@PIDOtomasyon]

Thank you for works.

[@YaserAliHusen]

You're welcome!

[@bugkuska]

Thanks

[@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

[@barkahadekurnia9891]

TUTOR BANG

[@YaserAliHusen]

itu tutorialnya, ikuti aja konsep dan langkah2nya

[@barkahadekurnia9891]

nggih maturnuwun bang@@YaserAliHusen