Web前端也能做的AR互动

产品目录

一、工程项目新体验

二、控制技术同时实现

三、相容情形

四、碰到的难题

五、引言

节录

一、工程项目新体验

    过往的AR，都是要在某一APP内才能新体验到的，比如pokemon go和QQ AR圣火传达公益活动。

他们项目组在做控制技术实力的时候，发现Android设备下微信、手Q支持getUserMedia()网页拉起摄像头，并通过createObjectURL把数据流传给video在页面展示，以营造出实时视频的效果。据最新统计数据显示，安卓操作系统占有全球移动智能手机系统86.2%的市场份额。也就是说，他们能基于微信和手Q来做网页的AR交互啦！！！

（http://digi.tech.qq.com/a/20160822/034526.htm?t=1471877263208）

于是他们基于实际需求发起并开发了一个WebAR的H5工程项目，玩家进来页面能在不安装额外APP的情形下，新体验到AR带来的乐趣；针对不支持实时视频的浏览器，就提供3D全景新体验版。进入页面根据提示操作即可完成WebAR小游戏，跳转落地页。

二、控制技术同时实现

2.1 WebRTC——WebAR的基础

无论是APPAR还是WebAR的一个最基础要同时实现的功能就是实时视频效果。WebRTC（网页实时通信，Web Real-Time Communication）是一个支持网页浏览器进行实时语音对话或视频对话的API。getUserMedia()是WebRTC的ebAR的效果。

关键代码：

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

2.2 3D模型——WebGL、three.js、3DMAX

这次做的WebAR非常酷炫的一个新体验是他的3D模型展示。要在网页展示3D模型，需要先把模型放到3DMAX里进行预处理（过程会碰到很多bug和困难），导出成js文件，再借助three.js在页面里建立模型、调整动画等（过程也会碰到很多bug和困难）。这块工作主要是四姑娘（signhuang）来负责的，让他们期待四姑娘后面更详细心酸的分享吧。

2.3 3D全景——three.js、球体全景

    3D全景的制作有很多种方法，CSS3、Flash、Krpano等，因为3D模型动画他们是借助three.js在页面建模的，所以3D全景他们也考虑用three.js来制作。

三、相容情形

3.1 getUserMedia()

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

最终数据展示，Android设备下，有99.45%的设备在微信是支持getUserMedia()的，98.05%的设备在手Q是支持getUserMedia()的。而他们之前测试机型里面，本机浏览器、QQ浏览器对getUserMedia()都有不同程度的支持。

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

（http://caniuse.mojijs.com/Home/Html/item/key/stream/index.html）

3.2 3D模型&3D全景

WebGL是一项利用JavaScript API渲染交互式3D电脑图形和2D图形的控制技术，可相容任何的网页浏览器，无需加装插件。WebGL在现代浏览器中已经被广泛支持。3D模型在移动设备浏览器上的相容情形还是很好的，已测试机型里面，92%的设备是支持浏览器3D建模和动画的。

（http://caniuse.mojijs.com/Home/Html/item/key/webgl/index.html）

四、碰到的难题

4.1 getusermedia()

4.1.1 前后摄像头

碰到难题：

使用getUserMedia()拉起摄像头时，默认是拉起前置摄像头的，但是要营造WebAR的效果，肯定是需要拉起后置摄像头的。

解决方法：

的设备源ID，也就是前置摄像头的ID。稍微增加点预处理即可。

关键代码：

4.1.2 摄像头全屏

碰到难题：

    摄像头拍摄的内容不能完美的全屏，上下总有留白，不完美。尝试了多种原生设置来设置<video>大小，希望能完美铺满全屏，然而都不成功。

解决方法：

上图是用CSS设置了<video>为红色背景，并且设置了宽高铺满全屏。<video>标签确实如期待的展现，但摄像头拍摄到的内容却不会被合理铺满全屏。能理解为就像他们平常拍摄的视频，是有固定宽高比的，在浏览器宽高比不同又要求视频全部显示时，就会出现上下留白或者左右留白的情形。测试发现，<video>标签不需要另外设置宽高，会默认为铺满全屏并且溢出，那他们在外层增加一个div并且设置为浏览器宽高，再增加 overflow:hidden就能模拟全屏的效果了。

关键代码：

4.1.3 页面无法针对模型点击

碰到难题：

    本来页面设置的是让用户点击3D模型来进行交互的，可发现没办法单独点击到模型，整个交互就不能进行下去了。

解决方法：

修改了页面的点击交互方式，改用坐标瞄准判定的方式。页面中心设置一个瞄准区域，用户移动手机让3D模型处在瞄准区域内，即判定为成功，进行下一步。这样就避免了页面需要点击的情形。

思路是：3D模型和camera都有自己的三维坐标，new THREE.Vecto

者在X面的坐标，再用a.angle()-b.angle()求得两者在X面的夹角。Y面夹角和X面夹角都小于设定范围时，则判断为已瞄准。

关键代码：

4.2 3D全景

4.2.1 iOS和Android初始化3D全景的朝向不一致

碰到难题：

iOS设备在任何朝向（东南西北）打开3D全景，都是看向一个固定方向的。

    Android设备在不同朝向（东南西北）打开3D全景，看向的是不同方向。

这个页面为了降低交互难度以及固定让3D模型出现在舞台上（背景比较好看），需要的是在不同朝向（东南西北）打开3D全景，都是看向一个固定方向的。

解决方法：

面都会朝向一个固定的方向，再rotate各个方向进行最终调整。

关键代码：

4.2.2 初始化定位

碰到难题：

用户进入页面时候的手机角度有各种情形，

解决方法：

进入页面捕获camera看向的矢量，加载完成捕获当前camera看向的矢量，有偏移的话重新初始化全景、3D模型等的位置和角度。

关键代码：

4.3 不支持情形排除

4.3.1 getUserMedia()、three.js、陀螺仪

①判断是否支持getUserMedia()

②用Detector.js判断是否支持WebGL

③使用three.js有报错时

④设备不支持陀螺仪

4.3.2 iOS8未知错误

碰到难题：

有位远方的同事是iPhone 5S，测试发现加载到100%了，加载界面一直不消失，页面卡住。

解决方法：

本身页面的设置是：为了防止加载界面隐藏后，3D全景和3D模型没渲染完成显示一片空白，于是加了个判定，建模渲染完成才隐藏加载界面。找身边的同事借了iPhone 5S测试，能顺利进入3D全景AR界面，所以不是设备难题。问了下微信版本也是最新的，系统版本是iOS8，而没有难题的iPhone 5S的系统版本是iOS9，所以考虑是系统版本导致的难题。但是设备不在身边没办法一步步排除可能性，查了下iOS8的占比只有2.8%，该游戏用户群体iOS设备占比少于30%，所以决定放弃这部分用户的页面新体验，直接跳转落地页。

关键代码：

五、引言

做新控制技术研究和实践的过程中会碰到没有先例的坑，去查API文档，曲线救国的方式解决难题（有时候觉得重构/后端是一个需要带

最终页面的数据展示出，部分用户设备是支持拉起摄像头的，但可能出于安全难题的考虑，他们拒绝拉起。这是他们后续工作要考虑的一个难题，如何保护用户隐私以及让用户信任他们。

总的来说，这是一次很有趣充实的新控制技术研究和实践，学习的过程是很让人幸福的。

欢迎加入TGideas粉丝交流群

QQ群：532110024

暗号：TGideas

知乎ID：TGideas