心血来潮想在网页上搞个拍照上传，由于以前没做过类似的东西，百度了一下，还真的有一个这样的API（getUserMedia），不过浏览器支持情况不实很好，以下是getUserMedia的支持情况：

getUserMedia需要传递三个参数：

1、选项对象（{video:true,audio:true}）

2、成功回调函数

3、失败回调函数

示例：（仅适用于Video）

navigator.getUserMedia({video:true}, successCallback, errCallback);

成功回调函数将接收一个参数，包含摄像头的视频流，我们需要将该视频流发送到我们的<video>元素。为此，我们设定它的src属性，但有几件事情要牢记：

Firefox使用mozSrcObject的属性，而Opera和Chrome使用src属性。
Chrome使用createObjectURL的方法，而Firefox和Opera直接发送视频流。

在Firefox中，video.mozSrcObject最初为null，而不是未定义的，所以我们可以靠这个来检测Firefox的支持（hat tip to Florent）。一旦视频流知道去哪儿了，我们就可以告诉视频流播放了。

function successCallback(stream){
if(video.mozSrcObject){
video.mozSrcObject = stream;
}else{
video.src = (window.URL && window.URL.createObjectUrl(stream)) || stream;
}
}

接下来我们添加一个错误的回调函数，在线拍照功能就已经可以运行起来了，但是我们需要注意各个浏览器厂商对于部分API的实现有差别，所以我们需要兼容到各个主流浏览器。以下是我们的最终版本，他看起来像这样：

var video = document.getElementById("video"),
videoObj = { video : true },
errCallback = function(err){
alert(err.message);
}
function successCallback(stream){
if(video.mozSrcObject){
video.mozSrcObject = stream;
}else{
video.src = (window.URL && window.URL.createObjectUrl(stream)) || stream;
}
}
navigator.getUserMedia = navigator.getUserMedia ||  navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
if(navigator.getUserMedia){
navigator.getUserMedia(videoObj, successCallback, errCallback);
}else{
console.log("not support getusermedia");
}