Problem #2

Combining a modern javascript framework with AR.js

AR.js is not designed to be used in a modern javascript frameworks like react. Therefore it was tricky to include it in a way that everything was working correctly (marker loading and access to the camera).

As I'm coming from a background of extensively using modern frontend frameworks like vuejs or react I didn't want to miss out on all the convenience it gives me.

Normally in a react app you would install a library via the node package manager (npm) but sadly AR.js just doesn't work this way. It expects to be used in a static web page, where it is loaded in the head of the html document. After being loaded it is immediately executed, regardless of the rest of the react app beging loaded or not. So when it is loaded to fast and the react app is not finished building up the rest of the page it didn't work.

Luckily there is some tooling around react called gatsbyjs that makes it easy to render the webpages on the server side and only serve static web pages. This allowed me to use react and AR.js together.