Blog
Web AR

Web AR: A Complete Guide To App-less Augmented Reality

What if we told you that augmented reality features could be available on almost any internet-connected device and without the need to download anything? This is possible thanks to the technology known as Web AR. In this article, we will explain what it is, what it can be used for, and how you can benefit from it.

Web AR

What is Web AR

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.

How does Web AR work?

The augmented reality portion of it 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:

  1.  The camera captures an image or a frame of a video;
  2.  The browser takes this image and forwards it to the web app;
  3.  Our SDK that is built into the web app preloads the assets (e.g. effects) from the cloud to the local memory;
  4.  Our SDK recognizes faces, applies the assets to the image and forwards it to the browser;
  5.  The browser draws the image using WebGL and the user can see the results.

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.

img_masks-min-Oct-07-2021-07-46-35-36-AMBanuba Face AR SDK. Face filters

Advantages and limitations

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.

Advantages:

  • Compatible with almost any device. If something has a camera, a screen, and a connection to the Internet, it most likely can run Web AR. Even if the specs of the device aren’t enough to handle a mobile app.
  • Reaches the widest audience. This directly correlates to the previous point. Not everyone has a phone that can run mobile AR but Web AR can reach almost everyone.
  • Works well with larger screens. Mobile AR is adapted for smartphone screens. But there are things (e.g. drawing virtual objects) that are more convenient on full-sized monitors. For apps dealing with such purposes, a web version is preferable.
  • Cheaper to maintain. Keeping a web application with AR functionality is less expensive than a comparable mobile app. Especially if we consider the need to have different versions for Android and iOS.
  • No need to pass the app store review. Mobile apps have to be reviewed by Apple, Google, or Amazon (depending on the stores where they’re published). This increases the time it takes to publish or update an application. Web AR apps don’t have this problem. In addition, major stores don’t allow certain things (e.g. alcohol), so for such applications, the web becomes the only possibility. 
  • No download is required. To use Web AR, one just needs to visit the website where it’s installed.

Disadvantages:

  • Lower performance. Web apps can’t access as many resources as their mobile or desktop counterparts. As a result, they aren’t as fast.
  • Can’t work offline. Web AR apps have to have an internet connection. Mobile AR apps, on the other hand, often have an offline mode.

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. 

beauty-Oct-15-2021-11-23-45-83-AMBanuba Face AR SDK. Beautification

What you can do with Web AR

This technology provides a lot of utility, as proven by many real-life cases.

  • Virtual try-on. Retailers and producers alike create web applications for AR try-on. This is especially popular among cosmetics brands: Maybelline, NYX, Mac, and L’Oreal are among the early adopters.
  • 3D object placement. This is similar to try-on but deals with furniture, art, and other household objects. Users can check how potential purchases would look like in their living room or kitchen, for example. 
  • Video calls. Augmented reality masks and stickers, Instagram filters, background replacement - these are just a few of the things that can be done through Web AR. It is used by Zoom, Google, and other major players in the videoconferencing domain.
  • Video editing. It is possible to edit clips right in the browser. This includes both core features (e.g. trimming and cutting), and various effects.
  • AR advertising. Web AR is a good option to create immersive interactive ads that have traction with both kids and adults. 
  • Online learning. Interactive teaching aids that show various events and processes (e.g. chemical reactions) and AR masks that attract the attention of younger learners. 

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.

background subtraction 1-1Banuba Face AR SDK. Background subtraction

How to integrate AR into your website

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 to base an app off of. 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.

Start Free Trial

How Web AR content is created

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.

  • From the vendor. Some companies that offer Web AR SDKs can also provide content for them. This can come in the form of an asset store where you can license filters and effects for use in your project. Or you can request custom masks to be made. This is what we did for Chingari, an Indian TikTok competitor.
  • Vendor’s proprietary studio. Certain AR companies have special software that lets you develop effects compatible with their SDKs. These studios also include ready-made templates that can be quickly customized.
  • DIY/Third party. SDK vendors usually provide some form of filter editor that lets you import self-made effects that you created in a 3D-modeling software (e.g. Maya). This, however, requires the appropriate skill set, as developing filters has its own quirks. There are design agencies and freelancers that provide this kind of service if you don’t have an in-house creative team.

Web AR examples

Now let us show you a few recent cases where Web AR was successfully used.


Purina “28-day challenge”

The animal goods producer launched a Web AR experience 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


Google Meet

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”.

background subtraction 2-2Background subtraction with Banuba Face AR SDK


Looke

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 future of Web AR

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 Web Ar 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 on what Web AR is capable of. 

Conclusion

Web AR 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.

Start Free Trial

Top