Cordova android 应用程序，图像覆盖在摄像机上

Question

我正在构建一个混合应用程序，它需要在相机视图顶部有一个自定义按钮（维护现有的相机控件）。我以前在 iOS 中做过这个，而且相当简单。但是大多数 Android 插件使用 'intent' 方法：

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

这会在我的插件无法控制的完全独立的窗口中打开本机相机，这会阻止我添加叠加按钮。

有几个插件使用更多的自定义代码来调用摄像机：

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

但是这些插件有很多错误，并且删除了很多我计划依赖的相机控件：开始/停止/预览和接受按钮。

中间是否有一个解决方案，我不需要从头开始完全重写相机按钮，我可以保留现有按钮，但添加一个叠加层？

Answer 1

我设法通过基于 Android 团队的 Camera2Video 示例创建自己的 Cordova 插件来解决这个问题： https://github.com/android/camera-samples/tree/master/Camera2VideoJava/

插件.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 - 主要功能

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());
        }
    });
}

你可以在这里获取插件：

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