|
|
@@ -13,6 +13,13 @@
|
|
|
Toast
|
|
|
} from 'mint-ui';
|
|
|
import lottie from "lottie-web"; //lottie
|
|
|
+ // const { createWorker } = require('@ffmpeg/ffmpeg');
|
|
|
+ import { FFmpeg } from "@ffmpeg/ffmpeg";
|
|
|
+ import { fetchFile, toBlobURL } from '@ffmpeg/util'
|
|
|
+ const baseURL = '.'
|
|
|
+ let ffmpeg = null;
|
|
|
+ // import { createFFmpeg, fetchFile } from '@/assets/ffmpeg.min.js';
|
|
|
+
|
|
|
// import commonMethod from '@/common/commonMethod.js';
|
|
|
// import touchHandle from '@/mixins/touchHandle.js';
|
|
|
// import requestConfig from '@/static/lib/requestConfig';
|
|
|
@@ -48,14 +55,15 @@
|
|
|
},
|
|
|
],
|
|
|
hasRedBox:false, //是否添加了红包
|
|
|
- limit:20,
|
|
|
+ limit:50,
|
|
|
videoId:'', //上传视频的id
|
|
|
videoUrl:'', //处理好的视频地址
|
|
|
progress:0, //进度条
|
|
|
ktProgress:0, //抠图进度条
|
|
|
+ cProgress:0, //压缩进度条
|
|
|
showPersonView:false, //是否显示个人形象提示弹窗
|
|
|
showPopView:false, //是否显示确认取消框
|
|
|
- uploadStatus:0, //视频处理的状态 0 未开始，1 上传中，2绿幕抠图中-服务端处理中，3处理成功 4 处理失败
|
|
|
+ uploadStatus:0, //视频处理的状态 -1 压缩中 0 未开始，1 上传中，2绿幕抠图中-服务端处理中，3处理成功 4 处理失败
|
|
|
count:0, //结果请求次数
|
|
|
timeOut:90000, //超时时间
|
|
|
outTimer:null, //延时处理对象
|
|
|
@@ -64,6 +72,7 @@
|
|
|
stopFlag:false, //停止上传动作
|
|
|
cancelTokenSource:null, //取消上传的操作对象
|
|
|
repeartFlag:false, //防止重复点击
|
|
|
+ videoSrc:'',
|
|
|
}
|
|
|
},
|
|
|
props: {
|
|
|
@@ -137,6 +146,8 @@
|
|
|
text = "上传中";
|
|
|
}else if(this.uploadStatus==2){
|
|
|
text = "抠图中";
|
|
|
+ }else if(this.uploadStatus==-1){
|
|
|
+ text = "压缩中";
|
|
|
}
|
|
|
return `${text}\n${percentage}%`;
|
|
|
},
|
|
|
@@ -206,13 +217,71 @@
|
|
|
this.leftList[0].url = '';
|
|
|
this.uploadStatus = 0;//处理完毕
|
|
|
},
|
|
|
- uploadImgObj(e,form,type=1){
|
|
|
+ async transcode(file,ffmpeg){
|
|
|
+ // if(!crossOriginIsolated) {
|
|
|
+ // SharedArrayBuffer = ArrayBuffer;
|
|
|
+ // }
|
|
|
+ const { name } = file;
|
|
|
+ console.warn('正在加载 ffmpeg-core.js')
|
|
|
+ await ffmpeg.load();
|
|
|
+ console.warn('开始压缩');
|
|
|
+ ffmpeg.FS('writeFile', name, await fetchFile(file));
|
|
|
+ // '-b','2000000' 值越小 压缩率越大
|
|
|
+ await ffmpeg.run('-i', name,'-b','2000000','output.mp4');
|
|
|
+ console.warn('压缩完成');
|
|
|
+ var data = ffmpeg.FS('readFile', 'output.mp4');
|
|
|
+ var newfile = new File([data.buffer], name, { type: "video/mp4" });
|
|
|
+ var video = document.getElementById('output-video');
|
|
|
+ video.src = URL.createObjectURL(new Blob([data.buffer], {
|
|
|
+ type: 'video/mp4'
|
|
|
+ }));
|
|
|
+ // this.uploadMaterielFile(newfile)
|
|
|
+ },
|
|
|
+ async transcodeNew(file,form){
|
|
|
+ if (ffmpeg === null) {
|
|
|
+ ffmpeg = new FFmpeg();
|
|
|
+ }
|
|
|
+ ffmpeg.on("log", ({ message }) => {
|
|
|
+ console.warn(message);
|
|
|
+ })
|
|
|
+ ffmpeg.on("progress", ({ progress }) => {
|
|
|
+ let pro = `${progress * 100} %`;
|
|
|
+ console.warn("***progress***",pro)
|
|
|
+ this.cProgress = parseInt(progress * 100);
|
|
|
+ });
|
|
|
+ await ffmpeg.load({
|
|
|
+ // coreURL: "/packages/core/dist/esm/ffmpeg-core.js",
|
|
|
+ coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
|
|
|
+ wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
|
|
|
+ workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript')
|
|
|
+ });
|
|
|
+
|
|
|
+ const {name} = file;
|
|
|
+ console.warn('开始压缩');
|
|
|
+ this.uploadStatus = -1;
|
|
|
+ let d0 = Date.now();
|
|
|
+ await ffmpeg.writeFile(name, await fetchFile(file));
|
|
|
+ await ffmpeg.exec(['-i', name, 'output.mp4']);
|
|
|
+ this.uploadStatus = 1;
|
|
|
+ let d1 = Date.now();
|
|
|
+ console.warn("***time1**", d0, d1,d1 - d0)
|
|
|
+ console.warn('压缩完成');
|
|
|
+ const data = await ffmpeg.readFile('output.mp4');
|
|
|
+
|
|
|
+ // const video = document.getElementById('output-video');
|
|
|
+ // video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
|
|
|
+
|
|
|
+ var newfile = new File([data.buffer], name, { type: "video/mp4" });
|
|
|
+ this.uploadMaterielFile({file:newfile},form)
|
|
|
+ },
|
|
|
+ async uploadImgObj(e,form,type=1){
|
|
|
this.stopFlag = false;//上传开始时，开启上传
|
|
|
if(type==2){
|
|
|
this.initStatus();//重置上传状态到初始值
|
|
|
}
|
|
|
//上传图片
|
|
|
var file = e.target.files[0];
|
|
|
+ // this.transcodeNew(file,form);
|
|
|
var fileSize = file.size / 1024 / 1024;
|
|
|
// alert('**文件**' + e.target.value + "-fileName=" + file.name);
|
|
|
if (!/\.(MP4|mp4|MOV|mov)$/.test(e.target.value)) {
|
|
|
@@ -234,30 +303,6 @@
|
|
|
return false;
|
|
|
}
|
|
|
if(this.$parent.isIOS){//IOS则直接上传
|
|
|
- // let reader = new FileReader();
|
|
|
- // reader.onload = (event) => {
|
|
|
- // alert("onloadedmetadata0")
|
|
|
- // let video = document.getElementById('videoPlayer');
|
|
|
- // video.setAttribute("crossOrigin", "Anonymous");
|
|
|
- // video.src = event.target.result;
|
|
|
- // video.controls = false;
|
|
|
- // video.autoplay = true;
|
|
|
- // video.preload = 'auto';
|
|
|
- // video.setAttribute('webkit-playsinline', true);
|
|
|
- // video.setAttribute('playsinline', true);
|
|
|
- // video.load();
|
|
|
- // // video.play();
|
|
|
- // video.onloadedmetadata = (event) => {
|
|
|
- // alert("onloadedmetadata1")
|
|
|
- // if(!this.stopFlag){
|
|
|
- // var item = {};
|
|
|
- // item.file = file;
|
|
|
- // console.warn("***uploadImgObj***",file)
|
|
|
- // this.uploadMaterielFile(item, form); //正常上传图片
|
|
|
- // }
|
|
|
- // }
|
|
|
- // };
|
|
|
- // reader.readAsDataURL(file);
|
|
|
if(!this.stopFlag){
|
|
|
var item = {};
|
|
|
item.file = file;
|
|
|
@@ -378,6 +423,8 @@
|
|
|
}else if (res.success && res.single) {
|
|
|
this.videoId = res.single;//根据Id查询结果
|
|
|
this.startInterval();//开始轮询获取结果
|
|
|
+ }else{
|
|
|
+ this.initStatus();//还原初始状态
|
|
|
}
|
|
|
var videoForm = document.getElementById(form); //获取表单对象
|
|
|
videoForm && videoForm.reset(); // 重置表单
|
zjs_project