|
|
@@ -48,6 +48,18 @@
|
|
|
},
|
|
|
],
|
|
|
hasRedBox:false, //是否添加了红包
|
|
|
+ limit:20,
|
|
|
+ videoId:'', //上传视频的id
|
|
|
+ videoUrl:'', //处理好的视频地址
|
|
|
+ progress:0, //进度条
|
|
|
+ ktProgress:0, //抠图进度条
|
|
|
+ showPersonView:false, //是否显示个人形象提示弹窗
|
|
|
+ uploadStatus:0, //视频处理的状态 0 未开始，1 上传中，2绿幕抠图中-服务端处理中，3处理成功 4 处理失败
|
|
|
+ count:0, //结果请求次数
|
|
|
+ timeOut:90000, //超时时间
|
|
|
+ outTimer:null, //延时处理对象
|
|
|
+ timer:null, //轮询对象
|
|
|
+ widthHeight:'', //用户上传视频尺寸
|
|
|
}
|
|
|
},
|
|
|
props: {
|
|
|
@@ -62,6 +74,11 @@
|
|
|
this.getDatalist(1);
|
|
|
this.getDatalist(3);
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ userId() {
|
|
|
+ return this.$store.state.userId;
|
|
|
+ },
|
|
|
+ },
|
|
|
// 页面被展示时执行
|
|
|
onPageShow: function() {
|
|
|
|
|
|
@@ -71,6 +88,15 @@
|
|
|
// console.warn("***detached-hide***")
|
|
|
},
|
|
|
methods: {
|
|
|
+ format(percentage) {
|
|
|
+ let text = "上传中";
|
|
|
+ if(this.uploadStatus==1){
|
|
|
+ text = "上传中";
|
|
|
+ }else if(this.uploadStatus==2){
|
|
|
+ text = "抠图中";
|
|
|
+ }
|
|
|
+ return `${text}\n${percentage}%`;
|
|
|
+ },
|
|
|
resolveIndex(index) {
|
|
|
this.selectIndex = index || 0;
|
|
|
},
|
|
|
@@ -122,10 +148,236 @@
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ initStatus(){
|
|
|
+ this.progress = 0;
|
|
|
+ this.ktProgress = 0;
|
|
|
+ this.count = 0;
|
|
|
+ this.videoUrl = '';
|
|
|
+ this.widthHeight = '';
|
|
|
+ this.leftList[0].icon = '';
|
|
|
+ this.leftList[0].url = '';
|
|
|
+ this.uploadStatus = 0;//处理完毕
|
|
|
+ },
|
|
|
+ uploadImgObj(e,form,type=1){
|
|
|
+ if(type==2){
|
|
|
+ this.initStatus();//重置上传状态到初始值
|
|
|
+ }
|
|
|
+ //上传图片
|
|
|
+ var file = e.target.files[0];
|
|
|
+ var fileSize = file.size / 1024 / 1024;
|
|
|
+ if (!/\.(MP4|mp4)$/.test(e.target.value)) {
|
|
|
+ this.$message.warning('文件片类型必须是MP4');
|
|
|
+ var videoForm = document.getElementById(form); //获取表单对象
|
|
|
+ videoForm && videoForm.reset(); // 重置表单
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (fileSize > this.limit) {
|
|
|
+ this.$message.warning('您的上传的视频过大，请低于' + this.limit + 'MB');
|
|
|
+ var videoForm = document.getElementById(form); //获取表单对象
|
|
|
+ videoForm && videoForm.reset(); // 重置表单
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (file.name.length > 100) {
|
|
|
+ this.$message.warning('文件名过长，请不要超过100个字符');
|
|
|
+ var videoForm = document.getElementById(form); //获取表单对象
|
|
|
+ videoForm && videoForm.reset(); // 重置表单
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ let reader = new FileReader();
|
|
|
+ reader.onload = (event) => {
|
|
|
+ let video = document.createElement('video');
|
|
|
+ video.onloadedmetadata = (event) => {
|
|
|
+ let duration = video.duration;
|
|
|
+ let width = video.videoWidth;
|
|
|
+ let height = video.videoHeight;
|
|
|
+ // this.videoWidth = width;
|
|
|
+ // this.videoHeight = height;
|
|
|
+ console.warn('视频时长：', duration);
|
|
|
+ console.warn('视频尺寸：x:', width, 'y:', height);
|
|
|
+ if (duration > 20) {
|
|
|
+ this.$message.warning('您的上传的视频过长，请低于20s');
|
|
|
+ var videoForm = document.getElementById(form); //获取表单对象
|
|
|
+ videoForm && videoForm.reset(); // 重置表单
|
|
|
+ return false
|
|
|
+ }else{
|
|
|
+ var item = {};
|
|
|
+ item.file = file;
|
|
|
+ console.warn("***uploadImgObj***",file)
|
|
|
+ this.uploadMaterielFile(item, form); //正常上传图片
|
|
|
+ }
|
|
|
+ };
|
|
|
+ video.src = event.target.result;
|
|
|
+ };
|
|
|
+ reader.readAsDataURL(file);
|
|
|
+ // var item = {};
|
|
|
+ // item.file = file;
|
|
|
+ // console.warn("***uploadImgObj***",file)
|
|
|
+ // this.uploadMaterielFile(item, form); //正常上传图片
|
|
|
+ },
|
|
|
+ //视频上传进度处理
|
|
|
+ uploadProgress(e){
|
|
|
+ this.progress = Math.round((e.loaded / e.total) * 100);//loaded已经加载的
|
|
|
+ console.warn("***uploadProgress***",this.progress)
|
|
|
+ },
|
|
|
+ //停止上传
|
|
|
+ stopUpload(){
|
|
|
+
|
|
|
+ },
|
|
|
+ async uploadMaterielFile(item, form) {
|
|
|
+ var self = this;
|
|
|
+ let formData = new FormData();
|
|
|
+ formData.append('file', item.file);
|
|
|
+ formData.append('brandId', $config.brandId);
|
|
|
+ formData.append('userId', this.userId);
|
|
|
+ // formData.append('width', this.videoWidth);
|
|
|
+ // formData.append('height', this.videoHeight);
|
|
|
+ console.warn("***formData***",formData);
|
|
|
+ this.uploadStatus = 1;//上传中
|
|
|
+ this.showPersonView = false;
|
|
|
+ this.addSilhouette();//添加剪影视频
|
|
|
+ let res = await requestConfig('robust_video', formData, true, false,'post',this.uploadProgress)
|
|
|
+ if (res.success && res.single) {
|
|
|
+ this.videoId = res.single;//根据Id查询结果
|
|
|
+ this.startInterval();//开始轮询获取结果
|
|
|
+ }
|
|
|
+ var videoForm = document.getElementById(form); //获取表单对象
|
|
|
+ videoForm && videoForm.reset(); // 重置表单
|
|
|
+ },
|
|
|
+ async getVideoUrl() {
|
|
|
+ if(!this.videoId){
|
|
|
+ Toast({
|
|
|
+ message: '请先上传视频',
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.count = this.count + 1;
|
|
|
+ let res = await requestConfig('get_result', {id:this.videoId,userId:this.userId}, true, false,'get')
|
|
|
+ if (res.success && res.single) {
|
|
|
+ this.resultHandle(res.single)
|
|
|
+ }else{
|
|
|
+ this.videoUrl = "https://test.static.elab-plus.com/digital_human/f4c16cffae9711ee9853845cf3fb2826.mp4";//视频地址
|
|
|
+ this.leftList[0].icon = this.videoUrl + "?vframe/jpg/offset/0";
|
|
|
+ this.leftList[0].url = this.videoUrl;
|
|
|
+ this.uploadStatus = 4;//处理失败
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //添加剪影视频
|
|
|
+ addSilhouette(){
|
|
|
+ let data = {
|
|
|
+ url:'https://dm.static.elab-plus.com/miniProgram/silhouette1.mp4',
|
|
|
+ value:'个人形象',
|
|
|
+ width:'',
|
|
|
+ height:'',
|
|
|
+ }
|
|
|
+ this.aiPeopleChange(data, 'add')
|
|
|
+ },
|
|
|
+ //添加用户绿幕视频
|
|
|
+ addRealVideo(){
|
|
|
+ let data = {
|
|
|
+ url:this.videoUrl,
|
|
|
+ value:'个人形象',
|
|
|
+ width:this.widthHeight.split('x')[0],
|
|
|
+ height:this.widthHeight.split('x')[1],
|
|
|
+ }
|
|
|
+ this.aiPeopleChange(data, 'add')
|
|
|
+ },
|
|
|
+ //上传结果处理
|
|
|
+ resultHandle(single){
|
|
|
+ if(!single){
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if(single.status=='completed' && single.output){//有结果
|
|
|
+ this.ktProgress = 100;//抠图进度100%
|
|
|
+ this.videoUrl = single.output;//视频地址
|
|
|
+ // this.leftList[0].icon = this.videoUrl + "?vframe/jpg/offset/5";
|
|
|
+ this.widthHeight = single.widthHeight; //"856x480"
|
|
|
+ this.leftList[0].icon = single.virtualBg;
|
|
|
+ this.leftList[0].url = this.videoUrl;
|
|
|
+ this.uploadStatus = 3;//处理完毕
|
|
|
+ this.stopInterval();//停止轮询
|
|
|
+ this.addRealVideo();
|
|
|
+ }else{//没有结果
|
|
|
+ let progress = single.progress;
|
|
|
+ progress = progress.replace(this.videoId + ':','');
|
|
|
+ let index = progress.indexOf("|");
|
|
|
+ progress = progress.substr(0,index);
|
|
|
+ console.warn("***抠图进度条***",progress);
|
|
|
+ this.ktProgress = parseFloat(progress);//提取出来的进度条
|
|
|
+ if(this.ktProgress>99){
|
|
|
+ this.ktProgress = 99;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //开始生成AI图的轮询，每隔1s轮询一次
|
|
|
+ startInterval() {
|
|
|
+ if(this.timer){
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ let self = this;
|
|
|
+ this.count = 0;//轮询次数
|
|
|
+ this.uploadStatus = 2;//绿幕抠图中
|
|
|
+ this.getVideoUrl();//获取结果
|
|
|
+ this.timer = setInterval(()=>{
|
|
|
+ this.getVideoUrl();//获取结果
|
|
|
+ },1000);//1秒轮询一次
|
|
|
+ this.setOutTimer();//设置超时逻辑
|
|
|
+ },
|
|
|
+ //设置一个超时逻辑，到底指定时间后停止轮询，当前是90s
|
|
|
+ setOutTimer() {
|
|
|
+ var self = this;
|
|
|
+ if (this.outTimer) {
|
|
|
+ clearTimeout(this.outTimer)
|
|
|
+ this.outTimer = null
|
|
|
+ }
|
|
|
+ this.outTimer = setTimeout(function() {
|
|
|
+ if(!self.videoUrl){//没有结果
|
|
|
+ MessageBox.confirm('',{
|
|
|
+ title: '提示',
|
|
|
+ message: '当前AI使用火爆，请继续尝试?',
|
|
|
+ showCancelButton: true,
|
|
|
+ confirmButtonText:'继续尝试',
|
|
|
+ cancelButtonText:'取消等待',
|
|
|
+ }).then(action => {
|
|
|
+ console.warn("***MessageBox-action***",action)
|
|
|
+ if(action == 'confirm'){
|
|
|
+ // self.confirmHandle(1);
|
|
|
+ }
|
|
|
+ }).catch(err=>{
|
|
|
+ console.warn("***MessageBox-err***",err)
|
|
|
+ if(err == 'cancel'){
|
|
|
+ // self.cancelHandle();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // MessageBox.confirm('确定执行此操作?')
|
|
|
+ }
|
|
|
+ self.stopInterval();//停止轮询
|
|
|
+ }, this.timeOut);
|
|
|
+ },
|
|
|
+ //停止轮询
|
|
|
+ stopInterval() {
|
|
|
+ if (this.timer) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ }
|
|
|
+ if (this.outTimer) {
|
|
|
+ clearTimeout(this.outTimer)
|
|
|
+ this.outTimer = null
|
|
|
+ }
|
|
|
+ this.myloading = false;
|
|
|
+ this.aiFlag = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ showMask(){
|
|
|
+ this.showPersonView = true;
|
|
|
+ console.warn("***showMask***",this.showPersonView)
|
|
|
+ },
|
|
|
//AI数字人切换
|
|
|
selectAction(selItem, index) {
|
|
|
- console.log('点击动作111：', selItem, index)
|
|
|
+ console.log('点击动作111：', selItem, index,this.leftList)
|
|
|
if (this.tabIndex == 0) {
|
|
|
+ if(!this.leftList[index].url){
|
|
|
+ return false
|
|
|
+ }
|
|
|
if (this.peopleIndex == index) { //取消选中
|
|
|
this.aiPeopleChange(this.leftList[this.peopleIndex], 'canel')
|
|
|
this.peopleIndex = -1;
|
|
|
@@ -181,7 +433,13 @@
|
|
|
if (res && res.success && res.list) {
|
|
|
let list = res.list;
|
|
|
if (type == 0) {
|
|
|
- this.leftList = list;
|
|
|
+ this.leftList.push({
|
|
|
+ icon:'',
|
|
|
+ userUpload:true,
|
|
|
+ value:'',
|
|
|
+ url:'',
|
|
|
+ })
|
|
|
+ this.leftList = this.leftList.concat(list);
|
|
|
} else if (type == 1) {
|
|
|
this.rightList = list;
|
|
|
} else if (type == 3) {
|
|
|
@@ -283,6 +541,7 @@
|
|
|
url: url
|
|
|
})
|
|
|
} else {
|
|
|
+ console.warn("data:", _ps)
|
|
|
Toast({
|
|
|
message: '敬请期待',
|
|
|
});
|
zjs_project