腾讯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处理视频越大，识别速度越慢，纸箱就越明显。 目前主流的分辨率为750*1334左右，速度肯定不足以直接处理这个大小的视频。 在下图中附上参考和网站。 jsartoolkit5和AR.js :主要通过使用Emscripten将artoolkit c库编译为相应的js文件(asm.js )文件来改进性能和计算。 但是，在对应视频流的分析中存在轻微的抖动。
查看相应的帧速率，js-ar uco=tracking.jsjsartoolkit 5ar.js
场景2:网络套接字opencv前端处理视频流还不够，直接在后端处理好吗？ 为了减少网络请求：主要使用websocket进行网络请求处理，后台主要应用node-opencv
问题：网络传输会影响识别速度。 1 .图像数据转换需要时间：视频被转换为当前帧图像，toDataURL (，750*1334 )，时间约80ms左右。 优化方法： todataurl(image/JPEG )不需要计算alpha通道，从而提高速度。 20毫秒左右。 toDataURL (速度更快； 2 .图片传输耗时： websocket传输图片信息约50ms左右。
#技术实现第三步：虚拟场景与视频的结合实现2D内容与视频的结合。 canvas利用Canvas API在相应的坐标上进行绘制，实现了demo: 3D内容和视频的结合。 three.js或layabox使用webgl API在相应的位置添加3D模型。 最后附上demo。 总结最近在AR项目上的探索，可以理解web端的AR的实现已经奠定了基础，分析需要时间。 对于后端分析，将3D合并到前端是理想的解决方案。 欢迎使用“腾讯DeepOcean”微信公众号。 每周为您带来关于前端、人工智能、SEO/ASO等领域的原创优秀技术文章。 编辑搬运这么辛苦，请关注一件事。 ）