uni-app 录制视频后截取第一帧做视频封面功能

针对你提到的在uni-app中实现录制视频后截取第一帧作为视频封面功能，这里提供一个使用 canvas 和 video 元素结合实现该功能的代码示例。该示例假设你已经通过uni-app的uni.chooseVideo接口录制了视频，并且获取到了视频的临时文件路径。

首先，确保你的页面有一个video元素用于播放视频，以及一个canvas元素用于绘制视频帧。

<template>
  <view>
    <video
      id="video"
      :src="videoSrc"
      @loadeddata="onVideoLoaded"
      controls
      style="display:none;"
    ></video>
    <canvas canvas-id="canvas" style="width: 320px; height: 240px;"></canvas>
    <image :src="coverImageSrc" mode="widthFix" style="width: 320px;"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: '', // 视频文件路径
      coverImageSrc: '' // 视频封面图片路径
    };
  },
  methods: {
    async recordVideo() {
      try {
        const res = await uni.chooseVideo({
          sourceType: ['album', 'camera'],
          maxDuration: 60,
          camera: 'back'
        });
        this.videoSrc = res.tempFilePath;
        this.$nextTick(() => {
          this.createCoverImage();
        });
      } catch (error) {
        console.error('录制视频失败', error);
      }
    },
    onVideoLoaded() {
      this.createCoverImage();
    },
    createCoverImage() {
      const videoContext = uni.createVideoContext('video');
      videoContext.seek(0); // 跳转到视频的第一帧
      setTimeout(() => {
        const ctx = uni.createCanvasContext('canvas');
        ctx.drawImage('/path/to/your/video', 0, 0, 320, 240); // 注意：这里应为video元素的当前帧，但uni-app不直接支持，故用setTimeout模拟
        ctx.draw(false, () => {
          uni.canvasToTempFilePath({
            canvasId: 'canvas',
            success: (res) => {
              this.coverImageSrc = res.tempFilePath;
            },
            fail: (error) => {
              console.error('生成封面失败', error);
            }
          });
        });
      }, 100); // 等待视频加载第一帧，这里使用了一个简单的延时，实际应根据video的seek完成事件来调整
    }
  }
};
</script>

注意：

1. uni.createVideoContext的drawImage方法不支持直接绘制视频帧，因此这里使用了setTimeout来模拟等待视频加载第一帧。在实际应用中，你可能需要监听视频加载或播放事件来更精确地获取第一帧。
2. 由于uni-app平台差异，某些API在不同平台上可能表现不一致，请根据实际平台进行调整和测试。
3. 上述代码中的'/path/to/your/video'应替换为实际的视频路径，但uni-app中通常直接使用video元素的src属性指定的视频即可，这里为了说明API用法而保留了该路径。