web AR探索和总结

2,265 阅读2分钟

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

导语 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是比较理想的解决方案。

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

看小编搬运这么辛苦,关注一个呗:)