說明：（1）在頁面上顯示攝像頭錄像。
（2）將攝像頭的某個幀截屏到img裏（實際是base64的圖像編碼）
（3）調用jquery上傳圖片（非文件上傳的模式）
（4）使用Spring MVC 解析並保存圖片。
這個功能主要參考了下面兩個鏈接（一個是截屏，一個是上傳）：
下面是html代碼（注意需要將頁面放在tomcat裏運行，直接在系統裏打開是不行的）
https://www.cnblogs.com/jiangcheng-langzi/p/8391497.html
https://www.cnblogs.com/MrSong97/p/9523666.html
<html>
<head>
<head>
<title> 打開攝像頭並截取照片須本地tomcat下運行</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script language="javascript">
//將dataUrl轉換爲blob準備上傳
function b64toBlob(b64Data, contentType='', sliceSize=512) {
const byteCharacters = atob(b64Data);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, {type: contentType});
return blob;
}
window.onload = function () {
var canvas = document.getElementsByTagName('canvas')[0],
context = canvas.getContext('2d'),
video = document.getElementsByTagName("video")[0],
snap = document.getElementById("snap"),
close = document.getElementById("close"),
start = document.getElementById("start"),
MediaStreamTrack;
start.addEventListener('click', function () {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(function (stream) {
console.log(stream);
MediaStreamTrack=typeof stream.stop==='function'?stream:stream.getTracks()[1];
video.src=(window.URL).createObjectURL(stream);
video.play();
}).catch(function(err){
console.log(err);
});
}else if(navigator.getMedia){
navigator.getMedia({
video: true
}).then(function (stream) {
console.log(stream);
MediaStreamTrack=stream.getTracks()[1];
video.src=(window.webkitURL).createObjectURL(stream);
video.play();
}).catch(function(err){
console.log(err);
});
}
});
snap.addEventListener('click', function () {
context.drawImage(video, 0, 0,200,150);
//console.log(canvas.toDataURL()); //也可以指定圖像格式： var strDataURI = oCanvas.toDataURL("image/jpeg"); 得到是base64圖像流
//將圖像顯示到img元素:
//下面將圖片顯示到圖像組件
var dataurl = canvas.toDataURL("image/jpeg");
document.getElementById("demo").src= dataurl;//
});
close.addEventListener('click', function () {
MediaStreamTrack && MediaStreamTrack.stop();
});
}
function upload()
{
var ImageURL = document.getElementById("demo").src;
//var ImageURL2 = document.getElementById("demo2").src;
var block = ImageURL.split(";");
// Get the content type of the image
const contentType = block[0].split(":")[1];// In this case "image/jpeg"
// get the real base64 content of the file
const realData = block[1].split(",")[1];//
// Convert it to a blob to upload
var blob = b64toBlob(realData, contentType);
// new a formData
const formData = new FormData();
formData.append('blob',blob);
//formData.append('blob1', blob);//模擬在增加第二個，一次傳2張
// upload
$.ajax({
url:"/portal/rest/ucenterapi/testuploadvideo",
data: formData,
type:"POST",
contentType:false,
processData:false,
error:function(err){
},
success:function(data){
alert('hi');
}
});
}
</script>
</head>
<body>
<video width="200px" height="150px"></video>
<canvas width="200px" height="150px"></canvas>
<p>
<button id="start">打開攝像頭</button>
<button id="snap">截取身份證正面</button>
<!--<button id="snap2">截取身份證背面</button>-->
<button id="close">關閉攝像頭</button>
<button id="uploadFile" οnclick="upload()">上傳身份證</button>
</p>
<p>
<img id="demo" src=""/>
<img id="demo2" src=""/>
</body>
</html>
下面是spring MVC接口代碼：
@RequestMapping(value="/testuploadvideo",method={RequestMethod.POST,RequestMethod.GET}) //,RequestMethod.GET
public @ResponseBody Object testuploadvideo
(
HttpServletRequest request, HttpServletResponse response) throws Exception
{
logger.info("調用視頻截圖::::");
//https://blog.csdn.net/niuch1029291561/article/details/17377903
// 圖片新名字
HashMap<String,Object> map = new HashMap();
//遍歷頭部檢查accessToken
Enumeration<?> enum1 = request.getHeaderNames();
//檢查頭部信息
while (enum1.hasMoreElements())
{
String key = (String) enum1.nextElement();
String value = request.getHeader(key);
System.out.println(key + "\t" + value);
}
//遍歷傳入參數
Enumeration em = request.getParameterNames();
while (em.hasMoreElements())
{
String name1 = (String) em.nextElement();
String value = request.getParameter(name1);
logger.info(name1+"/"+value);
}
//logger.info("上傳身份證照照片");
//應該檢查access_token如果access_token超時則不允許上傳，防止傳入過多的垃圾圖片。
CommonsMultipartResolver multipartResolver=new CommonsMultipartResolver(
request.getSession().getServletContext());
//檢查form中是否有enctype="multipart/form-data"
if(multipartResolver.isMultipart(request))
{
//將request變成多部分request
MultipartHttpServletRequest multiRequest=(MultipartHttpServletRequest)request;
//獲取multiRequest 中所有的文件名
Iterator iter=multiRequest.getFileNames();
int i=0;
while(iter.hasNext()) //暫時先處理一個
{
i++;
logger.info("第"+String.valueOf(i)+"個文件！");
//一次遍歷所有文件
MultipartFile picFile=multiRequest.getFile(iter.next().toString());
if(picFile!=null)
{
//String path="E:/springUpload"+file.getOriginalFilename();
//上傳
// file.transferTo(new File(path));
String name = StringUtil.getUUID();
String oldName = "aaaaaaa.jpg";//picFile.getOriginalFilename();
String dt = StringUtil.getCurrentDateTime();
String fullPath = request.getRealPath("/")+"upload/"+dt.substring(0,4)+"/"+dt.substring(5,7)+"/"+dt.substring(8,10)+"/";
File file = new File(fullPath);
if(!fullPath.endsWith("/"))fullPath+="/";
file.mkdirs();
// 後綴名
String exeName = oldName.substring(oldName.lastIndexOf("."));
File pic = new File(fullPath + name + exeName);
logger.info("上傳文件地址：");
logger.info(fullPath + name + exeName);
String path1 = "/portal"+"/upload/"+dt.substring(0,4)+"/"+dt.substring(5,7)+"/"+dt.substring(8,10)+"/"+name + exeName;
logger.info(path1);
// 保存圖片到本地磁盤
picFile.transferTo(pic);
//Map map = new HashMap();
map.put("url", path1);
map.put("rowId", name);
map.put("code", 0);
map.put("msg", "上傳頭像成功!");
return map;
}
}
}
return map;
}
下面是頁面效果：
