WebAR project that uses HTML5/WebGL

We need to create a webAR project that uses HTML5/WebGL.

The page switches mobile camera to view surroundings through your mobile camera, position "our product"on wall so that they can see how it looks in (almost) real life. (Similar to google "Animals in 3D")

This is how it should work :
1) Point mobile phone camera on an empty wall (vertical) or an empty table (horizontal)
2) There needs to be some searching/ pointing guidance to the user so user undertsadning that it needs to be pointed on plain surface
3) Once the plain surface is captured in the surrounding, position our product on the wall/ table so that they can see how it looks in (almost) real life
4) Need to host the 3D on angular component, so people are able to play around, see AED in close-up
5) Our product must be shown true to size
(Example, if you see Tiger in 3D on Google and Dog in 3D on Google you will see that the animal is still true to size)

More details can be shared during discussion.
Skills:
WebAR / HTML5/ WebGL / AR / VR/ 3D/ angular