Browse Source

当前限制最长录制时间

yangg 2 months ago
parent
commit
98d7605c79

+ 57 - 8
pages/identity-verify/identity-verify.vue

@@ -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;

+ 35 - 6
unpackage/dist/dev/mp-weixin/pages/identity-verify/identity-verify.js

@@ -124,8 +124,14 @@ const _sfc_main = {
       // 存储每个视频的上传状态
       showUploadStatus: false,
       // 是否显示上传状态指示器
-      uploadStatusText: ""
+      uploadStatusText: "",
       // 上传状态文本
+      mediaRecorderTimeout: null,
+      // 用于存储MediaRecorder的超时机制
+      maxRecordingTime: 300,
+      // 最大录制时间(秒)- 从60秒改为300秒(5分钟)
+      remainingTime: 300
+      // 剩余录制时间(秒)- 从60秒改为300秒
     };
   },
   mounted() {
@@ -555,8 +561,15 @@ const _sfc_main = {
       this.isRecording = true;
       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);
+        this.recordingTimeDisplay = this.formatTime(this.recordingTimerCount) + " / " + this.formatTime(this.maxRecordingTime);
+        if (this.recordingTimerCount >= this.maxRecordingTime) {
+          console.log("已达到最大录制时间(60秒),自动停止录制");
+          this.stopRecordingAnswer();
+        }
       }, 1e3);
       const systemInfo = common_vendor.index.getSystemInfoSync();
       const isMiniProgram = systemInfo.uniPlatform && systemInfo.uniPlatform.startsWith("mp-");
@@ -614,8 +627,8 @@ const _sfc_main = {
           if (isIOS) {
             console.log("iOS: 检查相机状态");
             const options = {
-              timeout: 3e4,
-              // 减少超时时间
+              timeout: 3e5,
+              // 300秒超时 (5分钟)
               quality: "low",
               // 降低质量
               compressed: true,
@@ -636,7 +649,8 @@ const _sfc_main = {
             }
           } else {
             const options = {
-              timeout: 6e4,
+              timeout: 3e5,
+              // 300秒超时 (5分钟)
               quality: "medium",
               compressed: true,
               success: () => {
@@ -665,7 +679,8 @@ const _sfc_main = {
           if (res.tapIndex === 0) {
             common_vendor.index.chooseVideo({
               sourceType: ["album"],
-              maxDuration: 60,
+              maxDuration: 300,
+              // 从60秒改为300秒
               camera: "front",
               success: (res2) => {
                 console.log("选择视频成功:", res2.tempFilePath);
@@ -854,6 +869,12 @@ const _sfc_main = {
       try {
         this.mediaRecorder.start(1e3);
         console.log("MediaRecorder开始录制");
+        this.mediaRecorderTimeout = setTimeout(() => {
+          if (this.mediaRecorder && this.mediaRecorder.state === "recording") {
+            console.log("MediaRecorder备份超时机制触发,停止录制");
+            this.mediaRecorder.stop();
+          }
+        }, 3e5);
       } catch (e) {
         console.error("开始录制失败:", e);
       }
@@ -934,9 +955,13 @@ const _sfc_main = {
     completeRecordingStop() {
       this.isRecording = false;
       if (this.recordingTimer) {
-        clearTimeout(this.recordingTimer);
+        clearInterval(this.recordingTimer);
         this.recordingTimer = null;
       }
+      if (this.mediaRecorderTimeout) {
+        clearTimeout(this.mediaRecorderTimeout);
+        this.mediaRecorderTimeout = null;
+      }
       common_vendor.index.hideLoading();
       this.showStopRecordingButton = false;
       const systemInfo = common_vendor.index.getSystemInfoSync();
@@ -1785,6 +1810,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   }, $data.showUploadStatus && $data.uploadStatusText ? {
     A: $data.isUploading ? 1 : "",
     B: common_vendor.t($data.uploadStatusText)
+  } : {}, {
+    C: $data.isRecording
+  }, $data.isRecording ? {
+    D: common_vendor.t($data.recordingTimeDisplay || "00:00 / 05:00")
   } : {});
 }
 const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-464e78c6"]]);

File diff suppressed because it is too large
+ 0 - 0
unpackage/dist/dev/mp-weixin/pages/identity-verify/identity-verify.wxml


+ 11 - 0
unpackage/dist/dev/mp-weixin/pages/identity-verify/identity-verify.wxss

@@ -299,12 +299,23 @@ video.data-v-464e78c6::-webkit-media-controls-fullscreen-button {
   padding: 5px 10px;
   border-radius: 15px;
   z-index: 20;
+  display: flex;
+  flex-direction: column;
 }
 .timer-text.data-v-464e78c6 {
   color: white;
   font-size: 14px;
   font-family: monospace; /* 使用等宽字体,使时间显示更稳定 */
 }
+.remaining-time.data-v-464e78c6 {
+  color: white;
+  font-size: 12px;
+  margin-top: 2px;
+}
+.remaining-time.warning.data-v-464e78c6 {
+  color: #ff6b6b; /* 剩余时间少时显示红色 */
+  animation: blink-464e78c6 1s infinite; /* 使用闪烁动画提醒用户 */
+}
 
 /* 添加上传状态指示器 */
 .upload-status-indicator.data-v-464e78c6 {

Some files were not shown because too many files changed in this diff