android camera 攝像頭預覽畫面變形

問題：最近在處理一下camera的問題，發現在豎屏時預覽圖像會變形，而橫屏時正常。但有的手機則是橫豎屏都會變形。

結果：解決了預覽變形的問題，同時支持前后攝像頭，預覽無變形，拍照生成的jpg照片方向正確。

環境 ： android studio, xiaomi m1s android4.2 miui v5

過程：

 

1、預覽 preview畫面變形

以sdk中apidemos里的camera為例，進行修改。先重現下問題，在AndroidManifest.xml中指定了activity 的screenOrientation為landspace，則預覽正常。若指定為portrait，則圖像會有拉伸變形。

 

找到正確的previewsize

繼續看demo代碼，mCamera.getParameters().getSupportedPreviewSizes() 可以返回當前設備支持的一組previewSize，例如：

1920x1088 1280x720 800x480 768x432 720x480 640x480 576x432 480x320 
384x288 352x288 320x240 240x160 176x144

而我們根據我們在界面上需要顯示的預覽大小，來設置camera的預覽大小，即在這一組size中選擇一個previewsize，找到高寬比和大小最接近的一個size。通過調用 getOptimalPreviewSize(List sizes, int w, int h) 來進行選擇。注意這里的后兩個參數，因為攝像頭的預覽size是固定的，就那么一組，其高寬比是固定的，且方向也是固定的。 
對於攝像頭來說，都是width是長邊，即width > height。 所以camera的ratio計算值總是大於1的。所以當手機在橫屏的時候，我們的w>h，調用該方法進行選擇是沒問題的。但是當豎屏后，w < h了，若還是直接調用該方法，則targetRatio 會小於1，按這個targetRatio去找就找不到合適的size了，那么比例不對預覽自然就變形了。所以得在調用的地方進行調整，保證參數w > h。

 

1. private Size getOptimalPreviewSize(List<Size> sizes, int w, int h) {
2. final double ASPECT_TOLERANCE = 0.1;
3. double targetRatio = (double) w / h;
4. if (sizes == null) return null;
6. Size optimalSize = null;
7. double minDiff = Double.MAX_VALUE;
9. int targetHeight = h;
11. // Try to find an size match aspect ratio and size
12. for (Size size : sizes) {
13. double ratio = (double) size.width / size.height;
14. if (Math.abs(ratio - targetRatio) > ASPECT_TOLERANCE) continue;
15. if (Math.abs(size.height - targetHeight) < minDiff) {
16. optimalSize = size;
17. minDiff = Math.abs(size.height - targetHeight);
18. }
19. }
21. // Cannot find the one match the aspect ratio, ignore the requirement
22. if (optimalSize == null) {
23. minDiff = Double.MAX_VALUE;
24. for (Size size : sizes) {
25. if (Math.abs(size.height - targetHeight) < minDiff) {
26. optimalSize = size;
27. minDiff = Math.abs(size.height - targetHeight);
28. }
29. }
30. }
31. return optimalSize;
32. }
34. @Override
35. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
36. // We purposely disregard child measurements because act as a
37. // wrapper to a SurfaceView that centers the camera preview instead
38. // of stretching it.
39. final int width = resolveSize(getSuggestedMinimumWidth(), widthMeasureSpec);
40. final int height = resolveSize(getSuggestedMinimumHeight(), heightMeasureSpec);
41. setMeasuredDimension(width, height);
43. if (mSupportedPreviewSizes != null) {
44. mPreviewSize = getOptimalPreviewSize(mSupportedPreviewSizes, Math.max(width, height), Math.min(width, height));
46. }
47. ......

 

選擇和previewsize一致的比例來布局surfaceview

當我們選擇了合適的previewsize后，還有一個因素會影響到預覽畫面是否正常。即surfaceview的布局。從demo代碼可以知道要想在界面上顯示camera預覽畫面，需要添加一個surfaceview，而我們添加了surfaceview后，就需要對其進行布局，設置其大小，位置。

經過搜索查資料，here這里有人回答了原因。

