Skip to content

Mrashes/aframe-ar

 
 

Repository files navigation

A-Frame AR

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.

Screenshot

Usage

As a developer:

  • Fork the repo
  • Publish your copy on Github pages or wherever you want

Use-Cases

  • 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

TODO

  • 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

Contributing

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.

Other Things

About

experimenting with AR using A-Frame

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 87.5%
  • HTML 12.5%