How to Create AR Business Cards Without App Using Free Tools! 【A-Frame, AR.js, Glitch】

This time, I will explain how to create AR business cards.
AR stands for Augmented Reality. It is a technology that overlays virtual information on real images captured by a camera.
Using this AR technology, you can create business cards that display self-introduction or company information when you hold your smartphone camera over them.
This time, I will introduce how to display AR on a web browser. The process involves creating a web application, creating a business card with AR display function, and asking users to access the web application.
The tools used to create AR business cards are A-Frame and AR.js. These tools are free to use and allow you to create 3D virtual spaces on web pages or overlay AR content on the real world using a web camera.
Please watch till the end.
#Programming #NoelRecordsProgrammingLab #AR

[@adertovar5174]

When I open in A-frame "remix the starter example on glitch" it open glitch page with 25 lines, not like 15 lines just you said.. help

[@noelrecords-programming]

I checked the "remix the starter example on Glitch" again, and indeed it has 25 lines. However, upon careful examination, it's clear that the content is the same. The only difference is the placement of line breaks.

[@alimohdbilalraza]

can you make a video on how to make different custom 3d models using A-frame tutorial like making 3d model of human anatomy, solar system etc and using it in webAR

[@noelrecords-programming]

Thank you for your comment. If you like, please subscribe to the channel. What is a custom 3D model? Does it mean importing your own 3D model into A-Frame? If so, it is possible to create a tutorial video on how to import 3D models. However, I am a beginner in creating 3D models, so it is difficult for me to create 3D models of human anatomy or the solar system.

[@user-um2dw5jq1q]

​@@noelrecords-programming yes im talking about importing our own 3d models. for 3d models im also a noob but there are several websites where you can get 3d models for free. and i want to ask if we can use the text editor Visual studio code and not the online which you're using. i want to learn AR please it would be great if you can make a tutorial for 3d models and some information around that model. i want to pass my exams

[@noelrecords-programming]

@user-um2dw5jq1q If you like, please support us by subscribing to the channel and hitting the like button. Are @alimohdbilalraza and you the same person? A-Frame and AR.js are Javascript libraries, so you can use them without Glitch. You can also use Visual Studio Code as a text editor. However, you need to publish the web application you created on the internet. You need to set up your own server or rent a server. I am planning to make a tutorial video on how to import 3D models, but I am scheduled to be hospitalized this month, so I can’t create it right away. Importing 3D models itself should not be difficult, so you should be able to do it if you read the documentation. Good luck!

[@akbardarmawan8387]

you can't make 3d models in A-frame (as far as i know im also still learning) you need other 3d model maker to do that and make a gltf file out of the model

[@noelrecords-programming]

That’s right. I think the questioner is not asking how to make a 3D model, but how to place a 3D mode

[@gamingwithchandra313]

how can i make those icons redirect the use to the URL i want ???

[@malarchieve6070]

Why my image appear black when i scan the marker?

[@noelrecords-programming]

The project I created is functioning correctly. Since I’m not sure about your development environment, I can’t say for certain, but there are two possibilities: • The code is incorrect. • You are using a browser other than Chrome or Safari. Regarding the second point, as mentioned in the video, the project did not work correctly on the Microsoft Edge browser. Please try using a different browser. If the same issue occurs, please thoroughly check if the code is correct.

[@IndianGadgetGuru]

can i use image to track instead of qr code?

[@noelrecords-programming]

Of course, it is possible.

[@IndianGadgetGuru]

@@noelrecords-programming same way right?

[@noelrecords-programming]

Yes! See my video!!

[@IndianGadgetGuru]

@@noelrecords-programming actually i have printed a 3d model and i want to show ar pop up upon that

[@noelrecords-programming]

Do you want to display AR on top of a 3D model instead of a marker image?

[@johnnyknoksvilii5559]

I need my app to read the value from QR-code that is placed on market and after that to place an object on top of it. Can you tell me if it is possible to do with AR.JS? Great video, thank you!

[@noelrecords-programming]