“The reason is: SurfaceView aspect ratio (width/height) MUST be same as Camera.Size aspect ratio used in preview parameters. And if aspect 
ratio is not the same, you've got stretched image.”

看到這句話，理解了變形是因為比例錯誤。surfaceview和cameraSize的比例應該要一致。

在onlayout中，我們對surfaceview進行了layout，根據指定的surfaceview的高寬來布局。demo中會將surfacevidew居中，看代碼是根據寬高比和previewsize的寬高比來對比，選擇水平居中或垂直居中。前面已經說過，previewsize的width大於height，所以凡是涉及到寬高比計算的地方，兩個size我們都需要保持同樣的順序，都是w>h，或w

 

1. protected void onLayout(boolean changed, int l, int t, int r, int b) {
2. int curOrientation =
3. getContext().getResources().getConfiguration().orientation;
5. if (changed && getChildCount() > 0 || mLastOrientation != curOrientation) {
6. mLastOrientation = curOrientation;
7. final View child = getChildAt(0);
9. final int width = r - l;
10. final int height = b - t;
12. int previewWidth = width;
13. int previewHeight = height;
14. if (mPreviewSize != null) {
15. previewWidth = mPreviewSize.width;
16. previewHeight = mPreviewSize.height;
18. if (curOrientation == Configuration.ORIENTATION_PORTRAIT) {
19. previewWidth = mPreviewSize.height;
20. previewHeight = mPreviewSize.width;
21. }
22. }
24. // Center the child SurfaceView within the parent.
25. if (width * previewHeight > height * previewWidth) {
26. final int scaledChildWidth = previewWidth * height / previewHeight;
27. child.layout((width - scaledChildWidth) / 2, 0,
28. (width + scaledChildWidth) / 2, height);
29. } else {
30. final int scaledChildHeight = previewHeight * width / previewWidth;
31. child.layout(0, (height - scaledChildHeight) / 2,
32. width, (height + scaledChildHeight) / 2);
33. }
34. }
35. }

至此，經過測試，設備顯示正常，橫屏豎屏均再無拉伸現象了。

總結下，demo工程在橫屏下正常，而在豎屏下出現預覽畫面變形的原因主要是，onMeasure時選擇previewsize和onlayout時布局surfaceview，都是基於橫屏考慮的，所以w均大於h。 
當activity改為豎屏運行時，就需要調整這兩個地方，保證比例一致，才能計算正確，從而顯示正常畫面。

 

2、方向問題

剛剛講了變形的問題，我們應該發現當手機豎屏后，預覽畫面的方向沒有隨之改變過來，於是看上去就顛倒了。所以我們還需要處理一下方向的問題。

注意這里的“方向”包括：前置、后置攝像頭畫面預覽方向，前置后置攝像頭拍照后的圖片方向。

 

預覽方向：

通過查詢android文檔，可以發現如下資料：

For example, suppose the natural orientation of the device is 
portrait. The device is rotated 270 degrees clockwise, so the device 
orientation is 270. Suppose a back-facing camera sensor is mounted in 
landscape and the top side of the camera sensor is aligned with the 
right edge of the display in natural orientation. So the camera 
orientation is 90. The rotation should be set to 0 (270 + 90).

（后置攝像頭） 
可以得知，camera是在設置上是固定方向的， camera的頂部是和屏幕自然顯示時的右邊對齊的。說明camera默認就是橫屏方向的。為了在豎屏的時候進行preview預覽，我們需要調整camera的方向。

setDisplayOrientation 可以修改camera的預覽方向。

If you want to make the camera image show in the same orientation as 
the display, you can use the following code.

 

