前台:
<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.还有功能可以在加,比如关闭摄像头等。面对面视频。图片也能加功能,比如滤镜。