1014 lines
26 KiB
Vue
1014 lines
26 KiB
Vue
|
<template>
|
|||
|
|
<view class="video-call-container">
|
|||
|
|
<!-- 顶部信息 -->
|
|||
|
|
<view class="header">
|
|||
|
|
<text class="caller-name">📹 与{{ callerName }}视频通话</text>
|
|||
|
|
<text class="call-duration">{{ callDuration }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 视频播放区域 -->
|
|||
|
|
<view class="video-section">
|
|||
|
|
<video
|
|||
|
|
v-if="currentVideoUrl"
|
|||
|
|
:src="currentVideoUrl"
|
|||
|
|
:loop="false"
|
|||
|
|
:autoplay="true"
|
|||
|
|
id="videoPlayer"
|
|||
|
|
:show-center-play-btn="false"
|
|||
|
|
:show-play-btn="false"
|
|||
|
|
:controls="false"
|
|||
|
|
:enable-progress-gesture="false"
|
|||
|
|
:show-progress="false"
|
|||
|
|
:show-fullscreen-btn="false"
|
|||
|
|
:show-loading="true"
|
|||
|
|
:object-fit="'contain'"
|
|||
|
|
:poster="''"
|
|||
|
|
class="video-player"
|
|||
|
|
@play="onVideoPlay"
|
|||
|
|
@pause="onVideoPause"
|
|||
|
|
@ended="onVideoEnded"
|
|||
|
|
@error="onVideoError"
|
|||
|
|
@loadedmetadata="onVideoLoaded"
|
|||
|
|
@waiting="onVideoWaiting"
|
|||
|
|
@canplay="onVideoCanPlay"
|
|||
|
|
@timeupdate="onVideoTimeUpdate"
|
|||
|
|
></video>
|
|||
|
|
|
|||
|
|
<!-- 视频加载提示 -->
|
|||
|
|
<view v-if="isVideoLoading" class="video-loading">
|
|||
|
|
<text>📹 视频加载中...</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 说话状态指示器 -->
|
|||
|
|
<view v-if="isSpeaking" class="speaking-indicator">
|
|||
|
|
<text class="pulse">🔊 正在说话...</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 对话历史 -->
|
|||
|
|
<scroll-view scroll-y class="chat-history" :scroll-top="scrollTop" scroll-with-animation>
|
|||
|
|
<view v-for="(msg, index) in messages" :key="index" :class="['message', msg.role === 'user' ? 'user-message' : 'ai-message']">
|
|||
|
|
<view class="message-avatar">{{ msg.role === 'user' ? '👤' : '🤖' }}</view>
|
|||
|
|
<view class="message-content">
|
|||
|
|
<text class="message-text">{{ msg.content }}</text>
|
|||
|
|
<text class="message-time">{{ msg.time }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view v-if="messages.length === 0" class="empty-hint">
|
|||
|
|
<text>👋 开始对话吧</text>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
<!-- 控制按钮 -->
|
|||
|
|
<view class="controls">
|
|||
|
|
<view v-if="voiceId && voiceId.startsWith('cosyvoice-v3-plus-')" class="form-section">
|
|||
|
|
<view class="form-label">方言</view>
|
|||
|
|
<picker mode="selector" :range="dialectOptions" @change="onDialectChange">
|
|||
|
|
<view class="picker-large">
|
|||
|
|
{{ selectedDialect || '请选择方言（可选）' }}
|
|||
|
|
</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view v-if="voiceId && voiceId.startsWith('cosyvoice-v3-plus-')" class="form-section">
|
|||
|
|
<view class="form-label">语言提示（可选）</view>
|
|||
|
|
<picker mode="selector" :range="languageHintOptions" @change="onLanguageHintChange">
|
|||
|
|
<view class="picker-large">
|
|||
|
|
{{ selectedLanguageHintLabel || '请选择语言（可选）' }}
|
|||
|
|
</view>
|
|||
|
|
</picker>
|
|||
|
|
<view class="hint-text">💡 仅处理第一个值；不设置不生效</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="control-row">
|
|||
|
|
<button v-if="!isRecording && !isProcessing" class="talk-btn" @click="startTalking">
|
|||
|
|
🎤 开始说话
|
|||
|
|
</button>
|
|||
|
|
<button v-if="isRecording" class="talk-btn recording" @click="stopTalking">
|
|||
|
|
⏹️ 停止录音
|
|||
|
|
</button>
|
|||
|
|
<button v-if="isProcessing" class="talk-btn processing" disabled>
|
|||
|
|
⏳ {{ processingText }}
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
<view class="control-row">
|
|||
|
|
<button class="hangup-btn" @click="hangUp">
|
|||
|
|
📞 挂断
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { API_BASE, API_ENDPOINTS, buildURL } from '@/config/api.js';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
API_BASE,
|
|||
|
|
|
|||
|
|
// 视频资源
|
|||
|
|
idleVideoUrl: '', // 待机视频URL
|
|||
|
|
talkingVideoUrl: '', // 说话视频URL
|
|||
|
|
currentVideoUrl: '', // 当前播放的视频URL
|
|||
|
|
isVideoLoading: true, // 视频是否正在加载
|
|||
|
|
videoContext: null, // 视频控制器
|
|||
|
|
hasPlayedInitial: false, // 是否已播放初始1秒
|
|||
|
|
|
|||
|
|
// 通话信息
|
|||
|
|
callerName: '对方',
|
|||
|
|
voiceId: '',
|
|||
|
|
selectedDialect: '',
|
|||
|
|
selectedLanguageHint: '',
|
|||
|
|
selectedLanguageHintLabel: '',
|
|||
|
|
languageHintOptions: ['中文(zh)', '英文(en)', '法语(fr)', '德语(de)', '日语(ja)', '韩语(ko)', '俄语(ru)'],
|
|||
|
|
dialectOptions: ['广东话', '东北话', '甘肃话', '贵州话', '河南话', '湖北话', '江西话', '闽南话', '宁夏话', '山西话', '陕西话', '山东话', '上海话', '四川话', '天津话', '云南话'],
|
|||
|
|
callDuration: '00:00',
|
|||
|
|
callStartTime: null,
|
|||
|
|
durationTimer: null,
|
|||
|
|
|
|||
|
|
// 状态
|
|||
|
|
isIdle: true, // 是否待机状态
|
|||
|
|
isSpeaking: false, // AI是否在说话
|
|||
|
|
isRecording: false,
|
|||
|
|
isProcessing: false,
|
|||
|
|
processingText: '处理中...',
|
|||
|
|
|
|||
|
|
// 对话
|
|||
|
|
messages: [],
|
|||
|
|
systemPrompt: '你是一位温暖的对话者，用亲切的语气与对方交流。',
|
|||
|
|
|
|||
|
|
// 录音
|
|||
|
|
recorderManager: null,
|
|||
|
|
audioFilePath: '',
|
|||
|
|
|
|||
|
|
// 音频播放
|
|||
|
|
audioContext: null,
|
|||
|
|
|
|||
|
|
// 语音活动检测（VAD）
|
|||
|
|
vadEnabled: true,
|
|||
|
|
vadVoiceThreshold: 0.004, // 0~1 之间的音量阈值，更灵敏
|
|||
|
|
vadSilenceMs: 2500, // 静音判定时长
|
|||
|
|
vadMaxDurationMs: 60000, // 单次录音最大时长
|
|||
|
|
vadSpeaking: false,
|
|||
|
|
vadSilenceStart: null,
|
|||
|
|
vadMaxTimer: null,
|
|||
|
|
recordingStartTime: null,
|
|||
|
|
vadLastSoundTime: null,
|
|||
|
|
vadLastFrameTime: null,
|
|||
|
|
vadWatchTimer: null,
|
|||
|
|
autoListen: true,
|
|||
|
|
autoLoopTimer: null,
|
|||
|
|
|
|||
|
|
// 滚动
|
|||
|
|
scrollTop: 0
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onLoad(options) {
|
|||
|
|
console.log('[VideoCall] 页面参数:', options);
|
|||
|
|
|
|||
|
|
// 从参数获取视频和音色信息
|
|||
|
|
this.idleVideoUrl = decodeURIComponent(options.idleVideo || '');
|
|||
|
|
this.talkingVideoUrl = decodeURIComponent(options.talkingVideo || this.idleVideoUrl);
|
|||
|
|
this.voiceId = options.voiceId || '';
|
|||
|
|
this.callerName = decodeURIComponent(options.callerName || '对方');
|
|||
|
|
|
|||
|
|
console.log('[VideoCall] 待机视频URL:', this.idleVideoUrl);
|
|||
|
|
console.log('[VideoCall] 说话视频URL:', this.talkingVideoUrl);
|
|||
|
|
console.log('[VideoCall] 音色ID:', this.voiceId);
|
|||
|
|
|
|||
|
|
// 下载视频到本地并转换路径
|
|||
|
|
this.downloadAndConvertVideo();
|
|||
|
|
|
|||
|
|
this.startCallTimer();
|
|||
|
|
this.initRecorder();
|
|||
|
|
this.initAudioContext();
|
|||
|
|
this.initVideoContext();
|
|||
|
|
this.startAutoLoop();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onUnload() {
|
|||
|
|
// 清理定时器
|
|||
|
|
if (this.durationTimer) {
|
|||
|
|
clearInterval(this.durationTimer);
|
|||
|
|
}
|
|||
|
|
if (this.vadMaxTimer) {
|
|||
|
|
clearTimeout(this.vadMaxTimer);
|
|||
|
|
this.vadMaxTimer = null;
|
|||
|
|
}
|
|||
|
|
if (this.vadWatchTimer) {
|
|||
|
|
clearInterval(this.vadWatchTimer);
|
|||
|
|
this.vadWatchTimer = null;
|
|||
|
|
}
|
|||
|
|
if (this.autoLoopTimer) {
|
|||
|
|
clearInterval(this.autoLoopTimer);
|
|||
|
|
this.autoLoopTimer = null;
|
|||
|
|
}
|
|||
|
|
// 清理音频
|
|||
|
|
if (this.audioContext) {
|
|||
|
|
this.audioContext.destroy();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
// 下载视频并转换本地路径
|
|||
|
|
async downloadAndConvertVideo() {
|
|||
|
|
if (!this.idleVideoUrl) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '视频URL无效',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('[VideoCall] ========== 视频加载 ==========');
|
|||
|
|
console.log('[VideoCall] 原始URL:', this.idleVideoUrl);
|
|||
|
|
|
|||
|
|
// 从配置获取 API_BASE，用于判断是否是服务器视频
|
|||
|
|
const apiBaseUrl = new URL(API_BASE).hostname;
|
|||
|
|
|
|||
|
|
// 检查是否是本地服务器视频（包含 /static/videos/ 路径或包含 API_BASE 的域名）
|
|||
|
|
const isLocalServerVideo = this.idleVideoUrl.includes('/static/videos/') ||
|
|||
|
|
this.idleVideoUrl.includes(apiBaseUrl);
|
|||
|
|
|
|||
|
|
// 检查是否是外部视频链接（grsai.com等）
|
|||
|
|
const isExternalVideo = this.idleVideoUrl.includes('grsai.com') ||
|
|||
|
|
this.idleVideoUrl.includes('file49');
|
|||
|
|
|
|||
|
|
if (isExternalVideo) {
|
|||
|
|
console.log('[VideoCall] 检测到外部视频链接，直接使用URL播放');
|
|||
|
|
this.currentVideoUrl = this.idleVideoUrl;
|
|||
|
|
this.talkingVideoUrl = this.idleVideoUrl;
|
|||
|
|
console.log('[VideoCall] ========== 视频准备完成 ==========');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (isLocalServerVideo) {
|
|||
|
|
console.log('[VideoCall] 检测到本地服务器视频，直接使用URL播放');
|
|||
|
|
this.currentVideoUrl = this.idleVideoUrl;
|
|||
|
|
this.talkingVideoUrl = this.idleVideoUrl;
|
|||
|
|
console.log('[VideoCall] ========== 视频准备完成 ==========');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 本地服务器视频，尝试下载
|
|||
|
|
console.log('[VideoCall] 本地服务器视频，开始下载...');
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '视频加载中...',
|
|||
|
|
mask: true
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 下载视频到本地
|
|||
|
|
uni.downloadFile({
|
|||
|
|
url: this.idleVideoUrl,
|
|||
|
|
success: (res) => {
|
|||
|
|
console.log('[VideoCall] 下载响应状态码:', res.statusCode);
|
|||
|
|
|
|||
|
|
if (res.statusCode === 200) {
|
|||
|
|
console.log('[VideoCall] ✅ 视频下载成功');
|
|||
|
|
console.log('[VideoCall] 临时路径:', res.tempFilePath);
|
|||
|
|
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
// APP环境：转换本地路径为UniApp可识别格式
|
|||
|
|
if (typeof plus !== 'undefined' && plus.io) {
|
|||
|
|
try {
|
|||
|
|
console.log('[VideoCall] 开始转换路径...');
|
|||
|
|
const convertedPath = plus.io.convertLocalFileSystemURL(res.tempFilePath);
|
|||
|
|
console.log('[VideoCall] ✅ 路径转换成功');
|
|||
|
|
console.log('[VideoCall] 转换后路径:', convertedPath);
|
|||
|
|
|
|||
|
|
this.currentVideoUrl = convertedPath;
|
|||
|
|
this.idleVideoUrl = convertedPath;
|
|||
|
|
this.talkingVideoUrl = convertedPath;
|
|||
|
|
|
|||
|
|
uni.hideLoading();
|
|||
|
|
console.log('[VideoCall] ========== 视频准备完成 ==========');
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('[VideoCall] ❌ 路径转换失败:', err);
|
|||
|
|
console.log('[VideoCall] 使用临时路径作为备选方案');
|
|||
|
|
|
|||
|
|
// 转换失败，直接使用临时路径
|
|||
|
|
this.currentVideoUrl = res.tempFilePath;
|
|||
|
|
this.idleVideoUrl = res.tempFilePath;
|
|||
|
|
this.talkingVideoUrl = res.tempFilePath;
|
|||
|
|
uni.hideLoading();
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
console.log('[VideoCall] plus.io 不可用，使用临时路径');
|
|||
|
|
this.currentVideoUrl = res.tempFilePath;
|
|||
|
|
this.idleVideoUrl = res.tempFilePath;
|
|||
|
|
this.talkingVideoUrl = res.tempFilePath;
|
|||
|
|
uni.hideLoading();
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifndef APP-PLUS
|
|||
|
|
// 非APP环境，直接使用临时路径
|
|||
|
|
console.log('[VideoCall] 非APP环境，使用临时路径');
|
|||
|
|
this.currentVideoUrl = res.tempFilePath;
|
|||
|
|
this.idleVideoUrl = res.tempFilePath;
|
|||
|
|
this.talkingVideoUrl = res.tempFilePath;
|
|||
|
|
uni.hideLoading();
|
|||
|
|
// #endif
|
|||
|
|
} else {
|
|||
|
|
console.error('[VideoCall] ❌ 视频下载失败，状态码:', res.statusCode);
|
|||
|
|
this.handleDownloadError();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('[VideoCall] ❌ 视频下载失败:', err);
|
|||
|
|
console.error('[VideoCall] 错误详情:', JSON.stringify(err));
|
|||
|
|
this.handleDownloadError();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理下载失败
|
|||
|
|
handleDownloadError() {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
|
|||
|
|
console.log('[VideoCall] 下载失败，直接使用原URL播放');
|
|||
|
|
this.currentVideoUrl = this.idleVideoUrl;
|
|||
|
|
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '将直接播放网络视频',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 初始化录音
|
|||
|
|
initRecorder() {
|
|||
|
|
this.recorderManager = uni.getRecorderManager();
|
|||
|
|
|
|||
|
|
this.recorderManager.onStart(() => {
|
|||
|
|
console.log('[VideoCall] 开始录音');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.recorderManager.onStop((res) => {
|
|||
|
|
console.log('[VideoCall] 录音完成:', res.tempFilePath);
|
|||
|
|
this.resetVADState();
|
|||
|
|
|
|||
|
|
const duration = res.duration || (Date.now() - (this.recordingStartTime || Date.now()));
|
|||
|
|
if (duration < 400) {
|
|||
|
|
console.warn('[VideoCall] 录音过短，忽略本次');
|
|||
|
|
this.isProcessing = false;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.audioFilePath = res.tempFilePath;
|
|||
|
|
this.processConversation();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 帧回调用于VAD
|
|||
|
|
this.recorderManager.onFrameRecorded && this.recorderManager.onFrameRecorded((res) => {
|
|||
|
|
if (!this.vadEnabled || this.isProcessing) return;
|
|||
|
|
this.handleVADFrame(res.frameBuffer);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.recorderManager.onError((err) => {
|
|||
|
|
console.error('[VideoCall] 录音失败:', err);
|
|||
|
|
console.error('[VideoCall] 错误详情:', JSON.stringify(err));
|
|||
|
|
this.isRecording = false;
|
|||
|
|
this.resetVADState();
|
|||
|
|
|
|||
|
|
let errorMsg = '录音失败';
|
|||
|
|
if (err.errMsg) {
|
|||
|
|
if (err.errMsg.includes('permission')) {
|
|||
|
|
errorMsg = '录音权限被拒绝，请在设置中允许录音权限';
|
|||
|
|
} else if (err.errMsg.includes('busy')) {
|
|||
|
|
errorMsg = '录音设备忙，请稍后再试';
|
|||
|
|
} else {
|
|||
|
|
errorMsg = `录音失败: ${err.errMsg}`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '录音失败',
|
|||
|
|
content: errorMsg + '\n\n请检查:\n1. 是否授予录音权限\n2. 麦克风是否被其他应用占用\n3. 设备是否支持录音',
|
|||
|
|
showCancel: false,
|
|||
|
|
confirmText: '知道了'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 初始化视频控制器
|
|||
|
|
initVideoContext() {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.videoContext = uni.createVideoContext('videoPlayer', this);
|
|||
|
|
console.log('[VideoCall] 视频控制器初始化完成');
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 初始化音频播放器
|
|||
|
|
initAudioContext() {
|
|||
|
|
this.audioContext = uni.createInnerAudioContext();
|
|||
|
|
|
|||
|
|
this.audioContext.onPlay(() => {
|
|||
|
|
console.log('[VideoCall] 开始播放AI回复');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.audioContext.onEnded(() => {
|
|||
|
|
console.log('[VideoCall] AI回复播放完成');
|
|||
|
|
// 恢复待机状态
|
|||
|
|
this.isSpeaking = false;
|
|||
|
|
this.isIdle = true;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.audioContext.onError((err) => {
|
|||
|
|
console.error('[VideoCall] 音频播放失败:', err);
|
|||
|
|
this.isSpeaking = false;
|
|||
|
|
this.isIdle = true;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 开始通话计时
|
|||
|
|
startCallTimer() {
|
|||
|
|
this.callStartTime = Date.now();
|
|||
|
|
this.durationTimer = setInterval(() => {
|
|||
|
|
const elapsed = Math.floor((Date.now() - this.callStartTime) / 1000);
|
|||
|
|
const minutes = Math.floor(elapsed / 60)
|
|||
|
|
.toString()
|
|||
|
|
.padStart(2, '0');
|
|||
|
|
const seconds = (elapsed % 60).toString().padStart(2, '0');
|
|||
|
|
this.callDuration = `${minutes}:${seconds}`;
|
|||
|
|
}, 1000);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 开始说话
|
|||
|
|
startTalking() {
|
|||
|
|
if (this.isProcessing) return;
|
|||
|
|
|
|||
|
|
this.resetVADState();
|
|||
|
|
this.recordingStartTime = Date.now();
|
|||
|
|
this.vadLastSoundTime = this.recordingStartTime;
|
|||
|
|
this.vadLastFrameTime = this.recordingStartTime;
|
|||
|
|
this.isRecording = true;
|
|||
|
|
this.vadMaxTimer = setTimeout(() => {
|
|||
|
|
this.stopTalkingFromVAD('max_duration');
|
|||
|
|
}, this.vadMaxDurationMs);
|
|||
|
|
this.vadWatchTimer = setInterval(() => {
|
|||
|
|
if (!this.isRecording) return;
|
|||
|
|
const now = Date.now();
|
|||
|
|
const elapsed = now - (this.recordingStartTime || now);
|
|||
|
|
|
|||
|
|
// 如果没有帧回调，4s 兜底停止
|
|||
|
|
if (now - (this.vadLastFrameTime || now) > 12000) {
|
|||
|
|
this.stopTalkingFromVAD('no_frame');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 静音超时（需已检测到说话）
|
|||
|
|
if (elapsed > 1500 && this.vadSpeaking && now - (this.vadLastSoundTime || now) > this.vadSilenceMs) {
|
|||
|
|
this.stopTalkingFromVAD('silence');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
}, 300);
|
|||
|
|
|
|||
|
|
this.recorderManager.start({
|
|||
|
|
format: 'mp3',
|
|||
|
|
sampleRate: 16000,
|
|||
|
|
numberOfChannels: 1,
|
|||
|
|
encodeBitRate: 48000,
|
|||
|
|
frameSize: 32 // KB，触发帧回调用于VAD
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '正在聆听（自动识别说话）',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 10000
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 停止说话
|
|||
|
|
stopTalking() {
|
|||
|
|
this.stopTalkingFromVAD('manual');
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// VAD/手动统一停止
|
|||
|
|
stopTalkingFromVAD(reason = 'vad') {
|
|||
|
|
this.isRecording = false;
|
|||
|
|
this.recorderManager.stop();
|
|||
|
|
this.isProcessing = true;
|
|||
|
|
this.processingText = '识别中...';
|
|||
|
|
this.resetVADState();
|
|||
|
|
|
|||
|
|
console.log('[VideoCall] 停止录音，原因:', reason);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
resetVADState() {
|
|||
|
|
this.vadSpeaking = false;
|
|||
|
|
this.vadSilenceStart = null;
|
|||
|
|
this.vadLastSoundTime = null;
|
|||
|
|
this.vadLastFrameTime = null;
|
|||
|
|
if (this.vadMaxTimer) {
|
|||
|
|
clearTimeout(this.vadMaxTimer);
|
|||
|
|
this.vadMaxTimer = null;
|
|||
|
|
}
|
|||
|
|
if (this.vadWatchTimer) {
|
|||
|
|
clearInterval(this.vadWatchTimer);
|
|||
|
|
this.vadWatchTimer = null;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onDialectChange(e) {
|
|||
|
|
this.selectedDialect = this.dialectOptions[e.detail.value] || '';
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
onLanguageHintChange(e) {
|
|||
|
|
const label = this.languageHintOptions[e.detail.value] || '';
|
|||
|
|
this.selectedLanguageHintLabel = label;
|
|||
|
|
const match = label.match(/\(([^)]+)\)/);
|
|||
|
|
this.selectedLanguageHint = match && match[1] ? match[1] : '';
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleVADFrame(frameBuffer) {
|
|||
|
|
if (!frameBuffer || frameBuffer.byteLength === 0) return;
|
|||
|
|
|
|||
|
|
this.vadLastFrameTime = Date.now();
|
|||
|
|
const volume = this.calculateRms(frameBuffer);
|
|||
|
|
|
|||
|
|
// 检测到声音
|
|||
|
|
if (volume > this.vadVoiceThreshold) {
|
|||
|
|
this.vadSpeaking = true;
|
|||
|
|
this.vadSilenceStart = null;
|
|||
|
|
this.vadLastSoundTime = Date.now();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 已在说话，出现静音
|
|||
|
|
if (this.vadSpeaking) {
|
|||
|
|
if (!this.vadSilenceStart) {
|
|||
|
|
this.vadSilenceStart = Date.now();
|
|||
|
|
} else if (Date.now() - this.vadSilenceStart > this.vadSilenceMs) {
|
|||
|
|
this.stopTalkingFromVAD('silence');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
calculateRms(frameBuffer) {
|
|||
|
|
const dataView = new DataView(frameBuffer);
|
|||
|
|
const len = dataView.byteLength / 2; // 16-bit
|
|||
|
|
if (len === 0) return 0;
|
|||
|
|
|
|||
|
|
let sum = 0;
|
|||
|
|
for (let i = 0; i < len; i++) {
|
|||
|
|
const sample = dataView.getInt16(i * 2, true); // little-endian
|
|||
|
|
sum += sample * sample;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return Math.sqrt(sum / len) / 32768; // 归一化
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
startAutoLoop() {
|
|||
|
|
if (!this.autoListen) return;
|
|||
|
|
if (this.autoLoopTimer) {
|
|||
|
|
clearInterval(this.autoLoopTimer);
|
|||
|
|
}
|
|||
|
|
this.autoLoopTimer = setInterval(() => {
|
|||
|
|
if (!this.autoListen) return;
|
|||
|
|
// 空闲才自动开始
|
|||
|
|
if (!this.isRecording && !this.isProcessing) {
|
|||
|
|
this.startTalking();
|
|||
|
|
}
|
|||
|
|
}, 2000);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理对话
|
|||
|
|
async processConversation() {
|
|||
|
|
try {
|
|||
|
|
this.processingText = '正在识别...';
|
|||
|
|
|
|||
|
|
console.log('[VideoCall] 开始对话请求');
|
|||
|
|
console.log('[VideoCall] 音频文件:', this.audioFilePath);
|
|||
|
|
console.log('[VideoCall] 音色ID:', this.voiceId);
|
|||
|
|
|
|||
|
|
const userId = uni.getStorageSync('userId') || '';
|
|||
|
|
const token = uni.getStorageSync('token') || '';
|
|||
|
|
|
|||
|
|
// 上传音频并处理对话
|
|||
|
|
uni.uploadFile({
|
|||
|
|
url: `${this.API_BASE}/api/conversation/talk`,
|
|||
|
|
filePath: this.audioFilePath,
|
|||
|
|
name: 'audio',
|
|||
|
|
header: {
|
|||
|
|
'X-User-Id': userId,
|
|||
|
|
'Authorization': token ? `Bearer ${token}` : ''
|
|||
|
|
},
|
|||
|
|
formData: (() => {
|
|||
|
|
const voiceId = this.voiceId || '';
|
|||
|
|
const voiceType = (() => {
|
|||
|
|
const v = (voiceId || '').trim();
|
|||
|
|
if (!v) return 'CLONE';
|
|||
|
|
const knownOfficial = ['Cherry','Kai','Mochi','Bunny','Jada','Dylan','Li','Marcus','Roy','Peter','Sunny','Eric','Rocky','Kiki'];
|
|||
|
|
if (knownOfficial.includes(v)) return 'OFFICIAL';
|
|||
|
|
if (v.startsWith('BV') || v.endsWith('_streaming') || v.endsWith('_offline') || v.endsWith('_bigtts')) return 'OFFICIAL';
|
|||
|
|
return 'CLONE';
|
|||
|
|
})();
|
|||
|
|
const data = { voiceId, voiceType };
|
|||
|
|
if (this.voiceId && this.voiceId.startsWith('cosyvoice-v3-plus-') && this.selectedDialect) {
|
|||
|
|
data.dialect = this.selectedDialect;
|
|||
|
|
}
|
|||
|
|
if (this.voiceId && this.voiceId.startsWith('cosyvoice-v3-plus-') && this.selectedLanguageHint) {
|
|||
|
|
data.languageHints = this.selectedLanguageHint;
|
|||
|
|
}
|
|||
|
|
return data;
|
|||
|
|
})(),
|
|||
|
|
success: (res) => {
|
|||
|
|
console.log('[VideoCall] 对话响应状态码:', res.statusCode);
|
|||
|
|
console.log('[VideoCall] 对话响应数据:', res.data);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const result = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
|
|||
|
|
|
|||
|
|
if (result.success) {
|
|||
|
|
console.log('[VideoCall] 对话成功');
|
|||
|
|
console.log('[VideoCall] 识别文本:', result.recognizedText);
|
|||
|
|
console.log('[VideoCall] AI回复:', result.aiResponse);
|
|||
|
|
console.log('[VideoCall] 音频文件:', result.audioFile);
|
|||
|
|
|
|||
|
|
// 添加用户消息
|
|||
|
|
this.addMessage('user', result.recognizedText);
|
|||
|
|
|
|||
|
|
// 添加AI回复
|
|||
|
|
this.addMessage('ai', result.aiResponse);
|
|||
|
|
|
|||
|
|
// 播放AI回复
|
|||
|
|
this.playAIResponse(result.audioFile);
|
|||
|
|
} else {
|
|||
|
|
console.error('[VideoCall] 对话失败:', result.message);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: result.message || '对话失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
this.isProcessing = false;
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('[VideoCall] JSON解析失败:', e);
|
|||
|
|
console.error('[VideoCall] 原始响应:', res.data);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '服务器响应格式错误',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
this.isProcessing = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('[VideoCall] 对话失败:', err);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '对话失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
this.isProcessing = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('[VideoCall] 对话失败:', error);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '对话失败: ' + error.message,
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
this.isProcessing = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 播放AI回复
|
|||
|
|
playAIResponse(audioFile) {
|
|||
|
|
this.processingText = '正在回复...';
|
|||
|
|
|
|||
|
|
// 标记AI正在说话（视频会在音频播放时自动播放）
|
|||
|
|
this.isIdle = false;
|
|||
|
|
this.isSpeaking = true;
|
|||
|
|
|
|||
|
|
// 播放音频（音频播放时会触发视频播放）
|
|||
|
|
this.audioContext.src = `${this.API_BASE}/api/conversation/audio/${audioFile}`;
|
|||
|
|
this.audioContext.play();
|
|||
|
|
|
|||
|
|
this.isProcessing = false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 添加消息
|
|||
|
|
addMessage(role, content) {
|
|||
|
|
const now = new Date();
|
|||
|
|
const time = `${now.getHours()}:${now
|
|||
|
|
.getMinutes()
|
|||
|
|
.toString()
|
|||
|
|
.padStart(2, '0')}`;
|
|||
|
|
|
|||
|
|
this.messages.push({
|
|||
|
|
role,
|
|||
|
|
content,
|
|||
|
|
time
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 滚动到底部
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.scrollTop = 999999;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 视频播放事件
|
|||
|
|
onVideoPlay() {
|
|||
|
|
console.log('[VideoCall] 视频开始播放');
|
|||
|
|
this.isVideoLoading = false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 视频暂停事件
|
|||
|
|
onVideoPause() {
|
|||
|
|
console.log('[VideoCall] 视频暂停');
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 视频结束事件
|
|||
|
|
onVideoEnded() {
|
|||
|
|
console.log('[VideoCall] 视频播放结束');
|
|||
|
|
if (!this.isIdle && this.isSpeaking) {
|
|||
|
|
// 说话视频结束但音频还在播放，继续循环视频
|
|||
|
|
console.log('[VideoCall] 视频循环播放');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 视频加载成功
|
|||
|
|
onVideoLoaded(e) {
|
|||
|
|
console.log('[VideoCall] 视频元数据加载成功:', e);
|
|||
|
|
this.isVideoLoading = false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 视频可以播放
|
|||
|
|
onVideoCanPlay() {
|
|||
|
|
console.log('[VideoCall] 视频可以播放');
|
|||
|
|
this.isVideoLoading = false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 视频缓冲中
|
|||
|
|
onVideoWaiting() {
|
|||
|
|
console.log('[VideoCall] 视频缓冲中...');
|
|||
|
|
this.isVideoLoading = true;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 视频时间更新
|
|||
|
|
onVideoTimeUpdate(e) {
|
|||
|
|
if (!this.hasPlayedInitial && e.detail && e.detail.currentTime >= 1) {
|
|||
|
|
console.log('[VideoCall] 视频已播放1秒，暂停等待AI回复');
|
|||
|
|
this.hasPlayedInitial = true;
|
|||
|
|
if (this.videoContext) {
|
|||
|
|
this.videoContext.pause();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 视频加载错误
|
|||
|
|
onVideoError(e) {
|
|||
|
|
console.error('[VideoCall] 视频加载失败:', e);
|
|||
|
|
console.error('[VideoCall] 视频URL:', this.currentVideoUrl);
|
|||
|
|
console.error('[VideoCall] 错误详情:', JSON.stringify(e));
|
|||
|
|
|
|||
|
|
this.isVideoLoading = false;
|
|||
|
|
|
|||
|
|
const errMsg = e.detail && e.detail.errMsg ? e.detail.errMsg : '未知错误';
|
|||
|
|
const errCode = e.detail && e.detail.errCode ? e.detail.errCode : 'N/A';
|
|||
|
|
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '视频加载失败',
|
|||
|
|
content: `错误代码: ${errCode}\n错误信息: ${errMsg}\n\n视频URL:\n${this.currentVideoUrl}\n\n请检查:\n1. URL是否有效\n2. 网络连接\n3. 视频格式是否支持\n4. HTTP权限配置`,
|
|||
|
|
showCancel: false,
|
|||
|
|
confirmText: '知道了'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 挂断通话
|
|||
|
|
hangUp() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '结束通话',
|
|||
|
|
content: '确定要结束通话吗？',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
// 停止录音
|
|||
|
|
if (this.isRecording) {
|
|||
|
|
this.recorderManager.stop();
|
|||
|
|
}
|
|||
|
|
// 停止音频播放
|
|||
|
|
if (this.audioContext) {
|
|||
|
|
this.audioContext.stop();
|
|||
|
|
}
|
|||
|
|
// 返回上一页
|
|||
|
|
uni.navigateBack();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.video-call-container {
|
|||
|
|
height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
background: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header {
|
|||
|
|
padding: 40rpx 40rpx 40rpx 24rpx; /* 左侧缩进，整体左移 */
|
|||
|
|
padding-top: calc(40rpx + constant(safe-area-inset-top));
|
|||
|
|
padding-top: calc(40rpx + env(safe-area-inset-top));
|
|||
|
|
background: rgba(0, 0, 0, 0.8);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.caller-name {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.call-duration {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #4caf50;
|
|||
|
|
font-family: monospace;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-section {
|
|||
|
|
flex: 1;
|
|||
|
|
position: relative;
|
|||
|
|
background: #000;
|
|||
|
|
overflow: hidden;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-player {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.video-loading {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
background: rgba(0, 0, 0, 0.7);
|
|||
|
|
padding: 30rpx 50rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
color: white;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
z-index: 20;
|
|||
|
|
pointer-events: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.speaking-indicator {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20rpx;
|
|||
|
|
right: 20rpx;
|
|||
|
|
background: rgba(76, 175, 80, 0.9);
|
|||
|
|
padding: 16rpx 32rpx;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
|
|||
|
|
z-index: 20;
|
|||
|
|
pointer-events: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pulse {
|
|||
|
|
color: white;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
animation: pulse 1s infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes pulse {
|
|||
|
|
0%,
|
|||
|
|
100% {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
50% {
|
|||
|
|
opacity: 0.5;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chat-history {
|
|||
|
|
height: 300rpx;
|
|||
|
|
background: rgba(255, 255, 255, 0.95);
|
|||
|
|
padding: 20rpx 20rpx 20rpx 10rpx; /* 左侧缩进，内容左移 */
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-hint {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 60rpx 0;
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message {
|
|||
|
|
display: flex;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
animation: slideIn 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes slideIn {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateY(20rpx);
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-message {
|
|||
|
|
flex-direction: row-reverse;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-avatar {
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
margin: 0 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-content {
|
|||
|
|
max-width: 70%;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
background: #e3f2fd;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-message .message-content {
|
|||
|
|
background: #c8e6c9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
display: block;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-time {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.controls {
|
|||
|
|
padding: 30rpx 30rpx 30rpx 14rpx; /* 左侧缩进，按钮左移 */
|
|||
|
|
background: rgba(0, 0, 0, 0.8);
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-row {
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control-row:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.talk-btn {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
background: #4caf50;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 50rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
box-shadow: 0 8rpx 16rpx rgba(76, 175, 80, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.talk-btn.recording {
|
|||
|
|
background: #f44336;
|
|||
|
|
animation: pulse 1s infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.talk-btn.processing {
|
|||
|
|
background: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.talk-btn[disabled] {
|
|||
|
|
opacity: 0.6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hangup-btn {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 32rpx;
|
|||
|
|
background: #f44336;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 50rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
box-shadow: 0 8rpx 16rpx rgba(244, 67, 54, 0.3);
|
|||
|
|
}
|
|||
|
|
</style>
|