uniapp 微信小程序如何获取选择或拍摄视频的第一帧

在uniapp开发微信小程序时，如何获取用户从相册选择或拍摄的视频的第一帧画面？需要用到哪些API或方法？能否提供具体的实现代码示例？

2 回复

使用 uni.chooseVideo 选择或拍摄视频，通过 success 回调获取临时路径，再使用 uni.createVideoContext 创建视频上下文，调用 seek 方法定位到第0秒，通过 canvas 绘制第一帧并导出为图片。


在 UniApp 中获取选择或拍摄视频的第一帧，可以通过以下步骤实现：

  1. 选择或拍摄视频：使用 uni.chooseVideo API 选择本地视频或拍摄新视频。
  2. 获取视频第一帧：通过创建 <video> 组件并绘制到 Canvas 上，截取第一帧图像。

示例代码

<template>
  <view>
    <button @click="chooseVideo">选择视频</button>
    <canvas canvas-id="videoCanvas" style="width: 300px; height: 200px;"></canvas>
    <image :src="firstFrame" mode="widthFix"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      firstFrame: ''
    };
  },
  methods: {
    chooseVideo() {
      uni.chooseVideo({
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.getVideoFirstFrame(res.tempFilePath);
        }
      });
    },
    getVideoFirstFrame(videoPath) {
      // 创建视频上下文
      const videoContext = uni.createVideoContext('videoPlayer');
      
      // 使用临时路径创建 video 组件（隐藏）
      this.videoPath = videoPath;
      
      // 等待视频元数据加载
      setTimeout(() => {
        const query = uni.createSelectorQuery();
        query.select('#videoPlayer').boundingClientRect();
        query.exec((rects) => {
          const video = rects[0];
          if (video) {
            const ctx = uni.createCanvasContext('videoCanvas');
            
            // 绘制视频第一帧到 Canvas
            ctx.drawImage(videoPath, 0, 0, 300, 200);
            ctx.draw(false, () => {
              // 从 Canvas 导出临时图片路径
              uni.canvasToTempFilePath({
                canvasId: 'videoCanvas',
                success: (res) => {
                  this.firstFrame = res.tempFilePath;
                },
                fail: (err) => {
                  console.error('Canvas 导出失败:', err);
                }
              });
            });
          }
        });
      }, 500); // 延迟确保视频加载
    }
  }
};
</script>

<!-- 隐藏的 video 组件用于加载视频 -->
<video 
  id="videoPlayer" 
  :src="videoPath" 
  style="position: absolute; top: -9999px;"
  autoplay 
  muted
></video>

注意事项：

  • 视频路径：确保使用 res.tempFilePath 作为视频路径。
  • Canvas 尺寸：调整 Canvas 的宽高以匹配视频比例。
  • 延迟处理：视频加载需要时间，使用 setTimeout 确保元数据就绪。
  • 权限：微信小程序需在 app.json 中声明 scope.camera 和 scope.writePhotosAlbum（如需保存）。

替代方案（插件）：

如需更稳定实现，可考虑使用第三方插件（如 uni-media 库）或后端处理。

以上方法适用于微信小程序平台，其他平台（如 H5）可能需要调整实现方式。

回到顶部