web AR探索和总结

bannervideocover

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

AR实现原理分析三要素:

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

# 技术实现一:摄像头的调用

1.使用getUsermedia获取摄像头内容
QQ20181105-233313@2x

2.截取当前帧的内容:canvas toDataURL
QQ20181105-233401@2x
目前的浏览器支持情况如下:

1

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

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

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

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

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

问题:网络传输会影响识别速度。
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是比较理想的解决方案。

发表评论