AR Cam

A marker based augmented reality camera app for the web. Powered by AR.js. Fast, light-weight and works on any mobile/desktop browser with WebGL and WebRTC.

• Snap and save pictures.
• Ability to Translate, Rotate or Zoom models.
• Tested in Chrome and Safari.

How to use

• Place your 3D model in /assets/3d-models/ and link it using a-entity tag in index.html. Learn more.
• By default the marker is preset to the hiro marker. To create a custom marker,
  • Use this tool to create your custom marker.
  • Export the .patt file and place it in /assets/custom-markers/.
  • Link it using a-marker tag in index.html. Learn more.
  • You may follow this article to create an effective custom marker.
• Fire up the app and point it to the marker. Default hiro marker can be found here.
• Translate, rotate or zoom the model as desired and snap a pic!

Dependencies

Dependency	Purpose
AR.js	Implements AR on the web.
A-Frame	Renders augmented content.
three.js
ZingTouch	Gesture controls for the model.

Always deploy under https

All AR.js web apps in general, have to be run on a server. You can use local server or deploy the static web app on the web. Might run into permission errors in http. So don't forget to always run your examples on secure connections servers or localhost. Github Pages is a great way to have free and live websites under https.

🚀 Demo

Checkout a live deployment here. Use the hiro marker to see a puppy!

Contributions

Contributions are always welcome! Feel free to fork and improve the project. Scope of improvement includes:

• Ability to record video.
• Advanced gesture controls.
• Improved antialiasing of snaps.
• Suppport for portrait mode.

Links

• AR.js repo.
• AR.js official documtetion.
• 10 tips to enhance your AR.js app.