您的位置：首页 > Web前端 > HTML5

web HTML5 调用摄像头的代码

2016-06-01 18:05 507 查看

最近公司要求做一个在线拍照的功能，具体代码如下：

<html>
<head>
<title>html5调用摄像头拍照</title>
<style type="text/css">
#camera {
width: 640px;
height: 525px;
position: fixed;
border: 1px solid #f0f0f0;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.6);
box-shadow: 0 0 4px rgba(0,0,0,0.6);
}

#buttons {
text-align: center;
}

.btn {
width: 99px;
height: 38px;
line-height: 32px;
margin: 0px 4px 0px 0px;
border: 1px solid #fff;
-moz-border-radius: 5px; /* Gecko browsers */
-webkit-border-radius: 5px; /* Webkit browsers */
border-radius: 5px; /* W3C syntax */
cursor: default;
text-align: center;
font-size: 14px;
color: #fff;
}
.btn_blue {
background-color: #5CACEE;
}
.btn_green {
background-color: #00EE00;
}
.hidden{ display:none }
</style>
</head>
<body>
<div id="camera">
<div id="contentHolder">
<video id="video" width="640" height="480" autoplay></video>
<canvas style="display:none;" id="canvas" width="640" height="480"></canvas>
</div>
<div id="buttons">
<button id="btn_snap" class="btn btn_blue">拍照</button>
<button id="btn_cancel" class="btn btn_blue" style="display:none;">取消</button>
<button id="btn_upload" class="btn btn_green" style="display:none;">上传</button>
</div>
</div>
</body>
</html>
<script type="text/javascript">
// 添加事件监听器
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("Video capture error: ", error.code);
};

// 添加video 监听器
if (navigator.getUserMedia) { // 标准
navigator.getUserMedia(videoObj, function (stream) {
video.src = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) { // WebKit 前缀
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
else if (navigator.mozGetUserMedia) { // Firefox 前缀
navigator.mozGetUserMedia(videoObj, function (stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
else {
alert("浏览器不支持HTML5！");
//console.log('your browser not support getUserMedia');
}

document.getElementById("btn_snap").addEventListener("click", function () {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
</script>

但是有一些缺点就是，无法调整摄像头的分辨率，导致拍摄的照片不清晰。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航