内容简介：。# AR实现原理分析三要素：
导语 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是比较理想的解决方案。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- ROS探索总结（五十六）—— launch文件
- ROS2探索总结（十）—— ROS 2基础工具使用入门
- ROS2探索总结（十二）—— ROS2 Python编程基础
- airflow探索篇
- 探索 React 合成事件
- webSocket原理探索
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
