uniapp uni.choosevideo相机拍摄视频横屏拍摄竖屏显示如何解决

在使用uniapp的uni.chooseVideo调用相机拍摄视频时，发现横屏拍摄的视频在页面上显示时变成了竖屏，导致画面被压缩变形。尝试设置拍摄参数和页面样式都无法解决，如何让拍摄的视频正常横屏显示？需要调整哪些配置或代码？

2 回复

在uni.chooseVideo中，设置camera参数为'back'或'front'，并添加compressed: false避免压缩导致方向错误。同时，可在拍摄后使用uni.compressVideo处理视频方向。


在UniApp中使用uni.chooseVideo拍摄视频时，如果遇到横屏拍摄但显示为竖屏的问题，通常是由于设备默认横屏拍摄，但视频元数据中缺少正确的旋转信息，导致播放器无法正确识别方向。以下是解决方案：

1. 使用uni.chooseVideo的camera参数

在调用时指定使用后置摄像头，并尝试设置参数以控制方向（但注意API本身对方向支持有限）：

uni.chooseVideo({
  sourceType: ['camera'],
  camera: 'back', // 使用后置摄像头，可能有助于横屏
  success: (res) => {
    console.log('视频路径:', res.tempFilePath);
    // 处理视频，可能需要额外旋转
  }
});

2. 拍摄后手动处理视频方向

如果拍摄的视频方向不正确，可以使用FFmpeg等工具在后端或前端进行旋转（但UniApp内置支持有限，通常需结合云函数或第三方服务）：

  • 前端处理：使用如ffmpeg.wasm（但体积大，性能要求高，不推荐移动端直接使用）。
  • 后端处理：上传视频到服务器后，用FFmpeg命令旋转视频，例如：
    ffmpeg -i input.mp4 -vf "transpose=1" output.mp4  # 顺时针旋转90度

3. 使用原生插件或自定义相机

如果问题持续，考虑使用原生插件（如HBuilderX中的原生插件市场）或自定义相机组件，以更好地控制拍摄方向：

  • 在UniApp中，可通过原生开发封装模块，确保横屏拍摄时视频元数据正确。

4. 播放时强制横屏

在播放视频时，通过CSS或播放器属性强制横屏显示：

<video :src="videoPath" controls style="transform: rotate(90deg); width: 100vh; height: 100vw;"></video>

但注意：这仅影响显示，不改变视频本身方向。

5. 检查设备设置

确保设备未锁定竖屏方向：在系统设置中关闭“竖屏锁定”，并在拍摄时保持设备横屏。

总结

最实用方案是结合uni.chooseVideo参数调整，并在必要时通过后端处理视频方向。如果对方向要求严格，建议使用原生开发或插件。测试时请覆盖多设备，因为不同Android/iOS版本行为可能不同。

回到顶部