自己花了一天研究出来的  html 5 录制视频并上传到服务器  这方面资料太少了  尤其是中文资料

借鉴  SegmentFault  https://segmentfault.com/q/1010000011489899

git官方      https://github.com/streamproc/MediaStreamRecorder

这俩个文档都有点坑  第一个 文档 弄出来 可以录制视频但是不能关闭摄像头  停止录制后 摄像头没有关，第二个 文档也就是 官方git 上的演示demo  可以用 但是录制后视频

刚开始不知道怎么回事  看了文档 以为视频 设置宽度有问题   改了宽度也不行，

后来研究俩个文档  终于 再第一个文档的基础上 结合官方文档 修复停止录制视频 时摄像头不关闭的问题  ，，并且发现俩个画面的原因  官方文档  multiStreamRecorder = new MultiStreamRecorder([stream, stream]);

  想要一个画面就用这个 mediaRecorder = new MediaStreamRecorder(stream);

官方文档写的上传到PHP 服务器 我这里用的java后台   上传时还弄了 老半天  官方给出的 

XMLHttpRequest 上传  之前没见过这玩意   弄了半天也不行  直接改成ajax 上传了

停止视频用    mediaRecorder.stop(); 的话 就会出现 不关闭摄像头的问题

     后才用官方给的      mediaRecorder.stop(); mediaRecorder.stream.stop(); 但是我实际发现 用一个mediaRecorder.stream.stop(); 就够了

我把代码贴出来， 

<video width="100%" height="480" id="myVideo"></video>

</div>

<button onclick="videolz()" type="button"  class="btn btn-danger" style="width: 100%; font-size: 32px"><span class="glyphicon glyphicon-facetime-video" aria-hidden="true" id="videostr">视频描述</span></button>

//  判断浏览器
var root ="<%=basePath %>";
var aa = '' ; //防止两次上传
var mediaRecorder ;
var index=1;//定时加1 	        
var dingshi;
var mediaConstraints = { audio: true, video: { width: 1280, height: 720 } }; 

function captureUserMedia(mediaConstraints, successCallback, errorCallback) {
    navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
}
function onMediaError(e) {
   
}
function onMediaSuccess(stream) {
	 var video = document.querySelector('video');
	      //  赋值 video 并开始播放
	      video.srcObject = stream;
	      video.onloadedmetadata = function(e) {
	        video.play();
	      };
	      mediaRecorder = new MediaStreamRecorder(stream);
	      mediaRecorder.stream = stream;
	     /*    //  录像api的调用 */
	            mediaRecorder.mimeType = 'video/mp4';
	          dingshi = window.setInterval(function(){ 
	        	$("#videostr").html("保存视频"+index+"秒");
	        	index++;
	        }
	        ,1000);  
	         
	        mediaRecorder.start(12000000000);
	        //  停止录像以后的回调函数
	      
	        mediaRecorder.ondataavailable = function (blob) {
	            if(aa == ""){
	            	 var file = new File([blob], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.mp4', {
	                     type: 'video/mp4'
	                 });
	                 var formData = new FormData();
	                 formData.append('file', file);
	                 console.log(formData);

	            	$.ajax({
						url :  root+"/upload/video.do",
						type : "post",
						cache : false,
						data: formData,
						dataType : "json",
						processData: false,
						contentType: false,
						error : function() {
							alert("暂时无法操作，请刷新后再试！");
						},
						success : function(result) {
							
							if (result.code == 0) {
								var params = result.data;
								console.log(params);
								console.log(params.fileUrl);
								/* $("#lzvideo").attr("src", params.fileUrl); */
								
							} else {
								
							}
						}
					}); 
	            	
	            aa = blob;
	            }
	        };
}

	       function videolz(){
	        	if( $("#videostr").text()=="视频描述"){
	        	$("#videostr").html("保存视频");
	        	$("#videostr").removeClass("glyphicon-facetime-video");
	        	$("#videostr").addClass("glyphicon-pause")
	        	/* $("#videos").append("<video width=\"100%\" height=\"320px\" id=\"myVideo\"></video>") */
	        	 //  开始录像
	        	 $("#myVideo").show();
	        	captureUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

	        	}else{
	        	$("#videostr").html("视频描述");
	        	$("#videostr").addClass("glyphicon-facetime-video");
	        	$("#videostr").removeClass("glyphicon-pause") 
	        	/*  $("#myVideo").remove();  */
	       //  停止录像
	 	         /*  mediaRecorder.stop(); */
	          mediaRecorder.stream.stop();
	        	/*  $("#myVideo").unbind(); */
	 	      
 	 	      	index=1;
 	        	window.clearInterval(dingshi); 
	        	}
	   
	        }
 	        


</script>

	/*
	 * 上传视频
	 */
	@RequestMapping(value="video") 
	@ResponseBody
	public Result uoloadVideo(@RequestParam("file") MultipartFile file,Model model,HttpServletRequest request, HttpServletResponse response) {
	
		Result result = new Result();
		Map<String, Object> data = new HashMap<String, Object>();
		String serverPath = "/upload/" + new SimpleDateFormat("yyyyMM").format(new Date()) + "/";
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort();
		String filePath = request.getSession().getServletContext().getRealPath(serverPath);
		String fileName = UUID.randomUUID().toString().replaceAll("-", "") + file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
		String fileUrl = request.getContextPath() + serverPath + fileName;

		File targetFile = new File(filePath, fileName);
		if (!targetFile.exists()) {
			targetFile.mkdirs();
		}

		try {
			file.transferTo(targetFile);
			System.out.println(basePath);
			data.put("fileUrl", basePath+fileUrl);
			result = new Result(0, "上传成功", data);
		} catch (Exception e) {
			result = new Result(1, "上传异常");
		}

		return result;
	
	}