Experimenting with AR on the mobile Web using getUserMedia and A-Frame, the declarative VR library from Mozilla.
VIEW DEMO (requires Firefox on Android)
How It Works
I used the getUserMedia API to get access to the phone's camera stream, and set that stream as the background of the entire page. Then I create an A-Frame scene above it, with no background.
NOTE to iPhone/iPad users
Apple chose to not implement the getUserMedia API, so this will not work on iOS or Safari. Let Apple know that you want a better mobile web on iOS devices by filing a request with Apple.
- Install Chrome or Firefox on Android
- Open http://tinchoforeverdn .github.io/aframe-ar in Chrome or Firefox on your phone
- Click the button to allow your camera to used
- Move your phone around until you see the rubber ducky
- Create your own geolocated AR game in the style of Pokémon GO
- World-scale digital graffiti
- Create massive flying mythical creatures to guard your city
- Political signage megabattle with your neighbor
- Add digital signage to your business via Bluetooth beacon or QR code pointing to your AR web page
- Leave reviews of art, architecture, businesses, somebody's car, intersections, fence posts, empty lots, garbage cans
- Add Chrome/Android browser support
- Build as an A-Frame plug-in
Geolocation
- Add coarse-grained geolocation support via geolocation web API
- Explore pluggable integration of Google maps API and others
Fun additions
- Use time of day and sunrise/set info to change light source angle and brightness
- Use coarse compass data via orientation API and change light-source in A-Frame scene to match
- Use Forecast.io or other weather API to set light source brightness or even to obscure objects in scene
This is a technology demo. Feel free to fork and improve or use however you like.
I wrote this as an example of what is possible. I might take pull-requests or augment the code based on pull-requests, but currently have no plans to turn this into a full-featured AR web solution at this time.
- JS ARToolkit
- Awe.js(abandoned)