Commit 1dc6a384 authored by Dazzle Wu's avatar Dazzle Wu

chore: 视频数字人横坐标调整

parent ba060a3f
...@@ -15,6 +15,7 @@ const audioPlaying = ref(false) ...@@ -15,6 +15,7 @@ const audioPlaying = ref(false)
const previewContentWidth = ref(0) const previewContentWidth = ref(0)
const previewContentHeight = ref(0) const previewContentHeight = ref(0)
const previewContent = ref<HTMLElement>() const previewContent = ref<HTMLElement>()
const digitalHumanImage = ref<HTMLImageElement>()
const digitalAudio = ref<HTMLAudioElement>() const digitalAudio = ref<HTMLAudioElement>()
const audioSetting = ref<AudioSetting>({ const audioSetting = ref<AudioSetting>({
codec: 'mp3', codec: 'mp3',
...@@ -31,7 +32,7 @@ const ttsSpeedMarks: { [speed: string]: number } = { ...@@ -31,7 +32,7 @@ const ttsSpeedMarks: { [speed: string]: number } = {
'4': -0.8, '4': -0.8,
'5': -0.5, '5': -0.5,
'6': 0, '6': 0,
'7': 1, '7': 0.8,
} }
const resizeObserver = new ResizeObserver((entries) => { const resizeObserver = new ResizeObserver((entries) => {
...@@ -42,6 +43,7 @@ const resizeObserver = new ResizeObserver((entries) => { ...@@ -42,6 +43,7 @@ const resizeObserver = new ResizeObserver((entries) => {
const isLandscape = computed(() => digitalCreationStore.width > digitalCreationStore.height) const isLandscape = computed(() => digitalCreationStore.width > digitalCreationStore.height)
const digitalHumanWidth = ref(0)
// const digitalHumanWidth = computed( // const digitalHumanWidth = computed(
// () => (digitalCreationStore.w * previewContentWidth.value) / (isLandscape.value ? 1920 : 1080), // () => (digitalCreationStore.w * previewContentWidth.value) / (isLandscape.value ? 1920 : 1080),
// ) // )
...@@ -49,7 +51,10 @@ const digitalHumanHeight = computed( ...@@ -49,7 +51,10 @@ const digitalHumanHeight = computed(
() => (digitalCreationStore.h * previewContentHeight.value) / (isLandscape.value ? 1080 : 1920), () => (digitalCreationStore.h * previewContentHeight.value) / (isLandscape.value ? 1080 : 1920),
) )
const digitalHumanLeft = computed( const digitalHumanLeft = computed(
() => (digitalCreationStore.x * previewContentWidth.value) / (isLandscape.value ? 1920 : 1080), () =>
(digitalCreationStore.x * previewContentWidth.value) / (isLandscape.value ? 1920 : 1080) +
previewContentWidth.value / 2 -
digitalHumanWidth.value / 2,
) )
const digitalHumanTop = computed( const digitalHumanTop = computed(
() => (digitalCreationStore.y * previewContentHeight.value) / (isLandscape.value ? 1080 : 1920), () => (digitalCreationStore.y * previewContentHeight.value) / (isLandscape.value ? 1080 : 1920),
...@@ -72,6 +77,10 @@ onUnmounted(() => { ...@@ -72,6 +77,10 @@ onUnmounted(() => {
previewContent.value && resizeObserver.unobserve(previewContent.value) previewContent.value && resizeObserver.unobserve(previewContent.value)
}) })
function getDigitalHumanWidth() {
digitalHumanWidth.value = digitalHumanImage.value?.width || 0
}
function connectWebSocket() { function connectWebSocket() {
websocket = new WebSocket(url) websocket = new WebSocket(url)
websocket.onopen = () => { websocket.onopen = () => {
...@@ -156,6 +165,7 @@ function controlAudio() { ...@@ -156,6 +165,7 @@ function controlAudio() {
/> />
<img <img
v-if="digitalCreationStore.inputImageUrl" v-if="digitalCreationStore.inputImageUrl"
ref="digitalHumanImage"
:src="digitalCreationStore.inputImageUrl" :src="digitalCreationStore.inputImageUrl"
class="absolute max-w-none object-cover" class="absolute max-w-none object-cover"
:style="{ :style="{
...@@ -164,6 +174,7 @@ function controlAudio() { ...@@ -164,6 +174,7 @@ function controlAudio() {
left: `${digitalHumanLeft}px`, left: `${digitalHumanLeft}px`,
top: `${digitalHumanTop}px`, top: `${digitalHumanTop}px`,
}" }"
@load="getDigitalHumanWidth"
/> />
</div> </div>
</div> </div>
......
...@@ -49,8 +49,12 @@ async function getDigitalTemplate(id: string) { ...@@ -49,8 +49,12 @@ async function getDigitalTemplate(id: string) {
pitch: digitalTemplate.ttsParams?.pitch || digitalCreationStore.pitch, pitch: digitalTemplate.ttsParams?.pitch || digitalCreationStore.pitch,
inputAudioUrl: digitalTemplate.inputAudioUrl, inputAudioUrl: digitalTemplate.inputAudioUrl,
figureId: digitalTemplate.figureId, figureId: digitalTemplate.figureId,
width: digitalTemplate.videoParams?.width || digitalCreationStore.width, width:
height: digitalTemplate.videoParams?.height || digitalCreationStore.height, digitalTemplate.videoParams?.width ||
(digitalTemplate.videoParams?.pageLayout === ScreenType.LANDSCAPE ? 1280 : 720),
height:
digitalTemplate.videoParams?.height ||
(digitalTemplate.videoParams?.pageLayout === ScreenType.LANDSCAPE ? 720 : 1280),
cameraId: digitalTemplate.dhParams?.cameraId || null, cameraId: digitalTemplate.dhParams?.cameraId || null,
x: digitalTemplate.dhParams?.position.x || digitalCreationStore.x, x: digitalTemplate.dhParams?.position.x || digitalCreationStore.x,
w: w:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment