react-native-camera 中调整图片和视频的角度
前言
Android开发过程中,需要拍摄图片和视频,但是视频的拍摄角度不满足要求,需要调整;
要点
开发过程中调用react-native-camera,图片角度调整时,通过调整js层中对orientation的参数即可;视频角度调整时,需要调整预览窗口,预览角度正常,获取的视频角度也正常。
开发说明
图片角度调整
js层中调用orientation参数,即可进行旋转角度选择
that.camera.capture({
quality: that.cameraParams.quality,
//#auto:0,portrait:0,portraitUpsideDown:180,landscapeLeft:270,landscapeRight:90
orientation: Camera.constants.Orientation.landscapeLeft,
})
视频角度调整(重点)
根据react-native-camera的程序,录像功能与预览显示一致,所以只要预览显示的是想要的角度,视频角度就正常。目标定为调整预览角度。
js层中预览显示部分,其中aspect采用Camera.constants.Aspect.fit,可在定义窗口中显示完整预览
<Camera
ref={ref => {
this.camera = ref;
}}
style={styles.preview}
aspect={Camera.constants.Aspect.fit}
captureTarget={this.state.camera.captureTarget}
type={this.state.camera.type}
flashMode={this.state.camera.flashMode}
orientation={Camera.constants.Orientation.portraitUpsideDown}
onFocusChanged={() => {}}
onZoomChanged={() => {}}
defaultTouchToFocus
mirrorImage={false}
/>
以上各项均有含义:
java层react-native-camera中调整预览的显示
关于摄像头的方向
相机的图像数据都是来自于硬件的图像传感器,摄像头的方向取决于图像传感器的安装方向。安装之后,有一个默认的取景方向,且不会被改变。
官方提供CameraInfo.orientation表示相机图像的方向。它的值是相机图像顺时针旋转到设备自然方向一致时的角度。例如假设设备是竖屏的。后置相机传感器是横屏安装的。当你面向屏幕时,如果后置相机传感器顶边的和设备自然方向的右边是平行的,则后置相机的orientation是90。如果前置相机传感器顶边和设备自然方向的右边是平行的,则前置相机的orientation是270
public void adjustPreviewLayout(int type) {
//...以上省略部分代码
CameraInfoWrapper cameraInfo = _cameraInfos.get(type);
int displayRotation;
int rotation;
int orientation = cameraInfo.info.orientation; //orientation :90
//int orientation = 270; //测试使用
//_actualDeviceOrientation = 3; //测试使用
if (cameraInfo.info.facing == Camera.CameraInfo.CAMERA_FACING_FRONT) {
rotation = (orientation + _actualDeviceOrientation * 90) % 360;
displayRotation = (720 - orientation - _actualDeviceOrientation * 90) % 360;
} else {
rotation = (orientation - _actualDeviceOrientation * 90 + 360) % 360;
displayRotation = rotation;
}
cameraInfo.rotation = rotation;
// TODO: take in account the _orientation prop
setAdjustedDeviceOrientation(rotation);
camera.setDisplayOrientation(displayRotation);
//...以下省略部分代码
}
以上代码中:想要调整预览方向,可对orientation 或者 _actualDeviceOrientation 进行调整,该部分代码请查阅 react-native-camera中RCTCamera.java 源码