web AR探索和总结

腾讯DeepOcean原创文章：dopro.io/web-ar.html

导语 AR浪潮正滚滚而来，Web 浏览器作为人们最唾手可得的人机交互终端，AR技术又有那些进展，下面作者将自己在项目内AR的探索总结了一下，和大家分享。

AR实现原理分析三要素：

1.摄像头的调用 2.视频流内容识别 3.虚拟物体的叠加在画面上

技术实现一：摄像头的调用

1.使用getUsermedia获取摄像头内容

2.截取当前帧的内容：canvas toDataURL 目前的浏览器支持情况如下：

技术实现第二步：视频流内容识别

方案1:纯JS识别库：js-aruco，tracking.js ，jsartoolkit5, ar.js进行识别 js-aruco和tracking.js在处理识别主要应用了：canvas来读取分析对应的图片信息。在处理视频流，视频如果尺寸大了，则识别速度慢，卡顿明显。目前主流分辨率都在750*1334左右，直接处理这个大小的视频，速度肯定不够。下图附上参考和网址：

jsartoolkit5和 AR.js：主要是将artoolkit c++库通过 Emscripten编译成对应的js文件（asm.js）文件，在性能和计算上得到了提升。但是对应视频流的解析会有轻微的抖动。

观看对应的帧频，js-aruco = tracking.js <jsartoolkit5+ar.js

方案2:websocket + opencv 既然前端处理视频流不够快，那我们是否直接后端处理就好？ 为了减少网络请求：主要用上了websocket来网络请求处理， 后台主要适用了node-opencv

问题：网络传输会影响识别速度。 1.图片数据转化耗时：视频转成当前帧图片，toDataURL()，750*1334，耗时大概在80ms左右。 优化方法：toDataURL('image/jpeg')会加快速度，因为这里不需要计算Alpha通道。在20ms左右。速度会高于toDataURL(); 2.图片传输耗时：websocket在传输图片信息大约在50ms左右。

#技术实现第三步：实现虚拟场景和视频结合

2D内容和视频结合：canvas，利用 Canvas API 在相应坐标上进行绘制，展示一个实现的demo: 3D内容和视频结合：three.js或者layabox,利用webgl API在对应位置增加3D模型。 最后附上demo：

总结

最近在AR项目探索，在web端的实现AR已经有了很好基础，解析耗时都是可以接受的。后端解析，前端结合3D是比较理想的解决方案。

欢迎关注"腾讯DeepOcean"微信公众号,每周为你推送前端、人工智能、SEO/ASO等领域相关的原创优质技术文章：

看小编搬运这么辛苦，关注一个呗：)