1. public static void setCameraDisplayOrientation(Activity activity,
2. int cameraId, android.hardware.Camera camera) {
3. android.hardware.Camera.CameraInfo info =
4. new android.hardware.Camera.CameraInfo();
5. android.hardware.Camera.getCameraInfo(cameraId, info);
6. int rotation = activity.getWindowManager().getDefaultDisplay()
7. .getRotation();
8. int degrees = 0;
9. switch (rotation) {
10. case Surface.ROTATION_0: degrees = 0; break;
11. case Surface.ROTATION_90: degrees = 90; break;
12. case Surface.ROTATION_180: degrees = 180; break;
13. case Surface.ROTATION_270: degrees = 270; break;
14. }
16. int result;
17. if (info.facing == Camera.CameraInfo.CAMERA_FACING_FRONT) {
18. result = (info.orientation + degrees) % 360;
19. result = (360 - result) % 360; // compensate the mirror
20. } else { // back-facing
21. result = (info.orientation - degrees + 360) % 360;
22. }
23. camera.setDisplayOrientation(result);
24. }

 

拍照方向：

若想修改照片的方向，還需調用 camera.setRotation，google 的文檔說的很清楚了，添加一個orientation listener既可以從傳感器獲取當前設備旋轉方向，參考如下代碼即可正確設置照片方向。但要注意一點，這個方向和activity方向（可以在android-manifest設置）無關。 無論activity此時是什么方向，只要獲取了傳感器方向均可以正確調整照片方向，與預覽方面一致。

代碼方面，由於這個回調調用比較頻繁（設備角度一變化就會調用），可以在回調里保存下rotation，然后在拍照的時候再設置camera。由於考慮了前置攝像頭，須注意傳遞正確的cameraId。

 

1. mCamera.setParameters(parameters);
2. mCamera.takePicture(shutterCallback, rawCallback,jpegCallback);

CameraInfo.orientation is the angle between camera orientation and 
natural device orientation. The sum of the two is the rotation angle 
for back-facing camera. The difference of the two is the rotation 
angle for front-facing camera. Note that the JPEG pictures of 
front-facing cameras are not mirrored as in preview display. For 
example, suppose the natural orientation of the device is portrait. 
The device is rotated 270 degrees clockwise, so the device orientation 
is 270. Suppose a back-facing camera sensor is mounted in landscape 
and the top side of the camera sensor is aligned with the right edge 
of the display in natural orientation. So the camera orientation is 
90. The rotation should be set to 0 (270 + 90).

The reference code is as follows.

 

1. public void onOrientationChanged(int orientation) {
2. if (orientation == ORIENTATION_UNKNOWN) return;
3. android.hardware.Camera.CameraInfo info =
4. new android.hardware.Camera.CameraInfo();
5. android.hardware.Camera.getCameraInfo(cameraId, info);
6. orientation = (orientation + 45) / 90 * 90;
7. int rotation = 0;
8. if (info.facing == CameraInfo.CAMERA_FACING_FRONT) {
9. rotation = (info.orientation - orientation + 360) % 360;
10. } else { // back-facing camera
11. rotation = (info.orientation + orientation) % 360;
12. }
13. mParameters.setRotation(rotation);
14. }

 

3、總結

到此為止，我們基本上是實現了一個最簡單的拍照應用，能支持前后攝像頭，預覽正確，照片方向正確。文中一些api在低版本sdk上沒有，不能直接用，還須參考資料換用其他方法。 
由於手頭設備有限，我僅僅在android4.2 小米手機上測試過，pad未測試。

 

補充

setRotation 在一些設備上無效 拍照后得到的圖像還是橫屏的，所以在save前需要再rotate一下。

 

1. private Bitmap adjustPhotoRotationToPortrait(byte[] data) {
2. BitmapFactory.Options options = new BitmapFactory.Options();
3. options.inJustDecodeBounds = true;
4. BitmapFactory.decodeByteArray(data, 0, data.length, options);
5. if (options.outHeight < options.outWidth) {
6. int w = options.outWidth;
7. int h = options.outHeight;
9. Matrix mtx = new Matrix();
10. mtx.postRotate(90);
11. // Rotating Bitmap
12. Bitmap bmp = BitmapFactory.decodeByteArray(data, 0, data.length);
13. Bitmap rotatedBMP = Bitmap.createBitmap(bmp, 0, 0, w, h, mtx, true);
14. return rotatedBMP;
15. } else {
16. return null;
17. }
18. }