Ionic Angular相机预览插件：如何让AVCaptureDeviceTypeBuiltInTripleCamera保持竖屏

问题核心：切换到AVCaptureDeviceTypeBuiltInTripleCamera后，相机预览画面固定横屏，需强制保持竖屏显示，不受设备物理朝向影响。

原因分析 #

切换三摄输入后，AVCaptureSession的视频连接未设置固定竖屏方向，导致预览画面默认跟随相机传感器的原生横屏方向输出。

具体修改方案 #

1. 为AVCaptureSession设置固定竖屏方向 #

修改configureUltraWideCamera方法，在切换相机输入后，强制设置所有视频输出连接的方向为竖屏：

- (void)configureUltraWideCamera {
    NSError *error = nil;

    // Find an AVCaptureDevice of type ultra-wide camera
    AVCaptureDevice *ultraWideCamera = [AVCaptureDevice defaultDeviceWithDeviceType:AVCaptureDeviceTypeBuiltInTripleCamera
                                                                          mediaType:AVMediaTypeVideo
                                                                           position:AVCaptureDevicePositionBack];

    if (ultraWideCamera) {
        AVCaptureDeviceInput *input = [AVCaptureDeviceInput deviceInputWithDevice:ultraWideCamera error:&error];

        if (!error && input) {
            [self.session beginConfiguration]; // Begin session reconfiguration
            [self.session removeInput:self.videoDeviceInput]; // Remove current input
            if ([self.session canAddInput:input]) {
                [self.session addInput:input]; // Add ultra-wide input
                self.videoDeviceInput = input; // Update the input property            

                // 强制所有视频输出连接使用竖屏方向
                for (AVCaptureConnection *connection in self.session.outputs) {
                    if ([connection isVideoOrientationSupported]) {
                        [connection setVideoOrientation:AVCaptureVideoOrientationPortrait];
                    }
                }

                // Commit the session configuration
                [self.session commitConfiguration];
                [self.session startRunning];

                NSLog(@"Switched to Ultra-Wide Camera and locked orientation to portrait");
            } else {
                [self.session commitConfiguration];
                NSLog(@"Cannot add ultra-wide camera input to the session");
            }
        } else {
            NSLog(@"Error creating input for ultra-wide camera: %@", error.localizedDescription);
        }
    } else {
        NSLog(@"Ultra-Wide Camera is not supported on this device");
    }
}

2. 调整预览层变换（若上述修改未生效） #

在CameraRenderController中，为AVCaptureVideoPreviewLayer设置适配竖屏的变换矩阵：

// 在CameraRenderController的初始化或session启动完成后添加
- (void)setupPreviewLayerOrientation {
    if (self.previewLayer && self.previewLayer.connection) {
        // 强制预览层连接使用竖屏
        self.previewLayer.connection.videoOrientation = AVCaptureVideoOrientationPortrait;
        // 手动设置变换适配容器
        self.previewLayer.transform = [self portraitTransform];
    }
}

// 生成竖屏对应的变换矩阵
- (CGAffineTransform)portraitTransform {
    return CGAffineTransformMakeRotation(0);
}

3. 锁定插件视图控制器的旋转方向 #

在插件类或CameraRenderController中添加以下方法，防止视图跟随设备旋转：

- (UIInterfaceOrientationMask)supportedInterfaceOrientations {
    return UIInterfaceOrientationMaskPortrait;
}

- (BOOL)shouldAutorotate {
    return NO;
}

修改作用说明 #

• 强制AVCaptureConnection使用竖屏输出，从视频源层面固定方向
• 调整预览层变换，确保画面与竖屏容器尺寸匹配
• 锁定视图控制器旋转，彻底阻止插件区域的方向变化

内容的提问来源于stack exchange，提问作者Hasan Ali