@@ -26,6 +26,7 @@ | |||
"path-browserify": "^1.0.1", | |||
"path-to-regexp": "^6.2.0", | |||
"pinia": "^2.0.33", | |||
"pinia-plugin-persistedstate": "^3.1.0", | |||
"screenfull": "^6.0.0", | |||
"vue": "^3.2.45", | |||
"vue-i18n": "9", | |||
@@ -62,6 +62,19 @@ export function uploadProgressApi(videoId) { | |||
}) | |||
} | |||
/** | |||
* @description 保存音频 | |||
* @params videoId | |||
* @returns data | |||
*/ | |||
export function saveAudioApi(videoId) { | |||
return request({ | |||
url: `/api/voiceMaterial/save?videoId=${videoId}`, | |||
method: 'GET', | |||
}) | |||
} | |||
/** | |||
* @description 获取语言 | |||
* @params | |||
@@ -84,4 +97,32 @@ export function chooseTypeApi(id) { | |||
url: `api/voiceMould/chooseType/?id=${id}`, | |||
method: 'GET', | |||
}) | |||
} | |||
/** | |||
* @description 保存生成视频数据 | |||
* @params data | |||
* @returns data | |||
*/ | |||
export function userPhotoVideoApi(data) { | |||
return request({ | |||
url: `/api/userPhotoVideo`, | |||
method: 'POST', | |||
data | |||
}) | |||
} | |||
/** | |||
* @description 生成视频 | |||
* @params data | |||
* @returns data | |||
*/ | |||
export function createVideoApi(data) { | |||
return request({ | |||
url: `/api/userPhotoVideo/createVideo`, | |||
method: 'POST', | |||
data | |||
}) | |||
} |
@@ -1,8 +1,11 @@ | |||
import type { App } from 'vue'; | |||
import { createPinia } from 'pinia'; | |||
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' | |||
const store = createPinia(); | |||
store.use(piniaPluginPersistedstate ) | |||
// 全局注册 store | |||
export function setupStore(app: App<Element>) { | |||
app.use(store); | |||
@@ -9,4 +9,7 @@ export const userInfoPinia = defineStore("userInfo", () => { | |||
} | |||
return { email, setEmail }; | |||
}); | |||
}, | |||
{ | |||
persist: true, | |||
}); |
@@ -331,6 +331,7 @@ import { | |||
videoUpload, | |||
saveImgApi, | |||
uploadProgressApi, | |||
saveAudioApi, | |||
voiceTotalApi, | |||
chooseTypeApi, | |||
} from "@/apis/createVideo"; | |||
@@ -356,6 +357,7 @@ function getAiFaceList(pageNum, pageSize, sendType) { | |||
// 选择显示的face列表 | |||
const showFace = ref("0"); | |||
function ChangeShowFaceList(index) { | |||
AiFaceList.value = null; | |||
if (index == 0) { | |||
getAiFaceList(1, 100, 1); | |||
} | |||
@@ -488,6 +490,7 @@ const recorder = new Recorder(parameter); | |||
const isRecording = ref(true); | |||
const audioUrl = ref(null); | |||
const audioData = ref(""); | |||
const videoId = ref(null); //上传mp3的videoId,创建视频会用到 | |||
const startRecording = async () => { | |||
try { | |||
@@ -516,12 +519,14 @@ const playRecording = () => { | |||
audio.play(); | |||
} | |||
}; | |||
// 上传音频 | |||
async function uploadAudio(params) { | |||
let formData = new FormData(); | |||
const timestamp = Date.now(); | |||
formData.append("file", audioData.value, timestamp + ".mp3"); | |||
try { | |||
const res = await videoUpload(formData); | |||
videoId.value = res.data.videoId; | |||
ElMessage.success("上传成功!"); | |||
} catch (error) { | |||
ElMessage.error(error); | |||
@@ -566,11 +571,17 @@ async function uploadProgress(videoId) { | |||
const res = await uploadProgressApi(videoId); | |||
if (res.data == "complete") { | |||
clearInterval(intervalId); | |||
const res2 = await saveAudioApi(videoId); | |||
} | |||
} | |||
//#endregion -------------------------------------- | |||
//#region 获取语言列表 | |||
//#region 生成视频 | |||
// 上传音频后,得到videoId | |||
//#endregion ---------------------------- | |||
//#region | |||
//#endregion ---------------------------- | |||
@@ -769,7 +780,7 @@ onMounted(() => { | |||
text-align: center; | |||
border-radius: 50%; | |||
background-color: #fbf8f8; | |||
border: 2px solid #fff; | |||
// border: 2px solid #fff; | |||
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px 5px; | |||
// overflow: hidden; | |||
.imgBox { | |||
@@ -786,6 +797,10 @@ onMounted(() => { | |||
background-color: #fbf8f8; | |||
overflow: hidden; | |||
img { | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
width: 100%; | |||
} | |||
} | |||
@@ -802,10 +817,14 @@ onMounted(() => { | |||
&::before { | |||
content: ""; | |||
position: absolute; | |||
// top: -3px; | |||
// right: -7px; | |||
// left: -3px; | |||
// bottom: -7px; | |||
top: -3px; | |||
right: -7px; | |||
right: -3px; | |||
left: -3px; | |||
bottom: -7px; | |||
bottom: -3px; | |||
z-index: 2; | |||
border-radius: 50%; | |||
background: linear-gradient( | |||
@@ -4740,6 +4740,11 @@ pidtree@^0.6.0: | |||
resolved "https://registry.npmmirror.com/pidtree/-/pidtree-0.6.0.tgz" | |||
integrity sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g== | |||
pinia-plugin-persistedstate@^3.1.0: | |||
version "3.1.0" | |||
resolved "https://registry.npmmirror.com/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-3.1.0.tgz#eada2b61ecd478fce88e490a685210415cd7a1b4" | |||
integrity sha512-8UN+vYMEPBdgNLwceY08mi5olI0wkYaEb8b6hD6xW7SnBRuPydWHlEhZvUWgNb/ibuf4PvufpvtS+dmhYjJQOw== | |||
pinia@^2.0.33: | |||
version "2.0.36" | |||
resolved "https://registry.npmmirror.com/pinia/-/pinia-2.0.36.tgz" | |||