How to Build a Simple WebAR Demo with WebRTC on Android Browsers

Recently AR has become popular, exemplified by games like Pokémon Go and Alipay’s AR red packets. This article explores using WebRTC to implement a simple WebAR demo that runs on Android browsers.

WebAR

WebAR means achieving augmented‑reality effects through web technologies.

The core of AR is real‑time video, which is enabled on the web by WebRTC.

What is WebRTC?

WebRTC (Web Real‑Time Communication) is an HTML5 API that allows browsers to access the camera and retrieve live video streams.

WebRTC API

WebRTC provides three main APIs:

1. getUserMedia : obtains video and audio streams.

2. RTCPeerConnection : enables data exchange between browsers.

3. RTCDataChannel : also used for browser‑to‑browser data exchange.

In this demo only getUserMedia is used.

WebRTC Compatibility

Compatibility notes:

• iOS browsers do not support getUserMedia due to security restrictions.

• On Android, 99.45% of devices support getUserMedia in WeChat and 98.05% in QQ.

• Chrome versions before 47 allowed camera access on HTTP pages; from version 47 onward it requires HTTPS.

Implementation Steps

The demo is built with the following steps:

1. Use the WebRTC API to invoke the device camera from the browser.

2. Capture the camera data stream.

3. Render the stream in a video element.

4. Overlay any desired content on the video.

5. Use CSS3 and JavaScript to add interactive effects and create the WebAR experience.

Final Result

Conclusion

Although WebAR cannot yet replace native AR apps and still faces many challenges, its adoption is likely to grow as web technologies and standards evolve.