|
@@ -130,6 +130,14 @@
|
|
|
<span class="upload-status-text">{{ uploadStatusText }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 修改录制时长显示 -->
|
|
|
+ <div class="recording-timer" v-if="isRecording">
|
|
|
+ <span class="timer-text">{{ recordingTimeDisplay || '00:00 / 05:00' }}</span>
|
|
|
+ <!-- <span class="remaining-time" :class="{'warning': remainingTime <= 10}">
|
|
|
+ 剩余: {{ formatTime(remainingTime) }}
|
|
|
+ </span> -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -236,6 +244,9 @@ export default {
|
|
|
uploadStatus: {}, // 存储每个视频的上传状态
|
|
|
showUploadStatus: false, // 是否显示上传状态指示器
|
|
|
uploadStatusText: '', // 上传状态文本
|
|
|
+ mediaRecorderTimeout: null, // 用于存储MediaRecorder的超时机制
|
|
|
+ maxRecordingTime: 300, // 最大录制时间(秒)- 从60秒改为300秒(5分钟)
|
|
|
+ remainingTime: 300, // 剩余录制时间(秒)- 从60秒改为300秒
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
@@ -816,13 +827,22 @@ export default {
|
|
|
// 记录录制开始时间
|
|
|
this.recordingStartTime = Date.now();
|
|
|
this.recordingTimerCount = 0;
|
|
|
+ this.remainingTime = this.maxRecordingTime;
|
|
|
|
|
|
// 启动计时器,每秒更新计时
|
|
|
this.recordingTimer = setInterval(() => {
|
|
|
this.recordingTimerCount++;
|
|
|
+ this.remainingTime = Math.max(0, this.maxRecordingTime - this.recordingTimerCount);
|
|
|
|
|
|
- // 可以在这里更新UI显示录制时长
|
|
|
- // 例如:this.recordingTimeDisplay = this.formatTime(this.recordingTimerCount);
|
|
|
+ // 更新UI显示录制时长和剩余时间
|
|
|
+ this.recordingTimeDisplay = this.formatTime(this.recordingTimerCount) +
|
|
|
+ ' / ' + this.formatTime(this.maxRecordingTime);
|
|
|
+
|
|
|
+ // 检查是否达到最大录制时间
|
|
|
+ if (this.recordingTimerCount >= this.maxRecordingTime) {
|
|
|
+ console.log('已达到最大录制时间(60秒),自动停止录制');
|
|
|
+ this.stopRecordingAnswer();
|
|
|
+ }
|
|
|
}, 1000);
|
|
|
|
|
|
// 显示录制中的提示
|
|
@@ -917,9 +937,9 @@ export default {
|
|
|
if (isIOS) {
|
|
|
console.log('iOS: 检查相机状态');
|
|
|
|
|
|
- // 使用最简单的选项
|
|
|
+ // 使用最简单的选项,设置最大录制时间为5分钟
|
|
|
const options = {
|
|
|
- timeout: 30000, // 减少超时时间
|
|
|
+ timeout: 300000, // 300秒超时 (5分钟)
|
|
|
quality: 'low', // 降低质量
|
|
|
compressed: true,
|
|
|
success: () => {
|
|
@@ -941,9 +961,9 @@ export default {
|
|
|
this.useAlternativeRecordingMethod();
|
|
|
}
|
|
|
} else {
|
|
|
- // Android使用标准选项
|
|
|
+ // Android使用标准选项,设置最大录制时间为5分钟
|
|
|
const options = {
|
|
|
- timeout: 60000,
|
|
|
+ timeout: 300000, // 300秒超时 (5分钟)
|
|
|
quality: 'medium',
|
|
|
compressed: true,
|
|
|
success: () => {
|
|
@@ -977,7 +997,7 @@ export default {
|
|
|
// 选择相册中的视频
|
|
|
uni.chooseVideo({
|
|
|
sourceType: ['album'],
|
|
|
- maxDuration: 60,
|
|
|
+ maxDuration: 300, // 从60秒改为300秒
|
|
|
camera: 'front',
|
|
|
success: (res) => {
|
|
|
console.log('选择视频成功:', res.tempFilePath);
|
|
@@ -1225,6 +1245,16 @@ export default {
|
|
|
try {
|
|
|
this.mediaRecorder.start(1000); // 每秒触发一次dataavailable事件
|
|
|
console.log('MediaRecorder开始录制');
|
|
|
+
|
|
|
+ // 设置最大录制时间为60秒
|
|
|
+ // 注意:我们已经在startRecordingAnswer方法中设置了全局计时器
|
|
|
+ // 这里作为备份机制,确保即使全局计时器失效,也能停止录制
|
|
|
+ this.mediaRecorderTimeout = setTimeout(() => {
|
|
|
+ if (this.mediaRecorder && this.mediaRecorder.state === 'recording') {
|
|
|
+ console.log('MediaRecorder备份超时机制触发,停止录制');
|
|
|
+ this.mediaRecorder.stop();
|
|
|
+ }
|
|
|
+ }, 300000); // 300秒 (5分钟)
|
|
|
} catch (e) {
|
|
|
console.error('开始录制失败:', e);
|
|
|
}
|
|
@@ -1343,10 +1373,16 @@ export default {
|
|
|
|
|
|
// 清除定时器
|
|
|
if (this.recordingTimer) {
|
|
|
- clearTimeout(this.recordingTimer);
|
|
|
+ clearInterval(this.recordingTimer);
|
|
|
this.recordingTimer = null;
|
|
|
}
|
|
|
|
|
|
+ // 清除MediaRecorder超时定时器
|
|
|
+ if (this.mediaRecorderTimeout) {
|
|
|
+ clearTimeout(this.mediaRecorderTimeout);
|
|
|
+ this.mediaRecorderTimeout = null;
|
|
|
+ }
|
|
|
+
|
|
|
// 隐藏录制中提示
|
|
|
uni.hideLoading();
|
|
|
|
|
@@ -2752,6 +2788,8 @@ video::-webkit-media-controls-fullscreen-button {
|
|
|
padding: 5px 10px;
|
|
|
border-radius: 15px;
|
|
|
z-index: 20;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.timer-text {
|
|
@@ -2760,6 +2798,17 @@ video::-webkit-media-controls-fullscreen-button {
|
|
|
font-family: monospace; /* 使用等宽字体,使时间显示更稳定 */
|
|
|
}
|
|
|
|
|
|
+.remaining-time {
|
|
|
+ color: white;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-top: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.remaining-time.warning {
|
|
|
+ color: #ff6b6b; /* 剩余时间少时显示红色 */
|
|
|
+ animation: blink 1s infinite; /* 使用闪烁动画提醒用户 */
|
|
|
+}
|
|
|
+
|
|
|
/* 添加上传状态指示器 */
|
|
|
.upload-status-indicator {
|
|
|
position: absolute;
|