Creating Augmented Reality Posters for mobile browsers
We made several prototypes around the general idea of being able to easily try out for example art in your home before you buy it online.
Let's start with the elephant in the room – Safari. Calm down, Apple fanboys. You know it in your heart that Safari has been letting you down lately. And specially developers.
Safari does not support WebRTC, or access to the camera-module within a browser context. Making it very much impossible to create a web-AR experience that's cross platform.
So we ditched iOS for now. (Specs for Safari iOS WebRTC has been filed. Hopefully we'll see WebRTC implementation in Safari soon)
Enough with the rant. The Tech:
So, as a blessing from above (being atheist and all) we found a project called "Augmented Reality in Three.JS" and it's corresponding github (https://github.com/jeromeetienne/threex.webar)
Needless to say, we dove right in to it. And started creating our own markers.
But we lacked some interactivity in the demo. Btw, we used a Nexus 5 for the tests.
As stated above, for the case of an "art"-poster that it differs in size.
You, as the user, have absolutely no clue on how big 60x50cm is through the lense of your phone. So, we added a "re-size" function to the experience.
It was fairly easy and straight forward. You change the size of your AR-object with swiping left/right. (In hindsight it probably would be better to swiper left/right for different objects and swipe up/down to change size)
We'll leave the code here.