利用MediaRecorder录制视频切片上传到ftp服务器

文章目录

1.前言
2.思路
- 思路一
- 思路二

1.前言

之前项目中用Canvas+H5合并流实现录屏功能,但是因为视频流是一直保存到内存中，当你的合成的视频流越来越来，那么导致内存消耗越大（后面浏览器会卡死崩溃），所以必须做些优化，需要将一个大的视频切割成若干个小的视频，然后每个上传到ftp服务器！

2.思路

思路一

MediaRecorder使用start()方法，这个方法可以设置时间，比如start(1000)相当于把每隔个1000毫秒把媒体流存放到一个数组中，比如你需要200M,你可以去计算每隔1000毫秒添加进去的blob大小去计算，当blob的总的大小为200M就把这个视频上传，我之前是按这种方式去做的，但是后面发现有问题，这个分割出来的视频只有第一个视频能播放，后面的视频不能播放（无效视频），当时没发现啥问题，这个问题困扰了我一天，后来才发现原来是元数据的问题,元数据好比描述文件结构，那么可以理解一个文件里面需要元数据和实际的数据，在datavailable事件中data中获得的内容只是生成的整个文件的一部分. 第一个通常包含元数据和一些其他数据,但下一部分不包含元数据，这个就是问题所在，所以为什么只能播放第一个视频，后面的播放不了，因为后面的数据不包含元数据，所以这种方法果断放弃了!

思路二

需要生成多个独立文件,为此,意味着你需要在规定的间隔时间内（5000毫秒）生成一个新的MediaRecorder对象，这样生成出来的所有的文件都是单独独立的文件，包含元数据和实际的数据，项目中我就是用这种方法，大概测试了下1分钟大约需要30M,那么设置10分钟也就差不多300M，这个数据也不大，所以一般的内存300M足够了，下面看下我的代码核心部分：

    // 开始录制isRecord() {let record = this.$refs.record;if (this.stopRecord) {record.title = "停止录制";let stream = this.mergeStream(),//注意要判断浏览器对webm的支持情况，有些时候video格式不对，在ondataavailable监听的时候会拿不到data数据（data的size为空）mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")? "video/webm; codecs=vp9": "video/webm";//第一次建新的MediaRecorder对象this.recorder = this.recordAndUpload(stream, mime, this.recordTime);//后面每隔一分钟创建新的MediaRecorder对象this.setIntervalTimer = setInterval(() => {this.recorder = this.recordAndUpload(stream, mime, this.recordTime);}, this.recordTime * 1000);this.stopRecord = false;this.$message({message: "开始录制",type: "success",customClass: "message-alert",});} else {record.title = "开始录制";this.endCapture();this.$message({message: "录制完成",type: "success",customClass: "message-alert",});//取消动画window.cancelAnimationFrame(this.animationFrame);this.stopRecord = true;this.recorder = null;}},//每隔recordTime时间(60秒)录制一个视频recordAndUpload(stream, mime, recordTime) {let chunks = [],that = this,videoStartTime,//创建新的MediaRecorder对象recorder = new MediaRecorder(stream, {mimeType: mime,});//当触发start或者stop都会执行这个方法recorder.ondataavailable = function (e) {chunks.push(e.data);};recorder.onstop = () => {//因为设置了时间，所以文件的时间是确定的if (that.setTimeoutTimer) {that.uploadFile(chunks, recordTime * 1000);} else {//当手动点了停止，那么这个时间就不是确定的了，需要计算that.uploadFile(chunks, Date.now() - videoStartTime);}};//每隔recordTime时间(60秒)自动去触发停止stop录像事件this.setTimeoutTimer = setTimeout(() => {recorder.stop();}, recordTime * 1000);recorder.start();videoStartTime = Date.now();return recorder},//上传文件到服务，保存录像到数据库uploadFile(chunks, recordTime) {let blob = new Blob(chunks, {type: "video/mp4",}),that = this;//recordTime为文件的时间，fixWebmDuration方法为文件设置时间（可以快进，快退），第三个参数是一个回调函数fixWebmDuration(blob, recordTime, (fixedBlob) => {//下载MP4到本地let fileName = `file_${new Date().getTime()}.mp4`,file = new window.File([fixedBlob], fileName),formData = new FormData();let url = URL.createObjectURL(new Blob([fixedBlob], { type: "video/mp4" })),aLink = document.createElement("a");aLink.download = fileName;aLink.href = url;document.body.appendChild(aLink);aLink.click();aLink.remove();window.URL.revokeObjectURL(url);//上传到ftp服务器formData.append("file", file);that.axios.post(//接口`/ftp/ftpUpload`,formData,{headers: { "Content-Type": "multipart/form-data" },}).then((data) => {//保存录像到数据库let params = new URLSearchParams(); //装载post传值params.append("cameraID", that.cameraIdChanged);params.append("videoName", fileName);params.append("videoUrl", fileName);that.axios.post("/video/addVideo", params).then((data) => {console.log(data);}).catch((error) => {that.$message.error("服务器异常");console.log(error);});}).catch((error) => {that.$message.error("服务器异常");console.log(error);});});},//结束录制endCapture() {//清除定时器clearTimeout(this.setTimeoutTimer);clearInterval(this.setIntervalTimer);this.setTimeoutTimer = this.setIntervalTimer = null;this.recorder.stop();},

下面是效果图