当前位置: 代码迷 >> java >> Cordova android 应用程序,图像覆盖在摄像机上
  详细解决方案

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

热度:98   发布时间:2023-07-26 14:09:15.0

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

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

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

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

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

然而,这些插件非常有缺陷,并删除了我计划依赖的许多相机控件:开始/停止/预览和接受按钮。

中间是否有解决方案,我不需要从头开始完全重写相机按钮,我可以保留现有按钮,但添加覆盖层?

我设法通过基于 Android 团队的 Camera2Video 示例创建自己的 Cordova 插件来解决这个问题: :

插件文件

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

您可以在此处获取插件:

  相关解决方案