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

Подписаться 3 тыс.

Просмотров 3,2 тыс.

50% 1

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

Наука

Опубликовано:

24 ноя 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 26

@adertovar5174 16 дней назад

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 16 дней назад

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.

@johnnyknoksvilii5559 3 месяца назад

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 3 месяца назад

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.

@alimohdbilalraza 6 месяцев назад

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 6 месяцев назад

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 5 месяцев назад

@@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 5 месяцев назад

@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 4 месяца назад

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 4 месяца назад

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

@cristiantomasz1 4 месяца назад

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

@noelrecords-programming 4 месяца назад

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 4 месяца назад

@@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 4 месяца назад

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 2 месяца назад

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 2 месяца назад

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 2 месяца назад

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

@noelrecords-programming 2 месяца назад

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 2 месяца назад

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

@noelrecords-programming 2 месяца назад

Great!!

@puddingcjai 2 месяца назад

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 2 месяца назад

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

@puddingcjai 2 месяца назад

@@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 2 месяца назад

@@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 2 месяца назад

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.