WebAR——浏览器实现摄像头与视频的结合

在web上实现AR，即将视频和摄像头结合在一起，以达到增强现实的效果，这有点像视频中的“绿屏效果”。要在网页上实现“绿屏效果”，主要涉及到两个技术点，一是用HTML5中的canvas技术处理视频，二是调取摄像头并将摄像头捕获的图像与处理后的视频叠加在一起。

实现步骤：

1. 准备一个背景为绿色的视频（其它颜色也可以，只要与视频主体的颜色不一样），
   为了最后比较好的效果，建议先在AE中用抠图插件keylight对视频进行预处理，把背景的绿幕颜色统一。之所以不直接在AE中将绿幕抠掉，是因为没有一种视频格式支持透明效果，导出后的背景是黑色的，所以只能在网页上用代码抠图。
2. 用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毫秒执行一次以上过程，处理后的视频就能流畅地与原视频同步。

3. 视频处理好了，接下来是调取摄像头。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