第10章 使用getUserMedia()

getUserMedia

传统意义上，在web上与本地资源交互的唯一方式就是上传文件，唯一能够发生交互的本地设备是鼠标和键盘。幸运的是，现在情况有所改观了，上一节我们说明了如何操作音频，这一节我们谈谈如何调用摄像头。

首先，我要强调的是，这是一个非常非常处于试验阶段的功能，涉及到本地设备的API已经更改过很多次，可能在其成为标准前还会被更改很多次。至于其兼容性，目前除了Safari外的主流浏览器都是支持的。在手机端的话，支持情况就很差了，本章只是向你展示web在未来具有的丰富的功能，你也可以尝尝鲜，但是现在还是不要在生成环境中使用这个。好啦，我们开始学吧。

getUserMedia不能通过本地文件系统打开，想要使用它，你需要通过本地服务器调用它。

首先在页面中添加一个video标签，这是webcam呈现的地方。

<video autoPlay></video>

在调用webcam之前，我们需要调用navigator.webkitGetUserMedia != null看看当前浏览器是否支持这个api。如果支持，我们就可以继续下面的操作了。我们新建一个options对象用以注明我们想要调用的功能（视频，音频，或者二者都支持）。注意在Chrome中，不支持仅音频。

if(navigator.webkitGetUserMedia!=null) { 
    var options = { 
        video:true, 
        audio:true 
    }; 

    //request webcam access 
    navigator.webkitGetUserMedia(options, 
        function(stream) { 
            //get the video tag 
            var video = document.querySelector('video'); 
            //turn the stream into a magic URL 
            video.src = window.webkitURL.createObjectURL(stream); 
        }, 
        function(e) { 
            console.log("error happened"); 
        } 
    ); 
}

当webkitGetUserMedia被调用时，其会打开一个对话框询问用户是否允许当前页面开启该功能，如果用户接受了，第一个函数就会被调用，如果出现问题，则错误处理函数会被调用。

然后通过webkitURL.createObjectURL()我们就获得了链接到页面视频标签的数据流,一旦挂钩起来，视频元素就会显示webcam直播。

效果如下：

截图

当然，我们也有一些方法来操作视频。video标签和canvas可以很好的配合。我们可以对webcam截图，然后把它绘制到2D Canvas元素中。

<form><input type='button' id='snapshot' value="snapshot"/></form> 

<canvas id='canvas' width='100' height='100'></canvas> 

<script language='javascript'> 
document.getElementById('snapshot').onclick = function() { 
    var video = document.querySelector('video'); 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    ctx.drawImage(video,0,0); 
} 
</script>

当按钮被点击时，我们就可以抓取视频元素中的当前图案并绘制到Canvas中。绘图使用的函数还是和绘制静态图片一样使用drawImage(),我们同样可以用下面代码来缩放图片

//draw video source resized to 100x100 
    ctx.drawImage(video,0,0,100,100);

效果图如下：

这就是webcam的核心概念了，注意webcam也是图像，我们同样可以用像素缓存那节中学到的效果来对其进行加工，下述代码将反转截图

   var video = document.querySelector('video'); 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    ctx.drawImage(video,0,0); 
    //get the canvas data  
    var data = ctx.getImageData(0,0,canvas.width,canvas.height);  
    //invert each pixel  
    for(n=0; n<data.width*data.height; n++) {  
        var index = n*4;   
        data.data[index+0] = 255-data.data[index+0];  
        data.data[index+1] = 255-data.data[index+1];  
        data.data[index+2] = 255-data.data[index+2];  
        //don't touch the alpha  
    }  

    //set the data back  
    ctx.putImageData(data,0,0);

你可以通过不断的获取video图案来实现动态效果。

更多酷炫的效果

我所展示的只是冰山一角，下面是其它的一些天才做出来的效果。 Neave.com提供类似Instagram滤镜的在线视频效果。