自己花了一天研究出来的 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(); 就够了
我把代码贴出来,
1'100%' height='480' id='myVideo'>
2
3
4
5'videolz()' type='button' class='btn btn-danger' style='width: 100%; font-size: 32px'>'glyphicon glyphicon-facetime-video' aria-hidden='true' id='videostr'>视频描述
001// 判断浏览器
002var root ='';
003var aa ='' ;//防止两次上传
004var mediaRecorder ;
005var index=1;//定时加1
006var dingshi;
007var mediaConstraints = { audio:true, video: { width: 1280, height: 720 } };
008
009function captureUserMedia(mediaConstraints, successCallback, errorCallback) {
010navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
011}
012function onMediaError(e) {
013
014}
015function onMediaSuccess(stream) {
016var video = document.querySelector('video');
017// 赋值 video 并开始播放
018video.srcObject = stream;
019video.onloadedmetadata =function(e) {
020video.play();
021};
022mediaRecorder =new MediaStreamRecorder(stream);
023mediaRecorder.stream = stream;
024/* // 录像api的调用 */
025mediaRecorder.mimeType ='video/mp4';
026dingshi = window.setInterval(function(){
027$('#videostr').html('保存视频'+index+'秒');
028index++;
029}
030,1000);
031
032mediaRecorder.start(12000000000);
033// 停止录像以后的回调函数
034
035mediaRecorder.ondataavailable =function (blob) {
036if(aa ==''){
037var file =new File([blob],'msr-' + (new Date).toISOString().replace(/:|\./g,'-') +'.mp4', {
038type:'video/mp4'
039});
040var formData =new FormData();
041formData.append('file', file);
042console.log(formData);
043
044$.ajax({
045url : root+'/upload/video.do',
046type :'post',
047cache :false,
048data: formData,
049dataType :'json',
050processData:false,
051contentType:false,
052error :function() {
053alert('暂时无法操作,请刷新后再试!');
054},
055success :function(result) {
056
057if (result.code == 0) {
058var params = result.data;
059console.log(params);
060console.log(params.fileUrl);
061/* $('#lzvideo').attr('src', params.fileUrl); */
062
063}else {
064
065}
066}
067});
068
069aa = blob;
070}
071};
072}
073
074function videolz(){
075if( $('#videostr').text()=='视频描述'){
076$('#videostr').html('保存视频');
077$('#videostr').removeClass('glyphicon-facetime-video');
078$('#videostr').addClass('glyphicon-pause')
079/* $('#videos').append('') */
080// 开始录像
081$('#myVideo').show();
082captureUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
083
084}else{
085$('#videostr').html('视频描述');
086$('#videostr').addClass('glyphicon-facetime-video');
087$('#videostr').removeClass('glyphicon-pause')
088/* $('#myVideo').remove(); */
089// 停止录像
090/* mediaRecorder.stop(); */
091mediaRecorder.stream.stop();
092/* $('#myVideo').unbind(); */
093
094index=1;
095window.clearInterval(dingshi);
096}
097
098}
099
100
101
102
01/*
02* 上传视频
03*/
04@RequestMapping(value='video')
05@ResponseBody
06public Result uoloadVideo(@RequestParam('file') MultipartFile file,Model model,HttpServletRequest request, HttpServletResponse response) {
07
08Result result =new Result();
09Mapdata =new HashMap();
10String serverPath ='/upload/' +new SimpleDateFormat('yyyyMM').format(new Date()) +'/';
11String basePath = request.getScheme()+'://'+request.getServerName()+':'+request.getServerPort();
12String filePath = request.getSession().getServletContext().getRealPath(serverPath);
13String fileName = UUID.randomUUID().toString().replaceAll('-','') + file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf('.'));
14String fileUrl = request.getContextPath() + serverPath + fileName;
15
16File targetFile =new File(filePath, fileName);
17if (!targetFile.exists()) {
18targetFile.mkdirs();
19}
20
21try {
22file.transferTo(targetFile);
23System.out.println(basePath);
24data.put('fileUrl', basePath+fileUrl);
25result =new Result(0,'上传成功', data);
26}catch (Exception e) {
27result =new Result(1,'上传异常');
28}
29
30return result;
31
32}