Build a Simple Web AR Experience Using JavaScript and Marker Detection

Implementation Overview

The AR pipeline consists of four steps: obtain a live video stream, detect marker positions in each frame, render virtual content aligned to the markers, and display the combined result.

Video Capture

Use the standard navigator.mediaDevices.getUserMedia() API to request a video stream. Example:

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    // use the stream, e.g., assign to a video element
  })
  .catch(function(err) {
    console.error('getUserMedia error:', err);
  });

Constraints can specify resolution, deviceId (front/rear camera), and enable audio if needed.

Marker Detection

Process each video frame with a JavaScript marker‑detection library such as jsaruco (GitHub: https://github.com/jcmellado/js-aruco) or jsartoolkit. The library returns the four corner coordinates of a detected 7×7 ArUco marker and its numeric ID, which can be used to select the virtual object.

Rendering Virtual Content

For 2D overlays, draw on a canvas using the Canvas 2D API at the marker corners. For 3D objects, use a WebGL‑based engine such as Three.js (https://threejs.org) or A‑Frame (https://aframe.io). These libraries accept the marker pose (position and orientation) and render models, textures, or animations that follow the marker.

Marker Specification

A valid marker for jsaruco is a 7×7 grid with a solid black border and a 5×5 inner pattern encoding the ID. The inner pattern follows rows such as:

white - black - black - black - black
white - black - white - white - white
black - white - black - black - white
black - white - white - white - black

This format allows 4⁵ = 1024 unique IDs.

Compatibility

Modern desktop browsers and Android Chrome support getUserMedia over HTTPS.

iOS Safari and WeChat do not support it (as of the article date).

Development can be done in online editors (e.g., jsbin, jsFiddle) or local servers.

Typical Demo Scenarios

Examples include displaying a 2D logo, a heartbeat animation, an identity card, a 3D Earth model, or a 3D product. All follow the same pipeline: video → marker detection → rendering.