uniapp app 视频上传后旋转了90度如何解决？

在使用uniapp开发app时，上传视频后出现视频旋转90度的问题，该如何解决？视频在本地预览时方向正常，但上传到服务器后播放就出现了旋转。尝试过调整拍摄方向和使用exif信息，但问题依然存在。请问有没有遇到过类似情况的开发者，是如何解决的？需要修改上传代码还是服务器端处理？

2 回复

使用uni.chooseVideo选择视频时，设置compressed: false避免压缩导致旋转。上传前用plus.io.resolveLocalFileSystemURL获取文件信息，通过exif获取旋转角度，再用canvas重绘修正。


在UniApp中，视频上传后旋转90度通常是由于视频元数据中的**旋转信息（如orientation标签）**未被正确处理导致的。以下是解决方案：

1. 使用uni.chooseVideo时设置corrected参数

在调用视频选择API时，启用corrected参数可自动校正方向：

uni.chooseVideo({
  sourceType: ['camera', 'album'],
  corrected: true,  // 关键：启用系统自动校正
  success: (res) => {
    console.log('视频临时路径:', res.tempFilePath)
    // 后续上传逻辑
  }
})

2. 服务端处理旋转信息

如果前端校正无效，需在服务端解析视频元数据并旋转：

  • FFmpeg命令示例（常用服务端工具）：
    ffmpeg -i input.mp4 -vf "transpose=1" -c:a copy output.mp4
    参数说明：transpose=1 表示逆时针旋转90度（根据实际方向调整值：1=90°逆时针，2=90°顺时针）。

3. 前端手动校正（不推荐）

可通过Canvas逐帧绘制并旋转，但性能较差，仅适用于短视频：

// 需配合uni.createVideoContext和Canvas实现，代码较复杂

4. 检查设备兼容性

  • 部分Android机型可能存在兼容性问题，确保使用最新版UniApp SDK。
  • 测试不同设备（iOS/Android）的录制效果。

总结建议：

  1. 优先方案：组合使用corrected:true + 服务端FFmpeg处理。
  2. 上传前在UniApp中预览视频，确认方向是否正确。
  3. 若问题持续，在UniApp社区提交详细设备信息（型号、系统版本）反馈。

通过元数据校正可避免重编码对画质的损耗，是最优解决方案。

回到顶部