李振海的gravatar头像
李振海2018-03-25 18:10:42
html5 pc端录制视频+MediaStreamRecorder

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

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

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

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

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

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

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

 

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

 

 

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

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

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

html5 pc端录制视频+MediaStreamRecorder

html5 pc端录制视频+MediaStreamRecorder

我把代码贴出来, 

 

<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;
	
	}

打赏

已有2人打赏

程序猿全敏的gravatar头像最代码官方的gravatar头像

分享到:

最近浏览
mhy123456 LV37月13日
星星星星星星
chenkun LV97月12日
月亮月亮星星
lw19900921 LV197月4日
太阳星星星星星星
sangyy LV77月2日
月亮星星星星星星
初涉者6月28日
暂无贡献等级
Lacvss LV26月23日
星星星星
shanpengnian LV96月22日
月亮月亮星星
Space LV296月21日
太阳月亮月亮月亮星星
smallwt LV26月16日
星星星星
皇朝灬焱轩 LV26月15日
星星星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友