html5视频录制,html5 pc端录制视频 MediaStreamRecorder

自己花了一天研究出来的  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}