目前的AR开发主要是在unity，android，ios上完成的，但在WEB平台上也已经出现了一些有趣的AR案例。比如之前迪士尼的电影宣传网页AR游戏。今天给大家分享一些关于Web+AR的技术原理与开发心得。
实现原理
AR实时地计算摄影机影像的位置及角度并加上相应模型，所以不管是用opencv或Python的CV库，ARToolkit还是我们今天所说的用javaScripts来原生的实现AR效果，开发的步骤都大同小异：
获取摄像头分析摄像源，识别Maker模型虚拟叠加显示
第一部分：关于摄像头
我们通过WebRTC API来进行摄像头的操作，WebRTC（即Web Real-Time Communication）是一个支持网页浏览器进行实时语音对话或视频对话的技术，通过其 navigator.getUserMedia（）这一方法我们可以获得摄像头。
该方法提示用户允许使用一个视频输入设备（如相机）。如果允许，则MediaStream其视频来自这些设备的信息被传递到指定的成功回调。
语法：
navigator.getUserMedia（constraints，successCallback，errorCallback）;
参数说明：
constraints:指定媒体对象的类型，比如是获取摄像头还是麦克风，是前置摄像头还是后置
successCallback:调用成功后的回调方法
function(stream) {
var video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
// Do something with the video here.
};
}
errorCallback:调用失败。
实例代码：
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
video.play();
},
function(err) {
console.log("The following error occurred: " + err.name);
);
} else {
console.log("getUserMedia not supported");
ps：在开发测试时，chrome因为 HTTPS 页面启用摄像头，所以建议用FireFox。
相关资源推荐：
JS 调取摄像头：http://blog.csdn.net/qq_16559905/article/details/51743588
第二部分：识别方面
在识别方面，推荐大家几个JS库：
js-arucojsartoolkitskarf.jsawe.jsAR.js
接下来，为大家总体性的逐一讲解每个库
js-aruco
js-aruco 是基于 ArUco（opencv 的一个增强现实的轻量库）的JavaScript端口。
JSARToolKit and Three.js视频：http://v.qq.com/page/l/i/k/l0393nrcjik.html
Maker要求：
具有外部未使用黑色边框的7x7网格。内部5x5单元格包含ID信息。
white - black - black - black - black
white - black - white - white - white
black - white - black - black - white
black - white - white - white - black
如：
使用js-aruco首先我们需要创建一个AR.Detector对象
var detector = new AR.Detector();
接着接入detect功能：
var markers = detector.detect(imageData);
关于imageData：其参数必须是有效的Canvas对象
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var imageData = context.getImageData(0, 0, width, height);
js-aruco还可以实现3D姿态估计，具体的可以看看Github上的源码：https://github.com/jcmellado/js-aruco
提到js-aruco，我们不得不提到aruco。
3D Augmented Reality with JavaScript视频：https://v.qq.com/x/page/l0393tof7pe.html
aruco厉害就在于它的相机校准与标识检测。由于我们这篇主要是关于Web+AR，所以我们简单点一下aruco，以后有机会详细为大家解析。今天先给大分享一些关于aruco的文档或资源：
http://www.uco.es/investiga/grupos/ava/node/26
https://sourceforge.net/projects/aruco/
aruco-marker是一个可以为Aruco增强现实标记库生成标记图像的JavaScript库。aruco-marker生成SVG图像，使其易于缩放到任何尺寸或打印出来。它可以直接在浏览器中使用也可以通过AMD（Require）或NodeJS使用。
例如：
详细请看：https://github.com/bhollis/aruco-marker
jsartoolkit
学习资源：
下载地址：https://github.com/artoolkit/jsartoolkit5
文档：https://artoolkit.org/blog/2016/07/jsartoolkit-and-threejs
使用jsartoolkit编写AR应用：https://www.html5rocks.com/zh/tutorials/webgl/jsartoolkit_webrtc/
JSARToolKit 是 JavaScript 增强现实库。它是一个根据 GPL 发布的开放源代码库，从FLARToolKit移植过来，JSARToolKit完美适合任何Web框架。
原理：
JSARToolKit 要运行在画布元素上。在您要用作纹理的图片或视频元素上，将 crossOrigin 属性设置为 '' 或‘anonymous’。将画布传递给 JSARToolKit 进行分析后，JSARToolKit 会返回在图片和相应转换矩阵中发现的 AR 标记的列表。要在标记上绘制 3D 对象，请将转换矩阵传递给您使用的任何 3D 呈现库，以便通过矩阵转换对象。然后在 WebGL 场景中绘制视频帧，并在视频帧上绘制对象。要使用 JSARToolKit 分析视频，请在画布上绘制视频，然后将画布传递给 JSARToolKit。在每一帧上都执行此操作后，视频增强现实跟踪就设置好了。
示例：
基本操作如下：
加载ARCameraParam对象创建一个ARController对象设置检测模式如果需要，加载模式标记或多标记添加getMarker事件侦听器呼叫ARController.process(img)
var param = new ARCameraParam();
param.onload = function () {
var img = document.getElementById('my-image');
var ar = new ARController(img.width, img.height, param);
// Set pattern detection mode to detect both pattern markers and barcode markers.
// This is more error-prone than detecting only pattern markers (default) or only barcode markers.
//
// For barcode markers, use artoolkit.AR_MATRIX_CODE_DETECTION
// For pattern markers, use artoolkit.AR_TEMPLATE_MATCHING_COLOR
ar.setPatternDetectionMode(artoolkit.AR_TEMPLATE_MATCHING_COLOR_AND_MATRIX);
ar.addEventListener('markerNum', function (ev) {
console.log('got markers', markerNum);
});
ar.addEventListener('getMarker', function (ev) {
console.log('found marker?', ev);
ar.loadMarker('Data/patt.hiro', function (marker) {
console.log('loaded marker', marker);
ar.process(img);
param.src = 'Data/camera_para.dat';
具体请看文档：https://github.com/artoolkit/jsartoolkit5
skarf.js
官网：http://cg.skeelogy.com/skarfjs/
下载地址：https://github.com/skeelogy/skarf.js
skarf是在Three.js中处理JavaScript增强现实库的框架。它集成了JSARToolKit与js-aruco.并具有一下特点：
检测到相关联的标记时自动加载模型（在JSON文件中指定关联）。目前支持的模式格式：.obj，.js和binary .js。将世界原点固定到指定的主要标记，相机和其他标记位于该原点周围自动补偿不同AR库和Three.js之间的坐标系差异GUI标记，允许用户使用AR标记来控制设置可扩展性。以适合其他JavaScript AR库
awe.js
下载地址：https://github.com/buildar/awe.js/
API文档：https://github.com/awe-media/awe.js/wiki/awe.js-api-overview
教程：https://www.sitepoint.com/augmented-reality-in-the-browser-with-awe-js/
Awe.js是一个JavaScript库，它使用Three.js，有很强的功能扩展性。
geo_ar - 允许您将对象放在设定的标记点上。grift_ar - 兼容Oculus Rift。leap_ar - 与Leap Motion控制器集成。marker_ar - 允许你创建AR markless的体验。
AR场景的初始化
window.awe.init({
device_type: awe.AUTO_DETECT_DEVICE_TYPE,
settings: {
container_id: 'container',
fps: 30,
default_camera_position: { x:0, y:0, z:0 },
default_lights: [{
id: 'point_light',
type: 'point',
color: 0xFFFFFF
}]
添加标记点：
awe.projections.add({
id: 'wormhole',
geometry: {shape: 'plane', height: 400, width: 400},
position: {x: 0, y: 0, z: 0},
rotation: {x: 90, z: 45},
material: {
type: 'phong',
color: 0x000000
}, {poi_id: 'marker'});
添加显示的模型（7个不同的立方体）：
id: 'ar_button_one',
geometry: {shape: 'cube', x: 60, y: 30, z: 5},
rotation: {y: 45},
position: {x: -5, y: -31, z: -5},
color: 0xFF0000
}, {poi_id: 'marker’});
AR.js
下载地址：https://github.com/jeromeetienne/AR.js
AR.js是一个应用于web的高效的AR库。
具有以下特点：
速度快。基于Web的：无需安装。基于three.js + jsartoolkit5开源：它是完全开源的，免费的！标准：它适用于任何手机上WebGL于WebRTC。
第三部分：关于显示
我们识别marker之后，就要显示模型了，当然若要显示2d的图形就很好实现了，但效果不够惊艳。为了实现炫酷的3D效果，我们需要了解Web 3D的知识，关于web开发3D模型，我们可以了解一下几个库：
WebGLThree.jsA-Frame
WebGL
WebGL（全写Web Graphics Library）是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，并展示3D模型或场景了。
API：https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API
视频教程：http://www.hewebgl.com/#
博客教程：http://blog.csdn.net/tiewen/article/details/6895582
Three.js
Three.js（https://github.com/mrdoob/three.js）是一个JavaScript 3D库，封装了底层的WebGL图形接口，提供简化、高效的三维图形程序开发。一般我们在web的AR与VR开发上会用到它。
官网：https://threejs.org/
博客教程：http://www.cnblogs.com/shawn-xie/archive/2012/08/16/2642553.html
教程：http://blog.csdn.net/lijunfan1994/article/details/52370629
A-Frame
官网：https://aframe.io/
下载地址：https://github.com/aframevr/aframe
最后推荐给大家Web AR的系列教程：
web AR系统-1 架构探索----https://zhuanlan.zhihu.com/p/24717199web AR系统-2 效率评估----https://zhuanlan.zhihu.com/p/24796493web AR系统-3 效率评估-websocket----https://zhuanlan.zhihu.com/p/24853634web AR系统-4 前端特征点提取----https://zhuanlan.zhihu.com/p/25068401web AR 前端qrcode识别 - 1----https://zhuanlan.zhihu.com/p/25128932web AR 前端qrcode识别 - 2 图片处理----https://zhuanlan.zhihu.com/p/25158289web AR 前端qrcode识别 - 3 关于流程的一些总结----https://zhuanlan.zhihu.com/p/25255704web AR 前端二维码跟踪 - 1 JS图像变换以及加速方案----https://zhuanlan.zhihu.com/p/25291351web AR 前端二维码跟踪 - 2 homography pose的计算----https://zhuanlan.zhihu.com/p/25816168