进阶|用前端webAR自己做个pokemon Go，想想也是很帅

前端爱好者的知识盛宴

嗨

这里是IMWEB

一个想为更多的前端人

享知识 

助发展

觅福利

有情怀有情调的公众号

欢迎关注转发

让更多的前端技友一起学习发展~

正文

01

背景

最近AR的话题很火,如前段时间pokemon Go游戏和支付宝的AR红包，加上最近看到了一些关于前端运用webRTC技术实现WebAR的文章，这边就尝试结合下,实现一个简单版的pokeMon Go的游戏。

由于有兼容性问题，目前demo只是跑在android的手Q中，具体效果如下：

02

WebAR

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

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

03

WebRTC是什么？

那么，WebRTC是什么？ 

对前端来说，我们可以通过HTML5的新特性WebRTC（网页实时通信，Web Real-Time Communication 一个支持网页浏览器进行实时语音对话或视频对话的API）。

通过WebRTC,可以通过网页呼起用户的摄像头，并且实时获取用户摄像头的图像数据的。

04

WebRTC API

WebRTC共分三个API。

▷getUserMedia getUserMedia主要用于获取视频和音频信息

▷RTCPeerConnection 用于浏览器之间的数据交换。

▷RTCDataChannel `用于浏览器之间的数据交换。

这边目前我只使用到了getUserMedia

05

WebRTC兼容性

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

由于苹果的安全机制问题，iOS设备任何浏览器都不支持getUserMedia()。 

最终数据展示，Android设备下，有99.45%的设备在微信是支持getUserMedia()的，98.05%的设备在手Q是支持getUserMedia()的。

而我们之前测试机型里面，本机浏览器、QQ浏览器对getUserMedia()都有不同程度的支持。 

2015年底前，也就是chrome47版本前，chrome是支持http页面拉起摄像头的，出于安全问题考虑，chrome47版本后只支持https页面拉起摄像头。

06

实现步骤

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

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

▷获取摄像头的数据流

当成功呼起摄像头时，会触发success的回调，在回调中我们可以获取摄像头的数据流

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

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

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

07

最终效果

08

参考链接

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

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

关注小编

留言夸夸小编

转发文章给小编加鸡腿

跟更多的人一起学习

让我们又爱又恨的前端