|
自己花了一天研究出來(lái)的 html 5 錄制視頻并上傳到服務(wù)器 這方面資料太少了 尤其是中文資料 借鑒 SegmentFault https://segmentfault.com/q/1010000011489899 git官方 https://github.com/streamproc/MediaStreamRecorder 這倆個(gè)文檔都有點(diǎn)坑 第一個(gè) 文檔 弄出來(lái) 可以錄制視頻但是不能關(guān)閉攝像頭 停止錄制后 攝像頭沒(méi)有關(guān)，第二個(gè) 文檔也就是 官方git 上的演示demo 可以用 但是錄制后視頻 剛開(kāi)始不知道怎么回事 看了文檔 以為視頻 設(shè)置寬度有問(wèn)題 改了寬度也不行， 后來(lái)研究倆個(gè)文檔 終于 再第一個(gè)文檔的基礎(chǔ)上 結(jié)合官方文檔 修復(fù)停止錄制視頻 時(shí)攝像頭不關(guān)閉的問(wèn)題 ，，并且發(fā)現(xiàn)倆個(gè)畫(huà)面的原因 官方文檔 multiStreamRecorder = new MultiStreamRecorder([stream, stream]); 想要一個(gè)畫(huà)面就用這個(gè) mediaRecorder = new MediaStreamRecorder(stream); 官方文檔寫(xiě)的上傳到PHP 服務(wù)器 我這里用的java后臺(tái) 上傳時(shí)還弄了 老半天 官方給出的 XMLHttpRequest 上傳 之前沒(méi)見(jiàn)過(guò)這玩意 弄了半天也不行 直接改成ajax 上傳了 停止視頻用 mediaRecorder.stop(); 的話 就會(huì)出現(xiàn) 不關(guān)閉攝像頭的問(wèn)題 后才用官方給的 mediaRecorder.stop(); mediaRecorder.stream.stop(); 但是我實(shí)際發(fā)現(xiàn) 用一個(gè)mediaRecorder.stream.stop(); 就夠了 
我把代碼貼出來(lái)， 1 | '100%' height='480' id='myVideo'> |
5 | 'videolz()' type='button' class='btn btn-danger' style='width: 100%; font-size: 32px'>'glyphicon glyphicon-facetime-video' aria-hidden='true' id='videostr'>視頻描述 |
002 | var root ='<%=basePath %>'; |
003 | var aa = '' ; //防止兩次上傳 |
005 | var index=1;//定時(shí)加1 |
007 | var mediaConstraints = { audio: true, video: { width: 1280, height: 720 } }; |
009 | function captureUserMedia(mediaConstraints, successCallback, errorCallback) { |
010 | navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback); |
012 | function onMediaError(e) { |
015 | function onMediaSuccess(stream) { |
016 | var video = document.querySelector('video'); |
017 | // 賦值 video 并開(kāi)始播放 |
018 | video.srcObject = stream; |
019 | video.onloadedmetadata = function(e) { |
022 | mediaRecorder = new MediaStreamRecorder(stream); |
023 | mediaRecorder.stream = stream; |
024 | /* // 錄像api的調(diào)用 */ |
025 | mediaRecorder.mimeType = 'video/mp4'; |
026 | dingshi = window.setInterval(function(){ |
027 | $('#videostr').html('保存視頻'+index+'秒'); |
032 | mediaRecorder.start(12000000000); |
033 | // 停止錄像以后的回調(diào)函數(shù) |
035 | mediaRecorder.ondataavailable = function (blob) { |
037 | var file = new File([blob], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.mp4', { |
040 | var formData = new FormData(); |
041 | formData.append('file', file); |
042 | console.log(formData); |
045 | url : root+'/upload/video.do', |
053 | alert('暫時(shí)無(wú)法操作，請(qǐng)刷新后再試！'); |
055 | success : function(result) { |
057 | if (result.code == 0) { |
058 | var params = result.data; |
060 | console.log(params.fileUrl); |
061 | /* $('#lzvideo').attr('src', params.fileUrl); */ |
075 | if( $('#videostr').text()=='視頻描述'){ |
076 | $('#videostr').html('保存視頻'); |
077 | $('#videostr').removeClass('glyphicon-facetime-video'); |
078 | $('#videostr').addClass('glyphicon-pause') |
079 | /* $('#videos').append('') */ |
081 | $('#myVideo').show(); |
082 | captureUserMedia(mediaConstraints, onMediaSuccess, onMediaError); |
085 | $('#videostr').html('視頻描述'); |
086 | $('#videostr').addClass('glyphicon-facetime-video'); |
087 | $('#videostr').removeClass('glyphicon-pause') |
088 | /* $('#myVideo').remove(); */ |
090 | /* mediaRecorder.stop(); */ |
091 | mediaRecorder.stream.stop(); |
092 | /* $('#myVideo').unbind(); */ |
095 | window.clearInterval(dingshi); |
04 | @RequestMapping(value='video') |
06 | public Result uoloadVideo(@RequestParam('file') MultipartFile file,Model model,HttpServletRequest request, HttpServletResponse response) { |
08 | Result result = new Result(); |
09 | Map data = new HashMap(); |
10 | String serverPath = '/upload/' + new SimpleDateFormat('yyyyMM').format(new Date()) + '/'; |
11 | String basePath = request.getScheme()+'://'+request.getServerName()+':'+request.getServerPort(); |
12 | String filePath = request.getSession().getServletContext().getRealPath(serverPath); |
13 | String fileName = UUID.randomUUID().toString().replaceAll('-', '') + file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf('.')); |
14 | String fileUrl = request.getContextPath() + serverPath + fileName; |
16 | File targetFile = new File(filePath, fileName); |
17 | if (!targetFile.exists()) { |
22 | file.transferTo(targetFile); |
23 | System.out.println(basePath); |
24 | data.put('fileUrl', basePath+fileUrl); |
25 | result = new Result(0, '上傳成功', data); |
26 | } catch (Exception e) { |
27 | result = new Result(1, '上傳異常'); |
|
