Cordova camera plugin to create half screen for camera and other half for selection menu

Question

I am a trying to implement Instagram like camera interface(half screen is camera and other haalf is selection menu) using cordova camera plugin. Can anybody help me with this? Couldn't find a good source

Answer 1

You need to implement an hybrid view, check this article.

I did it to implement a, JAVA SurfaceView (implementing the camera inside it) over a CordovaWebView.

To give you some direction:

In the JavaScript for your plugin have something like:

SurfaceViewAdd:function(){
    cordova.exec(
        function(){//success function},function(){//error function},'MYPlugin',action,JSON[])
},

Once the plugin is installed in your cordova project, you can call this JavaScript function which will call the JAVA native code.

On the JAVA side, MainActivity:

public class CordovaApp extends CordovaActivity
{


    @Override
    public void onCreate(Bundle savedInstanceState)
    {

        super.onCreate(savedInstanceState);
        super.init();
        super.loadUrl(Config.getStartUrl());

        MYPlugin.setCwv(this.appView);
);

....plus all function you might need (to release the camera onPause event for example)..

}

The class of you plugin:

public class MYPlugin extends CordovaPlugin {


    public boolean execute(String action, final JSONArray args, final CallbackContext callbackContext) throws JSONException {
///Manage the input of your plugin from Javascript
//call functions inside your plugin class to implement a SurfaceView on top of the CordovaWebView
//Send back a successful callback to your JavaScript once the webview is implemented
        }

... ///all you need to implement the surfaceView and the cameraView inside the surfaceView ...

        public static void setCwv(CordovaWebView cwvInput) {
        cwv = cwvInput;
        }
}

And you'll need a plugin XML file:

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
    id="com.you.myplugin"
    version="1.0.0">
    <name>MyPlugin</name>
    <description> ... </description>
    <license> ... </license>
    <author> ... </author>

    <engines>
        <engine name="cordova" version=">=3.0.0" />
    </engines>

    <js-module src="www/js/my_plugin.js" name="MyPlugin">
        <clobbers target="MyPlugin" />
    </js-module>

    <platform name="android">
        <config-file target="res/xml/config.xml" parent="widget">
            <preference name="orientation" value="portrait"/>
            <feature name="MyPlugin" >
                <param name="android-package" value="com.you.myplugin.MyPlugin"/>
                <param name="onload" value="true"/>
            </feature>
        </config-file>

        <config-file target="AndroidManifest.xml" parent="/*">
            <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
            <uses-permission android:name="android.permission.CAMERA" />
            <uses-feature android:name="android.hardware.camera.autofocus" />
            <uses-feature android:name="android.hardware.camera" />
        </config-file>

        <source-file src="src/android/MyPlugin.java" target-dir="src/com/you/myplugin" />

    </platform>
</plugin>

Take the time to read the article and good luck.