(HTML+JS实现Usb摄像头抓取一帧图片,保存本地或传到后台)
这周接了一个摄像头捕获的一帧图片的业务,就写了一个demo,希望能帮助大家解决这类问题。
环境是idea+jdk1.8
废话不多说 ,直接上图:
代码如下
链接: link.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>个人信息获取</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.1/jquery.form.min.js"></script>
<script>
//判断浏览器是否支持HTML5的Canvas
window.onload = function () {
try {
}
catch (e) {
}
};
//获取摄像头的视频流并显示在Video 签中
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);
};
$("#snap").click(function () {
context.drawImage(video, 0, 40, 330, 250);
})
if (navigator.getUserMedia) {
navigator.getUserMedia(videoObj, function (stream) {
video.srcObject = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false)
function push() {
var data = new FormData($("#form1")[0]);
var canvans = document.getElementById("canvas");
var imgData = canvans.toDataURL();
console.log(canvans.toLocaleString());
data.append("card",$("#card").val());
data.append("name",$("#name").val());
data.append("canvas",$("#canvas").val());
console.log(canvas);
$.ajax({
url: 'http://localhost:8090/user',
type: 'post',
contentType: false,
data: data ,
processData: false,
success:function(info){
console.log(info)
},
error:function(err){
console.log(err)
}
});
}
function savea1(selector,name){
var a = document.createElement('a')
a.download = name || 'pic'
a.href = document.getElementById("canvas").toDataURL();
a.click();
}
</script>
</head>
<body>
<form id="form1" method="post" enctype="multipart/form-data">
<div id="contentHolder">
<video id="video" width="320" height="320" autoplay></video>
<input type="button" id="snap" style="width:100px;height:35px;" value="拍 照" />
<canvas style="" id="canvas" width="320" height="320"></canvas>
<input type="button" value="上传" id="ok" style="width:100px;height:35px;" onclick="push()"/>
<input type="button" value="保存到本地" id="baocun" style="width:100px;height:35px;" onclick="savea1('canvas')"/>
</div>
<div class="form-group">
<label class="sr-only" for="name">身份证号:</label>
<input type="text" class="form-control" name="card" id="card" placeholder="请输入身份证号">
</div>
<div class="form-group">
<label class="sr-only" for="name">姓名:       </label>
<input type="text" class="form-control" name="name" id="name" placeholder="请输入姓名">
</div>
</form>
</body>
</html>
我也是刚入坑的小白,有不对的地方多多指教,使用起来很方便,后台代码就看你自己的需求了,可以实现直接保存一帧图片到本地,支持Chrom浏览器
创建一个springboot项目,最简单的测试方法,就是直接在static文件夹下建一个html,直接ctrl+acv素质三连,浏览器直接访问就行
认真一点的小伙伴就粘贴在templates文件夹下,pom文件引templates,在application.properties文件中配置templates,controller直接写路径
注意大坑,在这过程中,千万不要打开别的摄像头测试软件,第一次发文,请多关照