在前端开发中，工程师常常这样调侃“一入前端深似海”。确实，前端的应用面十分广，知识点比较零碎，学习范围也比较大，当然，实现的功能也更加全面。所以对于当下十分火热的AR，运用前端技术也可以轻松的实现。web 平台在AR，SLAM或跟踪的技术应用上将会越来越普及。
今天我们来讲解如何运用JSARToolKit库与WebRTC 的getUserMedia API，开发web 端的AR 应用。
ps：
1.部分整理翻译于：https://www.html5rocks.com/zh/tutorials/webgl/jsartoolkit_webrtc/
2.大家也可以参考下之前的Web AR 开发指南：教程链接
预览效果：
所需识别图：
实现思路：
1.设置JSARToolKit
2.使用getUserMedia访问网络摄像头
3.检测标记
4.矩阵映射
关于JSARToolKit
JSARToolkit是一个从FLARToolkit（Flash）转换的Java库，结合Html5 与 canvas 来实现网页端的AR 效果。
项目地址：https://github.com/kig/JSARToolKit
对于JSARToolKit，比较重要的是navigator.getUserMedia（） 方法，它用于访问摄像头，传递一个可以使用html5 <video>标签显示的视频流.但是JSARToolKit需要单个帧来检测标记。所以首先在画布上逐帧绘制视频帧，并使得ToolKitcanvas.changed = true。JSARToolKit通过使用光栅化来查找每个帧并搜索标记然后计算标记位置。得到的矩阵位置然后绘制模型即可（JSARToolKit是对canvas元素进行操作，当你将画布传递给JSARToolKit进行分析时，JSARToolKit将返回在图像中找到的AR标记列表和相应的转换矩阵。要在标记之上绘制一个3D对象，需要将位置信息传递给任何的一个3D引擎即可进行绘制操作）。
我们对JSARToolKit进行设置，第一步是创建canvas对象，摄像机参数对象和检测对象。
varraster=newNyARRgbRaster_Canvas2D(canvas);
//设置摄像机参数
var param=newFLARParam(320,240);
//FLARMultiIdMarkerDetector是用于标记检测的实际引擎
var detector=newFLARMultiIdMarkerDetector(param,120);
//在持续模式下，可以跟踪多个帧的标记。
detector.setContinueMode(true);
param.copyCameraMatrix(display.camera.perspectiveMatrix,10,10000);
使用getUserMedia访问网络摄像头
接下来，创建一个通过WebRTC API获取网络摄像头视频的视频元素。对于预录制的视频，只需将视频的源属性设置为视频URL。
|
检测标记
一旦我们检测器运行ok，我们就可以开始给它进行图像检测AR矩阵。首先将图像绘制到画布上，然后运行检测器。检测器将返回在图像中找到的标记数。
//将准备好的视频绘制到canvas上，缩放到320x240。
canvas.getContext('2d').drawImage(video,0,0,320,240);
//底层canvas已更改。
canvas.changed=true;
varmarkerCount=detector.detectMarkerLite(raster,threshold);
最后一步是迭代检测到的标记并获得它们的转换矩阵。
矩阵映射
将JSARToolKit矩阵复制到glMatrix矩阵.（PS：要将库与另一个库（如Three.js）一起使用，还需要编写一个将ARToolKit矩阵转换为库的矩阵格式的函数。还需要引入FLARParam.copyCameraMatrix方法。copyCameraMatrix方法将FLARParam透视矩阵写入glMatrix样式矩阵。）
如若使用X3DMO也可以这样来操作，大同小异。首先创建X3DOM上下文将一个3DOM标签添加到index.html中，创建一个场景，并添加一个带有id的空的。然后在要显示的模型中添加一个节点。
然后在JSARToolKit初始化中进行一些小的更改以便获得权限。修改X3DOM viewfrustum中指定的剪切平面和当前的透视矩阵。X3DOM运行时API提供代理对象读取和修改运行时参数。运行时连接到每个X3D元素，比如如下的矩阵示例：
然后 处理矩阵：
最后，我们就可以绘制模型了，将其放在矩阵中，并将其设置为MatrixTransform节点的属性值。
然后你就会实现类似这样的效果：
以上两种方法大同小异，大家可以比较着使用，接下来给大家分享一些web AR 的开发资源：
1.JS-ARUCO（ARUCO是基于OpenCV的增强现实应用程序的轻便库，现在已被移植到纯Java）：https://code.google.com/p/js-aruco/
2.HTML5-AR：https://github.com/dontcallmedom/html5-augmented-reality
该演示结合了地理位置，摄像机访问，提供一个扩展现实的Web应用程序，覆盖了实时视频流上的几个兴趣点。
3.WebRTC Head Tracking：https://dev.opera.com/articles/head-tracking-with-webrtc/
使用WebRTC，Media Capture和Streams在Java中创建头部跟踪。
4.HTML5 Face Detection：https://wesbos.com/html5-video-face-detection-canvas-java/
使用HTML5，Canvas和Java在你的脸上放置“Groucho Marx”风格的眼镜，鼻子和胡子。
AR酱原创，转载务必注明
微信号AR酱（ARchan_TT）
AR酱官网：www.arjiang.com
标签： webservice客户端开发