web HTML5 调用摄像头的代码
2024-08-24 06:32:11
最近公司要求做一个在线拍照的功能，具体代码如下：
<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>
但是有一些缺点就是，无法调整摄像头的分辨率，导致拍摄的照片不清晰。
最新文章
- 解析大型.NET ERP系统 窗体、查询、报表二次开发
- 学习SQLite之路（一）
- 检索 COM 类工厂中 CLSID 为 {10020200-E260-11CF-AE68-00AA004A34D5} 的组件时失败,解决方法如下：
- (medium)LeetCode 224.Basic Calculator
- Oracle ->> 随机函数
- 自定义控件（视图）1期笔记01：View 和 ViewGroup
- SPFA_YZOI 1662: Easy sssp
- 【动态规划】Vijos P1313 金明的预算方案（NOIP2006提高组第二题）
- Linux系统下用C语言获取MAC地址
- （1）认识javascript
- JSP入门3 Servlet
- Scrum 冲刺 第二日
- python-turtle 快给你的爷爷看看啥是 “小猪佩奇”
- python 装饰器--对有无参数的函数进行装饰
- Hadoop生态圈-Azkaban实现hive脚本执行
- 2016最新的中国省市区三级数据库表.sql mssql
- linux学习笔记-4.系统命令
- thinkcmf 角色授权支持分类
- http 错误码对照表
- Lyft Level 5 Challenge 2018 - Elimination Round