视频流截取俩张图片（H5界面）

HTML标签内容：

//提示框CSS
	<style type="text/css">
            .confirm_ul{list-style:none;margin:0px;padding:0px;width:70%;margin: auto;margin-top: 210%;}
            .confirm_title{background:#F2F2F2;text-align:left;padding-left:20px;line-height:60px;border:1px solid #999;}
            .confirm_content{background:#fff;height:80px;line-height:20px;padding:10px;}
            .confirm_btn-wrap{background:#fff;height:30px;line-height:18px;text-align: right;}
            .confirm_btn{cursor:pointer;color:#2bd00f;margin-right: 35px;}
            .confirm_btn-wrap > a:nth-child(1){color: #9c9898;}
            .dis{display: none;}
        </style>
//视频界面
<div style="display:none;text-align:center;" id="Living">
	<!--人脸框-->
	<div class="change">
		<p></p>
		<video id="video" width="300" height="250"></video>
		<p></p>
	</div>
	<!--拍照-->
	<div>
		<button class="div-buttonClass" id="capture"><span class="div-buttonSpan">点击进行识别</span></button>
		</div>
	<!--图片模块-->
	<div>
		<canvas id="canvas1" width="400" height="400" style="display: none;"></canvas>
		<canvas id="canvas2" width="400" height="400" style="display: none;"></canvas>
		</div>
</div>
<!--弹出框-alert-->
<div id="alert" class="dis" style="position:absolute;background:rgba(0, 0, 0, 0.58);width:100%;height:220%;top:0;textAlign:center;lineHeight:150px;z-Index:300;fontSize:12px">
	<ul class="confirm_ul">
		<li id="li2" class="confirm_content" ></li>
		<li class="confirm_btn-wrap">
			<a></a>
			<a type="button" value="确定" onclick="alertOk()" class="confirm_btn" >确定</a>
		</li>
	</ul>
</div>
<input type="hidden" id="tableId" />

JSCRIPT内容：

//调用媒体设备
	function OpenLiving(){
			if(!nullValidation()){return false;}
			let video = document.getElementById('video');
			
			//显示活体界面
			document.getElementById("topLiving").style.display="";
			document.getElementById("Living").style.display="";
			
			let canvas1 = document.getElementById('canvas1');
			let canvas2 = document.getElementById('canvas2');
			
			let context1 = canvas1.getContext('2d');
			let context2 = canvas2.getContext('2d');
			
			if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
				//调用用户媒体设备, 访问摄像头
				getUserMedia({video : {width: { min: 1024, ideal: 1280, max: 1920 },
										height: { min: 776, ideal: 720, max: 1080 }}}, success, error);
			} else {
			  tz=true;
			  Alert('不支持访问用户媒体',"setOpen.html");
			  document.getElementById("Living").style.display="none";
			}
			document.getElementById('capture').addEventListener('click', function () {
	
					context1.clearRect(0, 0, 400, 400);
					context1.drawImage(video, 0, 0, 480, 320); 
					sleep(2000);
					context2.clearRect(0, 0, 400, 400);
					context2.drawImage(video, 0, 0, 480, 320); 

			})
	}
	
	//访问用户媒体设备的兼容方法
    function getUserMedia(constraints, success, error) {
      if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
      } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints,success, error)
      } else if (navigator.mozGetUserMedia) {
        //firfox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
      } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
      }
    }
	
	function success(stream) {
      //兼容webkit核心浏览器
      let CompatibleURL = window.URL || window.webkitURL;
      //将视频流设置为video元素的源
      //console.log(stream);
	  mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
      //video.src = CompatibleURL.createObjectURL(stream);
      video.srcObject = stream;
      video.play();
    }
	function error(error) {
	  tz=true;
	  Alert('访问用户媒体设备失败',"setOpen.html");
	  document.getElementById("Living").style.display="none";
      console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
	  
    }
	//关闭摄像头	
	function close() {
		mediaStreamTrack && mediaStreamTrack.stop();
	}
	//添加时间间隔
	function sleep(numberMillis) {
			var now = new Date();
			var exitTime = now.getTime() + numberMillis;
			while (true) {
			now = new Date();
			if (now.getTime() > exitTime)
			return;
		}
	}
