[navigation]
Web AR refers to the augmented reality that is a part of a web application. On the side of a user, it requires just a camera and a browser to work properly. As a result, it is accessible from mobile devices and desktop computers alike.
It is supported by major browsers like Chrome and Safari, as well as less popular ones (e.g. Samsung). And both Apple and Google keep releasing updates that improve Web AR compatibility, so in the foreseeable future, it will only keep developing.
The web browser augmented reality is built around neural networks that are trained to detect real-life objects and place virtual ones over them. There are different approaches to the specifics.
This is how it works in a nutshell:
The process happens in real-time.
If you want to get into more technical details and learn about the technology we use and the approach our SDK takes, check out our article on the topic: JavaScript + WebGL Face Detection and Tracking to Bring Augmented Reality to the Web.
Given the way it works, Web AR has a set of benefits and drawbacks that determine whether it is a viable approach for a given situation.
Disadvantages:
For a more detailed analysis, take a look at a dedicated article we wrote: WebAR for Chrome And Safari vs Mobile AR. It contains further explanation of advantages and disadvantages, as well as use cases and recommendations about when to go for which one.
This technology provides a lot of utility, as proven by many real-life cases.
For more detailed information, feel free to read Augmented Reality On the Web: Top Use Cases 2021. This article expands on the use of Web AR and includes cases of companies that benefited from it.
Web AR has different implementations. They can be specialized frameworks that focus on a certain task and offer the relevant code. They can be SDKs that offer a set of features on to base an app. Or they can be massive Web AR platforms that include content studios (more on that later), ready-made assets, and content hosting.
Banuba, for example, offers an SDK - a premade module that can be integrated into your website or web app within a day. It already can perform the necessary functions (e.g. virtual makeover or video editing) and receives regular updates.
To get started with one, check out the instructions.
By the way, we offer 14 days of the free trial, so don’t hesitate to check out our SDK.
Getting the core functionality is good. But to be able to apply effects and masks, you need these effects and masks. There are main ways to get them.
Here are the 3 top use cases of adopting web browser augmented reality.
The animal goods producer launched a web AR solution to advertise the effect their kibble has on pets. It lets users select a specific animal (either a cat or a dog) and then places a virtual one in the nearby environment. Then the app shows the changes in the pet’s looks and behavior and plays the appropriate animations (playing, eating, jumping around, etc.). You can try it for yourself on their website.
One of the most popular features of online meetings is background replacement. It helps avoid potential distractions like pets or kids walking in and protects the users’ privacy. Google is one of the few companies that can do that in web applications. They have a lot of backgrounds available by default, and even more can be added via plugins and extensions. To test it, start a meeting through the Google Meet web app, click the three dots to open a menu, and select “Apply visual effects”.
This example proves that AR is affordable and effective even for mid-sized companies, not just megacorporations. Looke is a niche brand from Indonesia. They specialize in halal, vegan, and eco-friendly cosmetics. Using Banuba Face AR SDK, they were able to launch the first virtual try-on app in Indonesia, getting over 50K installs in one year. You can read more about it in a dedicated article.
The flexibility and cost-efficiency of the technology make it popular among the developers and the users. So the companies that specialize in it are constantly working to improve it and add new things that can be done with it.
The first major direction of development is improving the quality. With better trained neural networks, the precision of AR web would rise. For example, check out the difference between the older and newer versions of our full-body segmentation network.
The second is adding more features. This is down to exceeding the technical limitations that currently exist. Giving access to more hardware (e.g. magnetometers and other sensors) would expand what Web AR is capable of.
Web-based augmented reality is a popular and effective technology that finds use in advertising, education, communication, and many other domains. Despite not providing the same level of performance as mobile or desktop counterparts, it is good at what it does. And if you need it, check out Banuba Face AR SDK - the first two weeks are free.