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

如何使用HTML5实现利用摄像头拍照上传功能（java版）

2016-08-11 11:57 951 查看

前台：

<body>
<div id="contentHolder">
<video id="video" width="320" height="320" autoplay></video>
<button id="picture" style="display:block" >拍照</button>
<canvas style="display:block" id="canvas" width="320" height="320"></canvas>
<button id="sc" style="display:block" >上传</button>
</div>
<script>
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({ audio: true, video: { width: 320, height: 320 } },
function(stream) {
var video = document.getElementById("video");
video.src = window.URL.createObjectURL(stream);
video.onloadedmetadata = function(e) {
console.log('nihao44eee4aaaaddda');
video.play();
};
},
function(err) {
console.log("The following error occurred: " + err.name);
}
);
} else {
console.log("getUserMedia not supported");
}
var context = document.getElementById("canvas").getContext("2d");
document.getElementById("picture").addEventListener("click", function () {
context.drawImage(video, 0, 0, 320, 320);
});
document.getElementById("sc").addEventListener("click", function () {
var imgData=document.getElementById("canvas").toDataURL("image/png");
var data=imgData.substr(22);
$.post('recorder/target/sc',{'sj':data});
});
</script>
</body>

后台：

@RequestMapping(value = "/sc", method = RequestMethod.POST)
@ResponseBody
public String sc(HttpServletResponse response,HttpServletRequest request,String sj) throws Exception {
GenerateImage(sj);
return "sxt";
}
// base64字符串转化成图片
public static boolean GenerateImage(String imgStr) { // 对字节数组字符串进行Base64解码并生成图片
if (imgStr == null) // 图像数据为空
return false;
BASE64Decoder decoder = new BASE64Decoder();
try {
// Base64解码
byte[] b = decoder.decodeBuffer(imgStr);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {// 调整异常数据
b[i] += 256;
}
}
// 生成jpeg图片
String imgFilePath = "F:/test22.png";// 新生成的图片
OutputStream out = new FileOutputStream(imgFilePath);
out.write(b);
out.flush();
out.close();
return true;
} catch (Exception e) {
return false;
}
}

总结：

1.流赋值给video，（调用接口，开启摄像头）

2.有个画图标签，有点像抓拍，

3.还差一个把数据上传给服务器（不过这个有代码）步骤是1.图片获取 2.图片上传

4.代码有点乱，应该是根植在别人框架，别人代码上。

网络上的都是PHP的

前台用base64编码的，后台也要用这个解码。

base64编码还可以作用在<img

src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/

gAAAABlBMVEX///

+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvM

jAvMTIGkKG

+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAt

lAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC” />

本来我以为是二进制字符串，直接读取，结果是错误的

5.总结：那个接口 navigator.getUserMedia，官网提示过时，不过就是不支持最新版的CHROME，其他版

本的CHROME也很好用，我用的是23.0.1271.97版本，其他低版本我觉得也兼容。

6.还有功能可以在加，比如关闭摄像头等。面对面视频。图片也能加功能，比如滤镜。

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

标签： html5 java 摄像头

相关文章推荐

新的分享

章节导航