If you found this video helpful, please consider supporting me with a Super Thanks! Just click the 💖 button below this video. It’s like buying me a coffee and helps me keep creating! Thanks a lot! I'm also selling the source code for the program explained in this video. Check it out here: noelrecords.base.shop/items/94810197
you are an Angel that God has sent! this is the tutorial I have been seeking for so long! Every other tutorial I see is either uploaded as android apps or completely unusable in any other way than their build in apps. Being able to make a proper AR business card is what i need, no more third party apps to see the actual presentation. Well, i need to learn some coding too for this one. Well, I have a question first.. does the 3D object, if by any chances can be animated first or it will be a static 3D object float? By the way, thank you so much for the guide on how to make AR business card! It really helps me so much :3
Thank you for your comment. Coding itself isn’t too difficult, so I encourage you to follow the tutorial carefully and do your best while watching out for typos and errors! As for your question, what exactly do you mean by a 3D object? If you’re referring to a 3D model that isn’t covered in this tutorial, I have to admit I haven’t yet tried displaying 3D models in VR, so I’m not sure about it. However, I think you might find some answers by referring to the official documentation.
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
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.
@@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
@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!
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
Please HELP! I have been through this tutorial three times and still can't get it to work for me. When I scan my QR and give it permission to use camera and motion sensor, I DO NOT get a cube on top of the code. I have done everything directed and even wrote the steps down. What am I doing wrong? I desperately want this to work for me. Thank you.
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. In many cases, unexpected spelling mistakes have been the cause of the issue.
@@noelrecords-programming thank you for your response. I am using Safari. I’ll try again using Chrome. Thank you too for the great tutorial. I have no doubt that the problem is with my implementation.
The browser doesn't seem to be the issue. This means that either the code is incorrect or the creation of the marker image has failed. Especially in cases where a spelling mistake is the cause, it can be hard to spot due to preconceived notions, but please hang in there and review it carefully!
hello. thanks for the video. I have a question... I would like to use different buttons for social networks, but I don't know how to make them click on the button and not on the entity or the marker :( I need help
If you add the link option inside the a-image tag, like in my video, it should work. Regular HTML buttons or a tags likely won’t work correctly in this context.
Regardless of the library being used this time, it seems that AR generally allows users to click on objects that are directly in front of them, or at the center of the screen. Therefore, when using multiple a-image tags, you will need to move the camera so that the target a-image tag is positioned in the center of the screen.
That’s because it’s AR. Generally, AR is built based on the human point of view, so it seems that the tap doesn’t respond when the target of the click isn’t at the center of the screen, which aligns with the user’s viewpoint.
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.
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!
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.
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.
@@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
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.
I have reviewed my project, and it is working without any issues. Please check the following again: • For iPhone, use Safari, and for Android, use Chrome. • Make sure the markers are created correctly. • Verify that the program code is correct. In many cases, typos or spelling mistakes are often the cause.
@noelrecords-programming thank you so much for your reply, I did it twice , now I will do it again for third time and I will make sure that everything is correct , then I will get back to you 🤗
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.
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.
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.
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.
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 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 🥲
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.
If you found this video helpful, please consider supporting me with a Super Thanks! Just click the 💖 button below this video. It’s like buying me a coffee and helps me keep creating! Thanks a lot!
I'm also selling the source code for the program explained in this video.
Check it out here:
noelrecords.base.shop/items/94810197
You did better than anybody that I can look at.
Thank you! I’ll be posting more English videos from now on, so please subscribe to my channel!
you are an Angel that God has sent! this is the tutorial I have been seeking for so long! Every other tutorial I see is either uploaded as android apps or completely unusable in any other way than their build in apps.
Being able to make a proper AR business card is what i need, no more third party apps to see the actual presentation. Well, i need to learn some coding too for this one.
Well, I have a question first.. does the 3D object, if by any chances can be animated first or it will be a static 3D object float?
By the way, thank you so much for the guide on how to make AR business card! It really helps me so much :3
Thank you for your comment.
Coding itself isn’t too difficult, so I encourage you to follow the tutorial carefully and do your best while watching out for typos and errors!
As for your question, what exactly do you mean by a 3D object?
If you’re referring to a 3D model that isn’t covered in this tutorial, I have to admit I haven’t yet tried displaying 3D models in VR, so I’m not sure about it.
However, I think you might find some answers by referring to the official documentation.
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
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.
@@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
@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!
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
That’s right. I think the questioner is not asking how to make a 3D model, but how to place a 3D mode
Please HELP! I have been through this tutorial three times and still can't get it to work for me. When I scan my QR and give it permission to use camera and motion sensor, I DO NOT get a cube on top of the code. I have done everything directed and even wrote the steps down. What am I doing wrong? I desperately want this to work for me. Thank you.
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.
In many cases, unexpected spelling mistakes have been the cause of the issue.
@@noelrecords-programming thank you for your response. I am using Safari. I’ll try again using Chrome. Thank you too for the great tutorial. I have no doubt that the problem is with my implementation.
The browser doesn't seem to be the issue. This means that either the code is incorrect or the creation of the marker image has failed. Especially in cases where a spelling mistake is the cause, it can be hard to spot due to preconceived notions, but please hang in there and review it carefully!
hello. thanks for the video.
I have a question... I would like to use different buttons for social networks, but I don't know how to make them click on the button and not on the entity or the marker :( I need help
If you add the link option inside the a-image tag, like in my video, it should work. Regular HTML buttons or a tags likely won’t work correctly in this context.
@@noelrecords-programming What happens is that you click on the center of the marker and not on the a-image :( and I don't know what to do
Regardless of the library being used this time, it seems that AR generally allows users to click on objects that are directly in front of them, or at the center of the screen.
Therefore, when using multiple a-image tags, you will need to move the camera so that the target a-image tag is positioned in the center of the screen.
great! but why is the so experience so shaky? and on tapping, link does not open. please help.
That’s because it’s AR. Generally, AR is built based on the human point of view, so it seems that the tap doesn’t respond when the target of the click isn’t at the center of the screen, which aligns with the user’s viewpoint.
@@noelrecords-programming okay how to open the link on tap?
Bring the link target to the center of the screen and tap it.
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
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.
how can i make those icons redirect the use to the URL i want ???
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!
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.
How can it be done to improve the image stabilization, since it vibrates a lot
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.
@@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
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.
can i use image to track instead of qr code?
Of course, it is possible.
@@noelrecords-programming same way right?
Yes! See my video!!
@@noelrecords-programming actually i have printed a 3d model and i want to show ar pop up upon that
Do you want to display AR on top of a 3D model instead of a marker image?
i did everything step by step, but when i scanned the QR code it showed the camera but no cube was showing , can anyone help ? i am using chrome
I have reviewed my project, and it is working without any issues.
Please check the following again:
• For iPhone, use Safari, and for Android, use Chrome.
• Make sure the markers are created correctly.
• Verify that the program code is correct.
In many cases, typos or spelling mistakes are often the cause.
@noelrecords-programming thank you so much for your reply, I did it twice , now I will do it again for third time and I will make sure that everything is correct , then I will get back to you 🤗
how can i make GLB icon clickable and use them to redirect to the URL i want ???
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.
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?
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.
@@noelrecords-programming Heey, I noticed that it only does that with the samsung browser and not with google Chrome.
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.
@@noelrecords-programming Heeey, ive found a solution to get it right in the samsung browser with a line of code
Great!!
Why my image appear black when i scan the marker?
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.
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 😢
Your VR seems to be made with Unity. I think this video is unrelated.
@@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 🥲
@@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 🥲
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.