How to deliver AR on the web only with a QR Code

With latest web technologies you can deliver cross-browser AR experiences just with a simple QR Code, in few steps. I’m going to show you how.

Let’s start this journey with a story

A guy (our user) walks into a museum, and he is welcomed by a huge disclaimer that states that beside every artifact, he can find a marker to scan in order to visualize a 3D animation. Before that, he has to download an application on the store (and probably, also to register an account).

Marker inside QR Codes

The main idea is to create a single QR Code that will both redirect the user to our AR web app and that also contains the marker for AR.js. The user will only has to:

  • Scan the QR Code
  • Open the url embedded in the QR Code
  • Continue to scan the same QR Code and see the 3D model/animation appear on top of it.
Barcode marker representing number 6.
QRCodeMonkey free online tool for custom QR Code generation.



Chialab is a design company. By developing strategy, design, software and content, we generate exciting relationships between brands and people.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store