//提示框
function Alert(str,goUrl){
        $("#alert").removeClass("dis");
        $("#li2").html(str);
        $("#tableId").val(goUrl);
 }  
 function alertOk(){
	$("#alert").addClass("dis");
	if(tz){
		tz=false;
		window.location.href=$("#tableId").val();
	}
}

上传提交代码：

                        var canvas1 = document.getElementById("canvas1"); 
			var canvas2 = document.getElementById("canvas2"); 
			
			var dataurl = canvas1.toDataURL("image/png");
			var dataur2 = canvas2.toDataURL("image/png");
			
			var videoPhotos1 = encodeURIComponent(dataurl);
			var videoPhotos2 = encodeURIComponent(dataur2);
			//关闭相机
			close();
                        parameter["videoPhotos1"]=videoPhotos1;
			parameter["videoPhotos2"]=videoPhotos2;
                        var requestDate=ajax("xxx",parameter);//需要URL
			//Alert(JSON.stringify(requestDate));
			if(requestDate["code"] != 10000){
				
			}else{
				tz=true;
				Alert("提交成功","##.html");
			}
//ajax请求（请求路径url,请求参数json）
HJSJ.ajax=function(url,json){
	var requestDate="";
	$.ajax({  
			url: url,
			type:"post",
			contentType: "application/json",
			data:json,  
			cache:false, 
			async:false,//同步 false  异步 true
			success:function(data){ 
				requestDate=data;
			},  
			error:function(jqXHR, textStatus, errorThrown){
				var da={};
				da["code"]=30001;
				da["msg"]=jqXHR.status+":"+jqXHR.statusText;
				requestDate=da;
				//HJSJ.prompts("error",jqXHR.status+":"+jqXHR.statusText);
			/*
			第一个参数 jqXHR ：
			readyState :当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。
			status  ：返回的HTTP状态码，比如常见的404,500等错误代码。
			statusText ：对应状态码的错误信息，比如404错误信息是not found,500是Internal Server Error。
			responseText ：服务器响应返回的文本信息
			第二个参数 String textStatus：返回的是字符串类型，表示返回的状态，根据服务器不同的错误可能返回下面这些信息："timeout"（超	时）, "error"（错误）, "abort"(中止), 			"parsererror"（解析错误），还有可能返回空值。
			第三个参数 String errorThrown：也是字符串类型，表示服务器抛出返回的错误信息，如果产生的是HTTP错误，那么返回的信息就是HTTP状态码对应的错误信息，比如404的Not Found,500错误的Internal Server Error。*/
			}
	});
	return requestDate;
};

服务器代码：

import java.net.URLDecoder;
import net.sf.json.JSONObject;
import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;

    @RequestMapping("/xxx")
    @ResponseBody
    public Object setOpen(@RequestBody String jsonstring,HttpServletRequest request) {
            Map<String, Object> map1 = new HashMap<String, Object>();
            Map<String, Object> map2 = new HashMap<String, Object>();    

    JSONObject parameterObject = JSONObject.fromObject(jsonstring);


            String videoPhotos1=parameterObject.optString("videoPhotos1");
            String videoPhotos2=parameterObject.optString("videoPhotos2");
//照片存放本地服务器地址
String webAddress=request.getSession().getServletContext().getRealPath("/");
            String url=webAddress+"upLoadPicture/";
            map1.put("videoPhotos1",videoPhotos1);
            map1.put("videoPhotos2",videoPhotos2);

            boolean res = true;
            for (int i=1; i<=2; i++) {
                String photoBase64 = map1.get("videoPhotos" + i).toString();
                // 去除开头不合理的数据
                photoBase64 = photoBase64.substring(30);
                photoBase64 = URLDecoder.decode(photoBase64,"UTF-8");

                String photoName = String.valueOf(UUID.randomUUID()) + ".png";
                String imgUrl = url + photoName;
                res= Base64Util.GenerateImage(photoBase64,imgUrl);
                if(!res){
                    map.put("code", 10003);
                    map.put("msg", "生成图片失败");
                    return map;
                }
                map2.put("videoPhotos" + i,photoName);
            }
    //将Base64转换为图片
    public static  boolean  GenerateImage(String imgStr,String url){

        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图片
            OutputStream out = new FileOutputStream(url);
            out.write(b);
            out.flush();
            out.close();
            return true;
        }
        catch (Exception e)
        {
            LogUtil.error("error:图片转换失败！"+e.getMessage());
            return false;
        }
    }
}