Cordova android app with image overlay over video camera

Question

I'm building a hybrid app which needs to have a custom button on top of the camera view (maintaining the existing camera controls). I've previously done this before in iOS and was fairly straightforward. However most Android plugins use the 'intent' method:

Intent intent = new Intent(android.provider.MediaStore.ACTION_VIDEO_CAPTURE);
this.cordova.startActivityForResult((CordovaPlugin) this, intent, CAPTURE_VIDEO);

https://github.com/apache/cordova-plugin-media-capture/blob/master/src/android/Capture.java

This opens the native Camera in a totally separate window out of control of my plugin, which prevents me adding an overlay button.

There are a couple of plugins which use more custom code to invoke the Video camera:

recorder = new MediaRecorder();
recorder.setCamera(camera);

recorder.setAudioSource(MediaRecorder.AudioSource.CAMCORDER);
recorder.setVideoSource(MediaRecorder.VideoSource.CAMERA);

setProfile(recorder, cameraParameters);
recorder.setOutputFile(filePath);
recorder.setOrientationHint(90);

preview.attach(recorder);
recorder.prepare();
recorder.start();

https://github.com/jamesla/backgroundvideo/blob/master/src/android/VideoOverlay.java

However these plugins are very buggy, and remove a lot of the Camera controls I was planning to rely on: start/stop/preview and accept buttons.

Is there a solution in the middle where I don't need to totally re-write the camera buttons from scratch, I can keep the existing buttons, but add an overlay?

Answer 1

I managed to solve this by creating my own Cordova plugin based on the Camera2Video example from the Android team: https://github.com/android/camera-samples/tree/master/Camera2VideoJava/

plugin.xml

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" id="cordova-plugin-media-custom" version="0.1">
    <name>Media Custom</name>
    <description>Cordova Media Custom Plugin</description>
    <license>Apache 2.0</license>
    <keywords>cordova,video, editor</keywords>
    <js-module src="www/MediaCustom.js" name="MediaCustom">
        <clobbers target="MediaCustom" />
    </js-module>
    <platform name="android">
        <config-file target="config.xml" parent="/*">
            <feature name="MediaCustom">
                <param name="android-package" value="com.example.android.camera2video.MediaCustom"/>
            </feature>
        </config-file>
        <config-file target="AndroidManifest.xml" parent="/*">
            <uses-permission android:name="android.permission.CAMERA" />
            <uses-permission android:name="android.permission.RECORD_AUDIO" />
            <uses-permission android:name="android.permission.RECORD_VIDEO" />
            <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
        </config-file>
        <source-file src="src/android/MediaCustom.java" target-dir="src/com/example/android/camera2video" />
        <source-file src="src/android/Camera2VideoFragment.java" target-dir="src/com/example/android/camera2video" />
        <resource-file src="res/layout/activity_camera.xml" target="res/layout/activity_camera.xml" />
        <resource-file src="res/layout/fragment_camera2_video.xml" target="res/layout/fragment_camera2_video.xml" />
        <resource-file src="res/layout-land/fragment_camera2_video.xml" target="res/layout-land/fragment_camera2_video.xml" />
        <resource-file src="res/drawable/gallery.png"  target="res/drawable/gallery.png" />
        <resource-file src="res/drawable/record.png"  target="res/drawable/record.png" />
        <resource-file src="res/drawable/stop.png"  target="res/drawable/stop.png" />
    </platform>
</plugin>

MediaCustom.java - main functions

public void show() {
    Log.e(TAG, "show");
    cordova.getActivity().runOnUiThread(new Runnable() {
         @Override
         public void run() {
            cordova.getActivity().setContentView(resources.getIdentifier("activity_camera", "layout", packageName));
            cordova.getActivity().getFragmentManager().beginTransaction().replace(resources.getIdentifier("container", "id", packageName), Camera2VideoFragment.newInstance(cordova, callbackContext)).commit();
        }
    });
}

// hide the plugin
public void hide() {
    Log.e(TAG, "hide");
    cordova.getActivity().runOnUiThread(new Runnable() {
        @Override
        public void run() {
            Fragment fragment = cordova.getActivity().getFragmentManager().findFragmentById(resources.getIdentifier("container", "id", packageName));
            cordova.getActivity().getFragmentManager().beginTransaction().remove(fragment).commit();
            cordova.getActivity().setContentView(getView());
        }
    });
}

You can get the plugin here:

https://github.com/kmturley/cordova-plugin-media-custom