uni-app 录制固定时长的视频

在 uni-app 中实现录制固定时长的视频功能，你可以结合 uni.createCameraContext() 和 MediaRecorder API 来完成。以下是一个简单的代码示例，展示了如何录制一个固定时长（例如5秒）的视频。

首先，你需要在页面的 <template> 中添加一个 <camera> 组件，用于视频录制：

<template>
  <view class="container">
    <camera device-position="back" flash="off" id="myCamera"></camera>
    <button @click="startRecording">开始录制</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录制</button>
    <video :src="videoSrc" controls v-if="videoSrc"></video>
  </view>
</template>

接下来，在 <script> 部分实现录制逻辑：

<script>
export default {
  data() {
    return {
      context: null,
      recorder: null,
      isRecording: false,
      videoSrc: '',
      recordingStartTime: 0,
      fixedDuration: 5000, // 固定时长5秒
    };
  },
  methods: {
    startRecording() {
      this.context = uni.createCameraContext();
      this.context.startRecord({
        success: (res) => {
          this.recorder = res.recorder;
          this.recordingStartTime = Date.now();
          this.isRecording = true;
          // 使用setTimeout来模拟固定时长录制
          setTimeout(() => {
            this.stopRecording();
          }, this.fixedDuration);
        },
        fail: (err) => {
          console.error('录制失败', err);
        },
      });
    },
    stopRecording() {
      if (this.recorder) {
        this.recorder.stop({
          success: (res) => {
            this.videoSrc = res.tempVideoPath;
            this.isRecording = false;
          },
          fail: (err) => {
            console.error('停止录制失败', err);
          },
        });
      }
    },
  },
};
</script>

在 <style> 部分，你可以根据需要调整布局：

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
button {
  margin: 10px;
}
video {
  width: 300px;
  height: auto;
}
</style>

这个示例中，当用户点击“开始录制”按钮时，会启动视频录制，并且使用 setTimeout 在5秒后自动停止录制。录制的视频将显示在页面的 <video> 元素中。

请注意，uni-app 的 createCameraContext API 可能在不同平台上有所差异，确保在实际项目中根据平台文档进行相应调整。此外，由于权限管理等因素，确保在 manifest.json 中已正确配置相关权限。