Augmented Reality in Web Browsers

Augmented Reality (AR) is a computing technology that integrates reality onto the screen of your computer or device. This is mainly done by incorporating virtual elements on screen, in real time and interactively, as if they were really part of the real world.

In recent years, quite a few apps have made use of this technology - the Pokémon GO app featuring Pokémon on the real world, Snapchat that allows its users to put various virtual masks on their faces, and more.

While AR components are far more common to see in apps, which are installed on iPhones and Android devices, technology use is also possible on modern Web browsers, as demonstrated.

Try it yourself - Three examples of AR usage in web browser

Identify a graphic element

By using AR, the camera can detect a certain image. Once the image is found - it can get information about its exact location in the physical world relative to the camera - that is, what location and angle the image is at. And so you can actually "put" on that image different objects, and perform a variety of other actions when identifying the image.

To experiment with it, you can do the following:

1. Click this link from a mobile device or a computer with a camera.

2. When entering the page, you will be asked to authorize camera operation. When the camera is turned on, the screen will be displayed.

3. Search the Slash logo with the camera:

4. Once the camera detects the Slash logo inside the black square - it will display a rotating 3D caption over it. You can move the camera in different directions and angles, and note that the camera always knows where and at which angle the object is located, and the caption placed on the object changes its reference point accordingly.

And so the final result should show:

Face Detection and Masking

The familiar filters that can be found in apps like Snapchat and Facebook can actually be produced in Web browsers as well.

For example, in this link the user can "dress" a leopard mask. The tiger can open its mouth, and bring out bright lights.

And this is what the end result will look like:

Placing an object in the real world

Safari on iPhone, and Chrome on Android, have special support for virtualized 3D space-based object.

The camera will recognize the surface, and it will know how to place the object on it - as if it existed in reality.

In this link you can see an example of the ability (for iPhone users).

To sum up, the availability of real-world technology in Web browsers opens up endless new possibilities for developing products, components and features that can be based on this technology. Proper use of technology will make the browsing experience much more enjoyable, and in some cases - even one that is truly connected to the real world.