实战 | 前端WebAR实现简单版pokemon Go

最近AR的话题很火,如前段时间pokemon Go游戏，和支付宝的AR红包，加上最近看到了一些关于前端运用webRTC技术实现WebAR的文章，这边就尝试结合下,实现一个简单版的pokeMon Go的游戏。由于有兼容性问题，目前demo只是跑在android的手Q中，具体效果如下：

WebAR

WebAR说白了就是通过web端的技术能力去实现AR的效果！

我们知道，AR最基础要实现的功能其实就是实时视频效果，然而帮助我们实现这种实时视频效果的技术基础是WebRTC;

WebRTC是什么？

那么，WebRTC是什么？ 对前端来说，我们可以通过HTML5的新特性WebRTC（网页实时通信，Web Real-Time Communication 一个支持网页浏览器进行实时语音对话或视频对话的API），通过WebRTC,可以通过网页呼起用户的摄像头，并且实时获取用户摄像头的图像数据的。

WebRTC API

WebRTC共分三个API。

1、getUserMedia :getUserMedia主要用于获取视频和音频信息

2、RTCPeerConnection :用于浏览器之间的数据交换。

3、RTCDataChannel :用于浏览器之间的数据交换

这边目前我只使用到了getUserMedia

WebRTC兼容性

这边通过阅读相关文章了解到，目前兼容性情况如下：

由于苹果的安全机制问题，iOS设备任何浏览器都不支持getUserMedia()。 最终数据展示，Android设备下，有99.45%的设备在微信是支持getUserMedia()的，98.05%的设备在手Q是支持getUserMedia()的。而我们之前测试机型里面，本机浏览器、QQ浏览器对getUserMedia()都有不同程度的支持。 2015年底前，也就是chrome47版本前，chrome是支持http页面拉起摄像头的，出于安全问题考虑，chrome47版本后只支持https页面拉起摄像头。

实现步骤

目前我的demo的实现步骤如下：

1、通过WebRTC的API来实现获取通过浏览器网页拉起摄像头操作

2、获取摄像头的数据流

3、将摄像头的数据流通过video标签作为载体呈现在页面上

4、可以在video上叠加任何我们需要的内容和操作

5、配合CSS3和JS为叠加的内容增加交互效果，营造出WebAR的感觉

最终效果

小结

虽然目前webAR还是不能取代AppAR，且通过web来实现AR还是有许多问题。但我相信通过时代和技术的并行发展，webAR的流行可能并不久远。

扫码下方二维码，

随时关注更多前端干货文章！

▼

微信：IMWebTech