web端开发增强现实应用 web应用与开发 功能实现

在前端开发中，工程师常常这样调侃“一入前端深似海”。确实，前端的应用面十分广，知识点比较零碎，学习范围也比较大，当然，实现的功能也更加全面。所以对于当下十分火热的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）转换的JavaScript库，结合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(&apos;2d&apos;).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的增强现实应用程序的轻便库，现在已被移植到纯JavaScript）：http://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在JavaScript中创建头部跟踪。

4.HTML5 Face Detection：http://wesbos.com/html5-video-face-detection-canvas-javascript/

使用HTML5，Canvas和Javascript在你的脸上放置“Groucho Marx”风格的眼镜，鼻子和胡子。

AR酱原创，转载务必注明

微信号AR酱（ARchan_TT）

AR酱官网：www.arjiang.com