How to Build a Simple WebAR Pokémon Go Clone with WebRTC

Background

AR has become popular recently, with examples like Pokémon Go and Alipay’s AR red packets. Inspired by articles about using WebRTC for WebAR, we attempted a simple Pokémon‑Go‑style game.

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 feature that allows browsers to access the camera and obtain live video streams.

WebRTC API

WebRTC provides three main APIs:

getUserMedia : obtains video and audio streams.

RTCPeerConnection : enables data exchange between browsers.

RTCDataChannel : also used for data exchange.

In this demo we only use getUserMedia .

WebRTC Compatibility

iOS browsers do not support getUserMedia() due to security restrictions.

On Android, about 99.45% of devices support getUserMedia() in WeChat and 98.05% in QQ. Older Chrome versions (< 47) allowed camera access over HTTP; newer versions require HTTPS.

Implementation Steps

The demo follows these steps:

Use the WebRTC API to request camera access.

Obtain the video stream in the success callback.

Render the stream in a <video> element.

Overlay any desired content on the video using CSS3 and JavaScript to create the WebAR effect.

Final Effect

Below are screenshots of the running demo.

Reference Links

http://blog.csdn.net/journey191/article/details/40744015

http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201612/537832.shtml