You cannot create AR with QR codes that were not made with Marker Training. However, I believe the app you want to create can be realized with Marker Training.

[@gamingwithchandra313]

how can i make GLB icon clickable and use them to redirect to the URL i want ???

[@noelrecords-programming]

The GLB file is a file format for 3D models, right? This video does not explain how to handle 3D models. I plan to create a tutorial video on how to handle 3D models in the near future.

[@cristiantomasz1]

How can it be done to improve the image stabilization, since it vibrates a lot

[@noelrecords-programming]

When using a smartphone camera for augmented reality (AR), camera shake is often an issue. Currently, there are a few strategies to mitigate this problem: Use a Tripod: Consider using a tripod to stabilize your smartphone. A tripod provides a stable base and minimizes hand tremors during AR capture. Opt for Phones with Effective Image Stabilization: Some smartphones come equipped with robust image stabilization features. These can significantly reduce camera shake, especially during handheld shooting. Be Mindful of Lighting Conditions: Adequate lighting is crucial for clear AR images. Avoid low-light situations, as longer exposure times can exacerbate camera shake. Remember that while these strategies can help, achieving optimal stability in AR photography often requires a combination of techniques and practice.

[@cristiantomasz1]

@@noelrecords-programming But the issue is not on the cell phone, but rather the image that appears in AR vibrates as if it cannot accommodate itself to the surface and is seeking to balance itself in one place. In your example it happens 0.22 sec, (what you do is still great), but I wanted to know if a code can be added so that the image in AR remains more stable and is not trying to rearrange itself all the time. I hope you explained it to me. THANK A LOT AGAIN

[@noelrecords-programming]

I see, it’s very easy to create AR using A-Frame and AR.js, but as far as I checked the documentation, there doesn’t seem to be an option to stabilize without vibration. There might be a technique to stabilize it, but I don’t know. I’m sorry.

[@KlaasvanTuil-dq6zi]

Thanks for the tutorial! I've a problem. When I scan the QR code with my phone the camera is zoomed in all the way. How can I prevent this?

[@noelrecords-programming]

Thank you for your comment. I haven’t come across this issue before. Have you tried it on a different phone? If the problem persists across multiple phones, it might be an issue with the program itself. However, if it’s only happening on your phone, then the issue might be with your device.

[@KlaasvanTuil-dq6zi]

@@noelrecords-programming Heey, I noticed that it only does that with the samsung browser and not with google Chrome.

[@noelrecords-programming]

If the issue is exclusive to the Samsung browser, it would be best to consult with an expert. Alternatively, if it’s possible, you might want to consider using a different browser, such as Chrome.

[@KlaasvanTuil-dq6zi]

@@noelrecords-programming Heeey, ive found a solution to get it right in the samsung browser with a line of code

[@noelrecords-programming]

Great!!

[@puddingcjai]

My project shows “Unity has not started sending image data [Capture Device #1] After I done for several days, do you know why ? And how to solve it ? Thank you 😢

[@noelrecords-programming]

Your VR seems to be made with Unity. I think this video is unrelated.

[@puddingcjai]

@@noelrecords-programming but I just follow your steps. I’m fine with the first day , but the error occurred when I open again after few days 🥲

[@puddingcjai]

@@noelrecords-programming but I just followed your steps. It works at the beginning, and after a few days , I look into this project again, it cannot show the preview , and the code is no longer valid 🥲

[@noelrecords-programming]

I get that everything was running smoothly at first, but then it stopped working after a few days. I’m actually developing AR using A-Frame, AR.js, and Glitch, and it’s functioning without any issues. It’s likely that some changes were made to the code or your PC or mobile device. I understand it can be a bit of a pain, but I’d recommend going through each step again while watching the video. Keep in mind, if you’re following the steps in my video and using A-Frame, AR.js, and Glitch, Unity isn’t involved, so the error you’re experiencing shouldn’t occur. If the error persists even after revisiting the video and checking the code, it would be helpful if you could share the Glitch project you’ve created, if possible. That might give me some insight into what’s happening.