uni-app iOS下调用摄像头时调整屏幕为横向显示画面逆转90度

开发环境	版本号	项目创建方式
Mac	macOS Ventura 13.5	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：3.99

手机系统：iOS

手机系统版本号：iOS 17

手机厂商：苹果

手机机型：iPad Air

页面类型：nvue

vue版本：vue2

打包方式：离线

项目创建方式：HBuilderX

示例代码：

export default {
data() {
return {
src: ''
}
},
onLoad(options) {
// #ifdef APP-PLUS
// 强制横屏
plus.screen.lockOrientation('landscape')
// 保持屏幕常亮
uni.setKeepScreenOn({
keepScreenOn: true
});
// 保持全屏，无状态栏
plus.navigator.setFullscreen(true)
// 隐藏手机底部导航按键
plus.navigator.hideSystemNavigation()
// #endif
},
onReady() {
// 注意：需要在onReady中 或 onLoad 延时
this.context = uni.createLivePusherContext("livePusher", this);
this.startPreview()
},
onUnload() {
// #ifdef APP-PLUS
// 恢复竖屏
plus.screen.lockOrientation('portrait-primary');
// 关闭保持屏幕常亮
uni.setKeepScreenOn({
keepScreenOn: false
})
// 恢复状态栏
plus.navigator.setFullscreen(false)
// 显示手机底部导航按键
plus.navigator.showSystemNavigation()
// #endif
},
methods: {
startPreview: function() {
this.context.startPreview({
success: (a) => {
console.log("livePusher.startPreview:" + JSON.stringify(a));
}
});
console.log('123' + plus.navigator.isFullscreen())
},
getCamera() {
var cmr = plus.camera.getCamera(1);
console.log('cmr' + JSON.stringify(cmr))
// plus.navigator.setFullscreen(true);
// console.log('123' + plus.navigator.isFullscreen())
setTimeout(() => {
const cameraView = this.$refs.cameraView;  

// 将摄像头画面渲染到页面上的 view 元素中  
cameraView.$el.appendChild(cmr.stream, 'pop-in');  

}, 1000)  

},
}
}

操作步骤：

将页面设置为横屏，同时通过live-pusher等方式调用摄像头显示摄像头画面，通过标准基座将项目运行到ios设备上。

预期结果：

显示内容和屏幕同时旋转90度

实际结果：

屏幕翻转后摄像头显示内容翻转了180度，且显示内容仅包括了同情况下相机显示内容中左上角的一部分。

bug描述：

在ios下调用摄像头时，将屏幕设置为横向，手机画面会比应当显示的画面多旋转了90度，与屏幕方向不一致。

bupafengyu 1楼•7 天前

在使用 uni-app 开发 iOS 应用时，如果调用摄像头并希望将屏幕调整为横向显示，但发现画面逆转了 90 度，可能是由于设备的默认方向设置或摄像头的方向处理不当导致的。以下是一些可能的解决方案：

1. 强制屏幕方向

首先，你可以尝试强制屏幕方向为横向。在 pages.json 中配置页面的屏幕方向：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "pageOrientation": "landscape" // 强制横向
      }
    }
  ]
}

2. 处理摄像头方向

在 iOS 设备上，摄像头的数据流可能默认是竖屏的，因此当你强制横屏时，画面可能会逆转。你需要在代码中手动调整摄像头的方向。

在 uni.createCameraContext() 中，你可以通过 orientation 参数来指定摄像头的方向。例如：

const cameraContext = uni.createCameraContext();

cameraContext.start({
  success: function (res) {
    console.log('摄像头启动成功');
  },
  fail: function (err) {
    console.log('摄像头启动失败', err);
  }
});

// 设置摄像头方向为横向
cameraContext.setOrientation({
  orientation: 'landscape'
});

3. 使用 `uni.rotate` 调整画面

如果上述方法仍然无法解决问题，你可以尝试使用 uni.rotate 来手动调整画面方向。例如：

const cameraContext = uni.createCameraContext();

cameraContext.start({
  success: function (res) {
    console.log('摄像头启动成功');
  },
  fail: function (err) {
    console.log('摄像头启动失败', err);
  }
});

// 手动旋转画面
uni.rotate({
  angle: 90, // 旋转90度
  success: function (res) {
    console.log('画面旋转成功');
  },
  fail: function (err) {
    console.log('画面旋转失败', err);
  }
});

4. 使用 CSS 调整画面方向

你也可以尝试使用 CSS 来调整画面方向。例如：

<view class="camera-container">
  <camera style="transform: rotate(90deg);"></camera>
</view>

.camera-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

5. 检查设备方向

确保设备的自动旋转功能是开启的，并且设备本身支持横向模式。你可以在 manifest.json 中配置应用支持的方向：

{
  "app-plus": {
    "screenOrientation": [
      "portrait-primary",
      "landscape-primary",
      "landscape-secondary"
    ]
  }
}

uni-app iOS下调用摄像头时调整屏幕为横向 显示画面逆转90度