Building an augmented reality application with the WebXR Device API

🚨 Will not work in latest Chrome Canary 🚨

The WebXR Device API is undergoing a lot of changes currently. This codelab will only work in Chrome Canary/Dev versions 70-72.

This code has the resources you need for the codelab Building an augmented reality application with the WebXR Device API.

This is a work in progress. If you find a mistake or have a suggestion, please file an issue. Thanks!

You can view the completed web site here.

What you'll learn

• How to use the WebXR Device API
• How to find a surface using augmented reality hit tests
• How to load and render a 3D model synchronized with the real world camera feed

What you'll need

• A workstation for coding and hosting static web content
• ARCore-capable Android device running Android 8.0 Oreo
• ARCore installed (Chrome will automatically prompt you to install ARCore)
• Chrome Canary. You'll need a version of Chrome that's 70-72, and use a Canary or Dev build of Chrome (ARCore bindings are not currently shipping in release/beta).
• Web Server for Chrome, or your own web server of choice
• USB cable to connect your AR device to workstation
• The sample code - Download a zip or clone this repo
• A text editor
• Basic knowledge of HTML, CSS, JavaScript, and Chrome DevTools