导语 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 是比较理想的解决方案.
来源: https://juejin.im/post/5beb7fc5f265da615a415eaa