Add ability to select camera for android

Author: asennikov

README.md

@@ -63,7 +63,7 @@ Have to call [initialize][initialize] with canvas object(canvas tag to preview c
 
 ```javascript
 document.addEventListener('deviceready', function () {
-    
+
     // have to call initialize function with canvas object
     var objCanvas = document.getElementById("canvas");
     window.plugin.CanvasCamera.initialize(objCanvas);
@@ -133,7 +133,7 @@ window.plugin.CanvasCamera.setFlashMode(flashMode);
 ##### flashMode
 Value of flashMode can be one of the followings;
 ```javascript
-CanvasCamera.FlashMode = 
+CanvasCamera.FlashMode =
 {
     OFF : 0,
     ON : 1,
@@ -173,7 +173,7 @@ window.plugin.CanvasCamera.setCameraPosition(CanvasCamera.CameraPosition.FRONT);
 ### options
 Optional parameters to customize the settings.
 ```javascript
-{ quality : 75, 
+{ quality : 75,
   destinationType : CanvasCamera.DestinationType.DATA_URL,
   sourceType : CanvasCamera.PictureSourceType.CAMERA,
   allowEdit : true,
@@ -235,15 +235,15 @@ CanvasCamera.PictureSourceType = {
                 <p class="event listening">Connecting to Device</p>
                 <p class="event received">Device is Ready</p>
             </div>
-            
+
             <h2> Camera Position </h2>
             <input type="radio" name="deviceposition" id="deviceposition_back" value="Back" onclick="onChangeDevicePosition();"/>
             <label for="deviceposition_back">Back</label>
             <br/>
             <input type="radio" name="deviceposition" id="deviceposition_front" value="Front" onclick="onChangeDevicePosition();"/>
             <label for="deviceposition_front">Front</label>
-            
-            
+
+
             <h2> Flash Mode </h2>
             <input type="radio" name="flashmode" id="flashmode_off" value="Off" onclick="onChangeFlashMode();"/>
             <label for="flashmode_off">Off</label>
@@ -254,21 +254,21 @@ CanvasCamera.PictureSourceType = {
             <input type="radio" name="flashmode" id="flashmode_auto" value="Auto" onclick="onChangeFlashMode();"/>
             <label for="flashmode_auto">Auto</label>
             <br/>
-            
+
             <input type="button" value="Take a picture" onclick="onTakePicture();" />
 
 
         </div>
-        
+
 	<!— camera preview canvas —>
         <canvas id="camera" width="352" height="288" style="border:2px"></canvas>
-        
+
         <script type="text/javascript" src="cordova.js"></script>
         <script type="text/javascript" src="js/index.js"></script>
         <script type="text/javascript">
             app.initialize();
         </script>
-        
+
         <script>
             document.addEventListener("deviceready", function() {
                                           canvasMain = document.getElementById("camera");
@@ -285,7 +285,7 @@ CanvasCamera.PictureSourceType = {
                                           };
                                           CanvasCamera.start(opt);
                                       });
-      
+
             function onChangeDevicePosition() {
 
                 var newDevicePosition = CanvasCamera.CameraPosition.BACK;
@@ -300,9 +300,9 @@ CanvasCamera.PictureSourceType = {
                 //
                 CanvasCamera.setCameraPosition(newDevicePosition);
             }
-            
+
             function onChangeFlashMode() {
-                
+
                 var newFlashMode = CanvasCamera.FlashMode.OFF;
                 if (document.getElementById("flashmode_off").checked)
                 {
@@ -316,14 +316,14 @@ CanvasCamera.PictureSourceType = {
                 {
                     newFlashMode = CanvasCamera.FlashMode.AUTO;
                 }
-                
+
                 CanvasCamera.setFlashMode(newFlashMode);
             }
-            
+
             function onTakePicture() {
                 CanvasCamera.takePicture(onTakeSuccess);
             }
-            
+
             function onTakeSuccess(data) {
                 //
             }

src/android/CanvasCamera.java

@@ -3,6 +3,7 @@
 import android.app.Activity;
 import android.util.Log;
 import android.util.Size;
+import android.util.SparseIntArray;
 import android.os.Handler;
 import android.os.HandlerThread;
 import android.content.Context;
@@ -45,6 +46,30 @@ public class CanvasCamera extends CordovaPlugin
 {
     private final static String TAG = "SimpleCamera";
 
+    /**
+     * Conversion from screen rotation to JPEG orientation for back facing camera.
+     */
+    private static final SparseIntArray BACK_CAMERA_ORIENTATIONS = new SparseIntArray();
+
+    static {
+        BACK_CAMERA_ORIENTATIONS.append(Surface.ROTATION_0, 90);
+        BACK_CAMERA_ORIENTATIONS.append(Surface.ROTATION_90, 0);
+        BACK_CAMERA_ORIENTATIONS.append(Surface.ROTATION_180, 270);
+        BACK_CAMERA_ORIENTATIONS.append(Surface.ROTATION_270, 180);
+    }
+
+    /**
+     * Conversion from screen rotation to JPEG orientation for front facing camera.
+     */
+    private static final SparseIntArray FRONT_CAMERA_ORIENTATIONS = new SparseIntArray();
+
+    static {
+        FRONT_CAMERA_ORIENTATIONS.append(Surface.ROTATION_0, 270);
+        FRONT_CAMERA_ORIENTATIONS.append(Surface.ROTATION_90, 0);
+        FRONT_CAMERA_ORIENTATIONS.append(Surface.ROTATION_180, 90);
+        FRONT_CAMERA_ORIENTATIONS.append(Surface.ROTATION_270, 180);
+    }
+
     private Activity mActivity;
     private CallbackContext mCallbackContext;
 
@@ -53,6 +78,7 @@ public class CanvasCamera extends CordovaPlugin
     private CameraDevice mCamera;
     private String mCameraId;
     private ImageReader mReader = null;
+    private int mFileId = 0;
     private HandlerThread mBackgroundThread;
     private Handler mBackgroundHandler;
     private SimpleImageListener mListener = null;
@@ -74,6 +100,10 @@ else if ("setFlashMode".equals(action)) {
             setFlashMode(args, callbackContext);
             return true;
         }
+        else if ("setCameraPosition".equals(action)) {
+            setCameraPosition(args, callbackContext);
+            return true;
+        }
 
         return false;
     }
@@ -86,7 +116,7 @@ private void startCapture(JSONArray args, CallbackContext callbackContext)
         Log.d(TAG, "camera manager obtained");
 
         try {
-            mCameraId = mCameraManager.getCameraIdList()[0];
+            mCameraId = getCameraIdForOrientation(CameraCharacteristics.LENS_FACING_BACK);
             startBackgroundThread();
             mCameraManager.openCamera(mCameraId, cameraStateCallback, null);
 
@@ -137,7 +167,42 @@ private void setFlashMode(JSONArray args, CallbackContext callbackContext)
             callbackContext.success();
         }
         catch (Exception e){
-            callbackContext.error("Failed to stop capture");
+            callbackContext.error("Failed to set flash mode");
+        }
+    }
+
+    private void setCameraPosition(JSONArray args, CallbackContext callbackContext)
+    {
+        try {
+            String cameraPosition = args.getString(0);
+
+            Log.d(TAG, "camera is gonna be switched to " + cameraPosition);
+
+            int lensOrientation = CameraCharacteristics.LENS_FACING_BACK;
+
+            if (cameraPosition.equals("front")) {
+                lensOrientation = CameraCharacteristics.LENS_FACING_FRONT;
+            }
+
+            mCameraId = getCameraIdForOrientation(lensOrientation);
+
+            if (mCameraId != null) {
+                stopBackgroundThread();
+                mCameraSession.close();
+                mCamera.close();
+
+                startBackgroundThread();
+                mCameraManager.openCamera(mCameraId, cameraStateCallback, null);
+
+                Log.d(TAG, "camera switched");
+                callbackContext.success();
+            }
+            else {
+                callbackContext.error("Failed to switch camera");
+            }
+        }
+        catch (Exception e){
+            callbackContext.error("Failed to switch camera");
         }
     }
 
@@ -157,12 +222,12 @@ public void onOpened(CameraDevice camera) {
                     CameraCharacteristics.SCALER_STREAM_CONFIGURATION_MAP);
 
                 Size[] outputSizes = map.getOutputSizes(ImageFormat.JPEG);
-                Size previewSize = outputSizes[outputSizes.length - 1];
+                Size previewSize = chooseOptimalSize(outputSizes, 352, 288);
 
                 Log.d(TAG, "Creating ImageReader with size " + previewSize.toString() + " for camera " + mCameraId);
 
                 mReader = ImageReader.newInstance(previewSize.getWidth(), previewSize.getHeight(),
-                    ImageFormat.JPEG, /*maxImages*/10);
+                    ImageFormat.JPEG, /*maxImages*/2);
 
                 mListener  = new SimpleImageListener();
 
@@ -221,6 +286,23 @@ private CaptureRequest prepareCaptureRequest(int flashMode) {
                 mCamera.createCaptureRequest(CameraDevice.TEMPLATE_PREVIEW);
 
             captureBuilder.addTarget(surface);
+            captureBuilder.set(CaptureRequest.COLOR_CORRECTION_MODE,
+                                CaptureRequest.COLOR_CORRECTION_MODE_FAST);
+
+            int rotation = mActivity.getWindowManager().getDefaultDisplay().getRotation();
+
+            CameraCharacteristics characteristics = mCameraManager.getCameraCharacteristics(mCameraId);
+            int orientation = characteristics.get(CameraCharacteristics.LENS_FACING);
+            if(orientation == CameraCharacteristics.LENS_FACING_FRONT) {
+                rotation = FRONT_CAMERA_ORIENTATIONS.get(rotation);
+            }
+            else {
+                rotation = BACK_CAMERA_ORIENTATIONS.get(rotation);
+            }
+
+            Log.d(TAG, "Rotation: " + rotation);
+            captureBuilder.set(CaptureRequest.JPEG_ORIENTATION, rotation);
+
             captureBuilder.set(CaptureRequest.FLASH_MODE, flashMode);
 
             return captureBuilder.build();
@@ -231,6 +313,29 @@ private CaptureRequest prepareCaptureRequest(int flashMode) {
         }
     }
 
+    private String getCameraIdForOrientation(int cameraFacingOrientation) {
+        try {
+            String[] cameraIdList = mCameraManager.getCameraIdList();
+
+            for(final String cameraId : cameraIdList) {
+                CameraCharacteristics characteristics = mCameraManager.getCameraCharacteristics(cameraId);
+                int orientation = characteristics.get(CameraCharacteristics.LENS_FACING);
+                if(orientation == cameraFacingOrientation) {
+                    return cameraId;
+                }
+            }
+
+            if (cameraIdList.length > 0) {
+                return cameraIdList[0];
+            }
+        } catch (CameraAccessException e) {
+            e.printStackTrace();
+            return null;
+        }
+
+        return null;
+    }
+
     private void startBackgroundThread() {
         mBackgroundThread = new HandlerThread("CameraBackground");
         mBackgroundThread.start();
@@ -252,8 +357,6 @@ private void stopBackgroundThread() {
     }
 
     private class SimpleImageListener implements ImageReader.OnImageAvailableListener {
-        private int mFileId = 0;
-
         @Override
         public void onImageAvailable(ImageReader reader) {
             Image img = reader.acquireLatestImage();
@@ -305,4 +408,18 @@ public void saveImage(Image image, File file) {
         }
     }
 
+    private static Size chooseOptimalSize(Size[] choices, int width, int height) {
+        Size bigEnough = choices[0];
+        for (Size option : choices) {
+            if (option.getWidth() >= width && option.getHeight() >= height
+                && option.getWidth() < bigEnough.getWidth()
+                && option.getHeight() < bigEnough.getHeight()
+            ) {
+                bigEnough = option;
+            }
+        }
+
+        return bigEnough;
+    }
+
 }

www/CanvasCamera.js

@@ -9,20 +9,14 @@
 cordova.define("cordova/plugin/CanvasCamera", function(require, exports, module) {
     var exec = require('cordova/exec');
     var CanvasCamera = function(){
-        var _orientation = 'landscape';
         var _obj = null;
         var _context = null;
         var _camImage = null;
 
-        var _x = 0;
-        var _y = 0;
         var _width = 0;
         var _height = 0;
     };
 
-
-
-
     CanvasCamera.prototype.initialize = function(obj) {
         var _this = this;
         this._obj = obj;
@@ -32,36 +26,57 @@ cordova.define("cordova/plugin/CanvasCamera", function(require, exports, module)
         this._camImage = new Image();
 
         this._camImage.onload = function() {
-            console.log("_this._context.clearRect"+_this._width+","+_this._height);
-            _this._context.clearRect(0, 0, _this._width, _this._height);
-            if (window.orientation == 90
-               || window.orientation == -90)
-            {
-                _this._context.save();
-                // rotate 90
-                console.log("_this._context.translate"+(_this._width/2)+","+ (_this._height/2));
-                _this._context.translate(_this._width/2, _this._height/2);
-                _this._context.rotate((90 - window.orientation) *Math.PI/180);
-                _this._context.drawImage(_this._camImage, 0, 0, 352, 288, -_this._width/2, -_this._height/2, _this._width, _this._height);
-                //
-                _this._context.restore();
+            var image = this;
+            var canvasWidth = _this._width;
+            var canvasHeight = _this._height;
+            var imageWidth = image.width;
+            var imageHeight = image.height;
+            var ratio = Math.min(canvasWidth / imageWidth, canvasHeight / imageHeight);
+            var newWidth = imageWidth * ratio;
+            var newHeight = imageHeight * ratio;
+            var cutX, cutY, cutWidth, cutHeight, aspectRatio = 1;
+
+            _this._context.clearRect(0, 0, canvasWidth, canvasHeight);
+
+            /// decide which gap to fill
+            if (newWidth < canvasWidth) {
+                aspectRatio = canvasWidth / newWidth;
             }
-            else
-            {
-                console.log("comes in else");
-                _this._context.save();
-                // rotate 90
-                _this._context.translate(_this._width/2, _this._height/2);
-                _this._context.rotate((90 - window.orientation) *Math.PI/180);
-                _this._context.drawImage(_this._camImage, 0, 0, 352, 288, -_this._height/2, -_this._width/2, _this._height, _this._width);
-                //
-                _this._context.restore();
+            if (newHeight < canvasHeight) {
+                aspectRatio = canvasHeight / newHeight;
             }
+            newWidth *= aspectRatio;
+            newHeight *= aspectRatio;
+
+            /// calc source rectangle
+            cutWidth = imageWidth / (newWidth / canvasWidth);
+            cutHeight = imageHeight / (newHeight / canvasHeight);
+
+            cutX = (imageWidth - cutWidth) * 0.5;
+            cutY = (imageHeight - cutHeight) * 0.5;
+
+            /// make sure source rectangle is valid
+            if (cutX < 0) cutX = 0;
+            if (cutY < 0) cutY = 0;
+            if (cutWidth > imageWidth) cutWidth = imageWidth;
+            if (cutHeight > imageHeight) cutHeight = imageHeight;
+
+            /// fill image in dest. rectangle
+            _this._context.drawImage(image,
+                cutX, cutY, cutWidth, cutHeight,
+                0, 0, canvasWidth, canvasHeight);
         };
 
-        // register orientation change event
-        window.addEventListener('orientationchange', this.doOrientationChange);
-        this.doOrientationChange();
+        var pixelRatio = window.devicePixelRatio || 1; /// get pixel ratio of device
+        console.log('pixelRatio=' + pixelRatio);
+
+        this._width = 200;
+        this._height = 200;
+        this._obj.width = 200;// * pixelRatio;   /// resolution of canvas
+        this._obj.height = 200;// * pixelRatio;
+
+        this._obj.style.width = 200 + 'px';   /// CSS size of canvas
+        this._obj.style.height = 200 + 'px';
     };
 
 
@@ -90,45 +105,6 @@ cordova.define("cordova/plugin/CanvasCamera", function(require, exports, module)
         cordova.exec(function(){}, function(){}, "CanvasCamera", "setCameraPosition", [cameraPosition]);
     };
 
-    CanvasCamera.prototype.doOrientationChange = function() {
-        console.log('doOrientationChange');
-        switch(window.orientation)
-        {
-            case -90:
-            case 90:
-                this._orientation = 'landscape';
-                break;
-            default:
-                this._orientation = 'portrait';
-                break;
-        }
-        console.log('window.innerWidth'+window.innerWidth);
-        console.log('window.innerHeight'+window.innerHeight);
-
-        //var windowWidth = window.innerWidth;
-        //var windowHeight = window.innerHeight;
-
-        var windowWidth = 200;
-        var windowHeight = 200;
-
-        var pixelRatio = window.devicePixelRatio || 1; /// get pixel ratio of device
-
-
-        this._obj.width = windowWidth;// * pixelRatio;   /// resolution of canvas
-        this._obj.height = windowHeight;// * pixelRatio;
-        console.log('this._obj.width'+this._obj.width);
-
-        this._obj.style.width = windowWidth + 'px';   /// CSS size of canvas
-        this._obj.style.height = windowHeight + 'px';
-        console.log('this._obj.style.width'+this._obj.style.width);
-
-        this._x = 0;
-        this._y = 0;
-        this._width = windowWidth;
-        this._height = windowHeight;
-        console.log('this._width'+this._width+" this._height"+this._height);
-    };
-
     CanvasCamera.prototype.takePicture = function(onsuccess) {
         cordova.exec(onsuccess, function(){}, "CanvasCamera", "captureImage", []);
     };
@@ -139,43 +115,4 @@ cordova.define("cordova/plugin/CanvasCamera", function(require, exports, module)
 
 var CanvasCamera = cordova.require("cordova/plugin/CanvasCamera");
 
-
-var DestinationType = {
-    DATA_URL : 0,
-    FILE_URI : 1
-};
-
-var PictureSourceType = {
-    PHOTOLIBRARY : 0,
-    CAMERA : 1,
-    SAVEDPHOTOALBUM : 2
-};
-
-var EncodingType = {
-    JPEG : 0,
-    PNG : 1
-};
-
-var CameraPosition = {
-    BACK : 0,
-    FRONT : 1
-};
-
-var CameraPosition = {
-    BACK : 1,
-    FRONT : 2
-};
-
-var FlashMode = {
-    OFF : 0,
-    ON : 1,
-    AUTO : 2
-};
-
-CanvasCamera.DestinationType = DestinationType;
-CanvasCamera.PictureSourceType = PictureSourceType;
-CanvasCamera.EncodingType = EncodingType;
-CanvasCamera.CameraPosition = CameraPosition;
-CanvasCamera.FlashMode = FlashMode;
-
 module.exports = CanvasCamera;