在web上实现AR，即将视频和摄像头结合在一起，以达到增强现实的效果，这有点像视频中的“绿屏效果”。要在网页上实现“绿屏效果”，主要涉及到两个技术点，一是用HTML5中的canvas技术处理视频，二是调取摄像头并将摄像头捕获的图像与处理后的视频叠加在一起。
实现步骤：
- 准备一个背景为绿色的视频（其它颜色也可以，只要与视频主体的颜色不一样），
为了最后比较好的效果，建议先在AE中用抠图插件keylight对视频进行预处理，把背景的绿幕颜色统一。之所以不直接在AE中将绿幕抠掉，是因为没有一种视频格式支持透明效果，导出后的背景是黑色的，所以只能在网页上用代码抠图。 - 用canvas的drawImage()方法获取video的图像并将图像绘制在一个canvas画布上
再用getImageData()方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据，对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值:
R - 红色（0-255）
G - 绿色（0-255）
B - 蓝色（0-255）
A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）。
接下来对图像数据进行处理，把绿色的像素的透明度设为0，即把绿色像素抠掉。
最后把处理好的图像数据通过putImageData()方法放回另一个canvas画布，该画布的背景加了一张图片。
实现代码:
var computeFrame= function() {
ctx1.drawImage(video, 0, 0, width, height);
var frame = ctx1.getImageData(0, 0, width, width);
var l = frame.data.length / 4;
for (var i = 0; i < l; i++) {
var r = frame.data[i * 4 + 0];
var g = frame.data[i * 4 + 1];
var b = frame.data[i * 4 + 2];
if (20<=r <= 90 && g >= 190 && b <= 30)
frame.data[i * 4 + 3] = 0;
}
ctx2.putImageData(frame, 0, 0);
ctx3.putImageData(frame, 0, 0);
return;
}
}
效果如下:
1.png
如图视频绿幕已被抠掉且露出背景图，只要每1000/60毫秒执行一次以上过程，处理后的视频就能流畅地与原视频同步。
- 视频处理好了，接下来是调取摄像头。WebRTC是一个支持网页浏览器进行实时语音对话
或视频对话的技术，WebRTC在持续不断地发展，它其中最广为人知的一个函数就是getUserMedia()。有了它，你就可以访问设备的摄像头和麦克风，并且可以请求视频流，音频流或者两者同时请求。
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia({video:true}, onSuccess, onError); //调用摄像头捕捉视频信息
function onSuccess(stream){
video1.src = window.URL.createObjectURL(stream);
}
function onError(){
alert("获取视频出错。");
}
我们把摄像头的图像代替之前ctx2的背景图，这样就把现实图像跟视频叠加在一起，实现了webAR增强现实的效果。
效果如下:
2.png
