网上找了些文章测试了下，到现在为止还是很多浏览器不支持，所以也没有什么实用价值啊。
以下代码在笔记本电脑浏览器chrome25,irefox19上测试通过（FF需要在地址栏输入about:config ，把media.navigator.enabled 值设置为 true）。
在安卓手机上用opera HD浏览器测试通过，安卓自带浏览器和QQ浏览器和360浏览器不成功。
网上找了些文章测试了下，到现在为止还是很多浏览器不支持，所以也没有什么实用价值啊。
以下代码在笔记本电脑浏览器chrome25,irefox19上测试通过（FF需要在地址栏输入about:config ，把media.navigator.enabled 值设置为 true）。
在安卓手机上用opera HD浏览器测试通过，安卓自带浏览器和QQ浏览器和360浏览器不成功。
[html] view plaincopy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试摄像头</title>
<style>
#video { border: 1px solid #ccc; display:inline-block; }
#canvas { border: 1px solid #ccc; display:inline-block;}
#take_photo{background-color:orange;width:100px;height:30px;border:0px;}
</style>
</head>
<body>
<video id="video" width="480" height="320" autoplay></video>
<canvas id="canvas" width="480" height="320"></canvas>
<input id="take_photo" name="take_photo" value="拍照" type="button" />
</body>
</html>
<script type="text/javascript">
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
window.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementById("canvas"),//画布容器
context = canvas.getContext("2d"),//创建绘画对象
video = document.getElementById("video"),//视频容器
videoobj = {"video": true },
errback = function(error) {
console.log("error", error.code);
};
if(navigator.getUserMedia) {
navigator.getUserMedia(videoobj, function( stream) {
video.src = stream;
}, errback);
} else if (navigator.webkitGetUserMedia) {//chrome
navigator.webkitGetUserMedia(videoobj,function(stream) {
video.src = window.URL.createObjectURL(stream) || stream;
} , errback)
}
else if (navigator.mozGetUserMedia) {//firefox
navigator.mozGetUserMedia(videoobj,function(stream) {
video.src = window.URL.createObjectURL(stream) || stream;
} , errback)
}
else if (navigator.msGetUserMedia) {//IE
navigator.msGetUserMedia(videoobj,function(stream) {
video.src = window.URL.createObjectURL(stream) || stream;
} , errback)
}
video.play();
document.getElementById("take_photo").addEventListener("click", function(){
context.drawImage(video, 0, 0, 480, 320);//视频截屏
});
}, false);
</script>
