mediapipe 中文教程 android开发

彦国發表於 2022-2-22 19:57:00

今天开始给大家分享mediapipe学习,踩坑过程.
 
首先还是要学习官方教程的  https://google.github.io/mediapipe/getting_started/hello_world_android.html
 
环境搭建后期在分享给大家
<img src="https://img2022.cnblogs.com/blog/881683/202202/881683-20220222195728659-924633040.png" alt="" loading="lazy">
 
 
我现在使用的是windown系统,  也跑过centos上,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
<h1 id="hello-world-on-android" class="no_toc">helloworld！android</h1>
<ol id="markdown-toc">
<li>介绍<ol>
<li>你会学到什么</li>
<li>你将建造什么</li>
</ol></li>
<li>设置</li>
<li>边缘检测图</li>
<li>初始最小应用程序设置</li>
<li>通过使用相机<code class="language-plaintext highlighter-rouge">CameraX</code><ol>
<li>相机权限</li>
<li>相机访问</li>
</ol></li>
<li><code class="language-plaintext highlighter-rouge">ExternalTextureConverter</code>设置</li>
<li>在 Android 中使用 MediaPipe 图<ol>
<li>添加相关依赖</li>
<li>使用图表<code class="language-plaintext highlighter-rouge">MainActivity</code></li>
</ol></li>
</ol><hr>
<h2 id="introduction">介绍</h2>
此 Codelab 在 Android 设备上使用 MediaPipe。
<h3 id="what-you-will-learn">你会学到什么</h3>
如何开发使用 MediaPipe 的 Android 应用程序并在 Android 上运行 MediaPipe 图。
<h3 id="what-you-will-build">你将建造什么</h3>
用于实时 Sobel 边缘检测的简单相机应用程序，适用于 Android 设备上的实时视频流。
<img src="https://google.github.io/mediapipe/images/mobile/edge_detection_android_gpu.gif" alt="edge_detection_android_gpu_gif">
<h2 id="setup">设置</h2>
<ol>
<li>在您的系统上安装 MediaPipe，有关详细信息，请参阅MediaPipe 安装指南。</li>
<li>安装 Android 开发 SDK 和 Android NDK。另请参阅中的操作方法。</li>
<li>在您的 Android 设备上启用开发者选项。</li>
<li>在您的系统上设置Bazel以构建和部署 Android 应用程序。</li>
</ol>
<h2 id="graph-for-edge-detection">边缘检测图</h2>
我们将使用下图<code class="language-plaintext highlighter-rouge">edge_detection_mobile_gpu.pbtxt</code>：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code># MediaPipe graph that performs GPU Sobel edge detection on a live video stream.
# Used in the examples in
# mediapipe/examples/android/src/java/com/mediapipe/apps/basic and
# mediapipe/examples/ios/edgedetectiongpu.

# Images coming into and out of the graph.
input_stream: "input_video"
output_stream: "output_video"

# Converts RGB images into luminance images, still stored in RGB format.
node: {
calculator: "LuminanceCalculator"
input_stream: "input_video"
output_stream: "luma_video"
}

# Applies the Sobel filter to luminance images stored in RGB format.
node: {
calculator: "SobelEdgesCalculator"
input_stream: "luma_video"
output_stream: "output_video"
}
</code></pre>
</div>
</div>
图表的可视化如下所示：
<img src="https://google.github.io/mediapipe/images/mobile/edge_detection_mobile_gpu.png" alt="edge_detection_mobile_gpu">
该图有一个输入流，命名<code class="language-plaintext highlighter-rouge">input_video</code>为所有传入的帧，这些帧将由您的设备的相机提供。
图中的第一个节点<code class="language-plaintext highlighter-rouge">LuminanceCalculator</code>，采用单个数据包（图像帧）并使用 OpenGL 着色器应用亮度变化。生成的图像帧被发送到<code class="language-plaintext highlighter-rouge">luma_video</code>输出流。
第二个节点对流<code class="language-plaintext highlighter-rouge">SobelEdgesCalculator</code>中的传入数据包应用边缘检测，<code class="language-plaintext highlighter-rouge">luma_video</code>并在输出流中输出结果<code class="language-plaintext highlighter-rouge">output_video</code>。
我们的 Android 应用程序将显示<code class="language-plaintext highlighter-rouge">output_video</code>流的输出图像帧。
<h2 id="initial-minimal-application-setup">初始最小应用程序设置</h2>
我们首先从一个显示“Hello World！”的简单 Android 应用程序开始。屏幕上。如果您熟悉使用<code class="language-plaintext highlighter-rouge">bazel</code>.
创建一个新目录，您将在其中创建 Android 应用程序。例如，本教程的完整代码可以在<code class="language-plaintext highlighter-rouge">mediapipe/examples/android/src/java/com/google/mediapipe/apps/basic</code>. <code class="language-plaintext highlighter-rouge">$APPLICATION_PATH</code>我们将在整个 Codelab 中引用此路径。
请注意，在应用程序的路径中：
<ul>
<li>该应用程序名为<code class="language-plaintext highlighter-rouge">helloworld</code>.</li>
<li>该<code class="language-plaintext highlighter-rouge">$PACKAGE_PATH</code>应用程序是<code class="language-plaintext highlighter-rouge">com.google.mediapipe.apps.basic</code>. 这在本教程的代码片段中使用，因此请记住<code class="language-plaintext highlighter-rouge">$PACKAGE_PATH</code>在复制/使用代码片段时使用您自己的。</li>
</ul>
将文件添加<code class="language-plaintext highlighter-rouge">activity_main.xml</code>到<code class="language-plaintext highlighter-rouge">$APPLICATION_PATH/res/layout</code>. 这将<code class="language-plaintext highlighter-rouge">TextView</code>在应用程序的全屏上显示一个字符串<code class="language-plaintext highlighter-rouge">Hello World!</code>：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
</code></pre>
</div>
</div>
添加一个加载布局内容的简单对象，<code class="language-plaintext highlighter-rouge">MainActivity.java</code>如下所示：<code class="language-plaintext highlighter-rouge">$APPLICATION_PATH</code><code class="language-plaintext highlighter-rouge">activity_main.xml</code>
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>package com.google.mediapipe.apps.basic;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

/** Bare-bones main activity. */
public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
</code></pre>
</div>
</div>
添加一个清单文件<code class="language-plaintext highlighter-rouge">AndroidManifest.xml</code>to <code class="language-plaintext highlighter-rouge">$APPLICATION_PATH</code>，它<code class="language-plaintext highlighter-rouge">MainActivity</code>在应用程序启动时启动：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.google.mediapipe.apps.basic">

<uses-sdk
 android:minSdkVersion="19"
 android:targetSdkVersion="19" />

<application
 android:allowBackup="true"
 android:label="${appName}"
 android:supportsRtl="true"
 android:theme="@style/AppTheme">
 <activity
 android:name="${mainActivity}"
 android:exported="true"
 android:screenOrientation="portrait">
 <intent-filter>
 <action android:name="android.intent.action.MAIN" />
 <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
 </activity>
</application>

</manifest>
</code></pre>
</div>
</div>
在我们的应用程序中，我们在应用程序中使用了一个<code class="language-plaintext highlighter-rouge">Theme.AppCompat</code>主题，因此我们需要适当的主题引用。添加<code class="language-plaintext highlighter-rouge">colors.xml</code>到<code class="language-plaintext highlighter-rouge">$APPLICATION_PATH/res/values/</code>：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#008577</color>
<color name="colorPrimaryDark">#00574B</color>
<color name="colorAccent">#D81B60</color>
</resources>
</code></pre>
</div>
</div>
添加<code class="language-plaintext highlighter-rouge">styles.xml</code>到<code class="language-plaintext highlighter-rouge">$APPLICATION_PATH/res/values/</code>：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><resources>


<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
 
 <item name="colorPrimary">@color/colorPrimary</item>
 <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
 <item name="colorAccent">@color/colorAccent</item>
</style>

</resources>
</code></pre>
</div>
</div>
要构建应用程序，请将<code class="language-plaintext highlighter-rouge">BUILD</code>文件添加到清单中<code class="language-plaintext highlighter-rouge">$APPLICATION_PATH</code>，并且<code class="language-plaintext highlighter-rouge">${appName}</code>清单<code class="language-plaintext highlighter-rouge">${mainActivity}</code>中的和将替换为中指定的字符串，<code class="language-plaintext highlighter-rouge">BUILD</code>如下所示。
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>android_library(
name = "basic_lib",
srcs = glob(["*.java"]),
manifest = "AndroidManifest.xml",
resource_files = glob(["res/**"]),
deps = [
 "//third_party:android_constraint_layout",
 "//third_party:androidx_appcompat",
],
)

android_binary(
name = "helloworld",
manifest = "AndroidManifest.xml",
manifest_values = {
 "applicationId": "com.google.mediapipe.apps.basic",
 "appName": "Hello World",
 "mainActivity": ".MainActivity",
},
multidex = "native",
deps = [
 ":basic_lib",
],
)
</code></pre>
</div>
</div>
该<code class="language-plaintext highlighter-rouge">android_library</code>规则为<code class="language-plaintext highlighter-rouge">MainActivity</code>、资源文件和<code class="language-plaintext highlighter-rouge">AndroidManifest.xml</code>.
该<code class="language-plaintext highlighter-rouge">android_binary</code>规则使用<code class="language-plaintext highlighter-rouge">basic_lib</code>生成的 Android 库构建二进制 APK 以安装在您的 Android 设备上。
要构建应用程序，请使用以下命令：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>bazel build -c opt --config=android_arm64 $APPLICATION_PATH:helloworld
</code></pre>
</div>
</div>
使用 . 安装生成的 APK 文件<code class="language-plaintext highlighter-rouge">adb install</code>。例如：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>adb install bazel-bin/$APPLICATION_PATH/helloworld.apk
</code></pre>
</div>
</div>
在您的设备上打开应用程序。它应该显示一个带有文本的屏幕<code class="language-plaintext highlighter-rouge">Hello World!</code>。
<img src="https://google.github.io/mediapipe/images/mobile/bazel_hello_world_android.png" alt="bazel_hello_world_android">
<h2 id="using-the-camera-via-camerax">通过使用相机<code class="language-plaintext highlighter-rouge">CameraX</code></h2>
<h3 id="camera-permissions">相机权限</h3>
要在我们的应用程序中使用摄像头，我们需要请求用户提供对摄像头的访问权限。要请求相机权限，请将以下内容添加到<code class="language-plaintext highlighter-rouge">AndroidManifest.xml</code>：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
</code></pre>
</div>
</div>
在同一文件中将最低 SDK 版本更改为<code class="language-plaintext highlighter-rouge">21</code>和目标 SDK 版本：<code class="language-plaintext highlighter-rouge">27</code>
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><uses-sdk
android:minSdkVersion="21"
android:targetSdkVersion="27" />
</code></pre>
</div>
</div>
这可确保提示用户请求相机权限，并使我们能够使用CameraX库进行相机访问。
要请求摄像头权限，我们可以使用 MediaPipe 组件提供的实用程序，即<code class="language-plaintext highlighter-rouge">PermissionHelper</code>. 要使用它，请<code class="language-plaintext highlighter-rouge">"//mediapipe/java/com/google/mediapipe/components:android_components"</code>在.<code class="language-plaintext highlighter-rouge">mediapipe_lib</code><code class="language-plaintext highlighter-rouge">BUILD</code>
要使用<code class="language-plaintext highlighter-rouge">PermissionHelper</code>in <code class="language-plaintext highlighter-rouge">MainActivity</code>，请将以下行添加到<code class="language-plaintext highlighter-rouge">onCreate</code>函数中：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>PermissionHelper.checkAndRequestCameraPermissions(this);
</code></pre>
</div>
</div>
这会通过屏幕上的对话框提示用户请求在此应用程序中使用相机的权限。
添加以下代码来处理用户响应：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>@Override
public void onRequestPermissionsResult(
int requestCode, String[] permissions, int[] grantResults) {
super.onRequestPermissionsResult(requestCode, permissions, grantResults);
PermissionHelper.onRequestPermissionsResult(requestCode, permissions, grantResults);
}

@Override
protected void onResume() {
super.onResume();
if (PermissionHelper.cameraPermissionsGranted(this)) {
startCamera();
}
}

public void startCamera() {}
</code></pre>
</div>
</div>
我们暂时将<code class="language-plaintext highlighter-rouge">startCamera()</code>方法留空。当用户响应提示时，<code class="language-plaintext highlighter-rouge">MainActivity</code>将恢复并<code class="language-plaintext highlighter-rouge">onResume()</code>调用。该代码将确认已授予使用相机的权限，然后将启动相机。
重建并安装应用程序。您现在应该会看到请求访问应用程序的摄像头的提示。
注意：如果没有对话框提示，请卸载并重新安装应用程序。如果您没有更改文件中的<code class="language-plaintext highlighter-rouge">minSdkVersion</code>and也可能发生这种情况。<code class="language-plaintext highlighter-rouge">targetSdkVersion</code><code class="language-plaintext highlighter-rouge">AndroidManifest.xml</code>
<h3 id="camera-access">相机访问</h3>
有了可用的相机权限，我们就可以开始并从相机中获取帧。
要查看来自相机的帧，我们将使用<code class="language-plaintext highlighter-rouge">SurfaceView</code>. 来自相机的每一帧都将存储在一个<code class="language-plaintext highlighter-rouge">SurfaceTexture</code>对象中。要使用这些，我们首先需要更改应用程序的布局。
从中删除整个<code class="language-plaintext highlighter-rouge">TextView</code>代码块<code class="language-plaintext highlighter-rouge">$APPLICATION_PATH/res/layout/activity_main.xml</code>并添加以下代码：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><FrameLayout
android:id="@+id/preview_display_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
 android:id="@+id/no_camera_access_view"
 android:layout_height="fill_parent"
 android:layout_width="fill_parent"
 android:gravity="center"
 android:text="@string/no_camera_access" />
</FrameLayout>
</code></pre>
</div>
</div>
这个代码块有一个新的<code class="language-plaintext highlighter-rouge">FrameLayout</code>命名<code class="language-plaintext highlighter-rouge">preview_display_layout</code>和<code class="language-plaintext highlighter-rouge">TextView</code>嵌套在它里面，命名<code class="language-plaintext highlighter-rouge">no_camera_access_preview</code>。当未授予相机访问权限时，我们的应用程序将显示<code class="language-plaintext highlighter-rouge">TextView</code>存储在变量中的字符串消息<code class="language-plaintext highlighter-rouge">no_camera_access</code>。在文件中添加以下行<code class="language-plaintext highlighter-rouge">$APPLICATION_PATH/res/values/strings.xml</code>：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><string name="no_camera_access" translatable="false">Please grant camera permissions.</string>
</code></pre>
</div>
</div>
当用户不授予相机权限时，屏幕现在将如下所示：
<img src="https://google.github.io/mediapipe/images/mobile/missing_camera_permission_android.png" alt="missing_camera_permission_android">
现在，我们将<code class="language-plaintext highlighter-rouge">SurfaceTexture</code>和<code class="language-plaintext highlighter-rouge">SurfaceView</code>对象添加到<code class="language-plaintext highlighter-rouge">MainActivity</code>：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>private SurfaceTexture previewFrameTexture;
private SurfaceView previewDisplayView;
</code></pre>
</div>
</div>
在函数中，在请求相机权限之前<code class="language-plaintext highlighter-rouge">onCreate(Bundle)</code>添加以下两行：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>previewDisplayView = new SurfaceView(this);
setupPreviewDisplayView();
</code></pre>
</div>
</div>
现在添加代码定义<code class="language-plaintext highlighter-rouge">setupPreviewDisplayView()</code>：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>private void setupPreviewDisplayView() {
previewDisplayView.setVisibility(View.GONE);
ViewGroup viewGroup = findViewById(R.id.preview_display_layout);
viewGroup.addView(previewDisplayView);
}
</code></pre>
</div>
</div>
我们定义了一个新<code class="language-plaintext highlighter-rouge">SurfaceView</code>对象并将其添加到<code class="language-plaintext highlighter-rouge">preview_display_layout</code> <code class="language-plaintext highlighter-rouge">FrameLayout</code>对象中，以便我们可以使用它来使用<code class="language-plaintext highlighter-rouge">SurfaceTexture</code>名为的对象显示相机帧<code class="language-plaintext highlighter-rouge">previewFrameTexture</code>。
要<code class="language-plaintext highlighter-rouge">previewFrameTexture</code>用于获取相机帧，我们将使用CameraX。MediaPipe 提供了一个名为<code class="language-plaintext highlighter-rouge">CameraXPreviewHelper</code>使用CameraX的实用程序。当通过启动相机时，此类会更新侦听器<code class="language-plaintext highlighter-rouge">onCameraStarted(@Nullable SurfaceTexture)</code>。
要使用此实用程序，请修改<code class="language-plaintext highlighter-rouge">BUILD</code>文件以添加对<code class="language-plaintext highlighter-rouge">"//mediapipe/java/com/google/mediapipe/components:android_camerax_helper"</code>.
现在导入<code class="language-plaintext highlighter-rouge">CameraXPreviewHelper</code>并将以下行添加到<code class="language-plaintext highlighter-rouge">MainActivity</code>：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>private CameraXPreviewHelper cameraHelper;
</code></pre>
</div>
</div>
现在，我们可以将我们的实现添加到<code class="language-plaintext highlighter-rouge">startCamera()</code>：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>public void startCamera() {
cameraHelper = new CameraXPreviewHelper();
cameraHelper.setOnCameraStartedListener(
surfaceTexture -> {
 previewFrameTexture = surfaceTexture;
 // Make the display view visible to start showing the preview.
 previewDisplayView.setVisibility(View.VISIBLE);
});
}
</code></pre>
</div>
</div>
这将创建一个新<code class="language-plaintext highlighter-rouge">CameraXPreviewHelper</code>对象并在该对象上添加一个匿名侦听器。当<code class="language-plaintext highlighter-rouge">cameraHelper</code>有信号表明相机已经启动并且<code class="language-plaintext highlighter-rouge">surfaceTexture</code>可以获取帧时，我们将其另存<code class="language-plaintext highlighter-rouge">surfaceTexture</code>为<code class="language-plaintext highlighter-rouge">previewFrameTexture</code>，并使其<code class="language-plaintext highlighter-rouge">previewDisplayView</code>可见，以便我们可以开始查看<code class="language-plaintext highlighter-rouge">previewFrameTexture</code>.
但是，在启动相机之前，我们需要决定要使用哪个相机。<code class="language-plaintext highlighter-rouge">CameraXPreviewHelper</code>继承 from <code class="language-plaintext highlighter-rouge">CameraHelper</code>which 提供两个选项，<code class="language-plaintext highlighter-rouge">FRONT</code>和<code class="language-plaintext highlighter-rouge">BACK</code>. 我们可以将<code class="language-plaintext highlighter-rouge">BUILD</code>文件中的决定作为元数据传递，这样无需更改代码即可使用不同的相机构建另一个版本的应用程序。
假设我们想使用<code class="language-plaintext highlighter-rouge">BACK</code>相机对我们从相机查看的实时场景执行边缘检测，请将元数据添加到<code class="language-plaintext highlighter-rouge">AndroidManifest.xml</code>：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code> ...
 <meta-data android:name="cameraFacingFront" android:value="${cameraFacingFront}"/>
</application>
</manifest>
</code></pre>
</div>
</div>
<code class="language-plaintext highlighter-rouge">BUILD</code>并在<code class="language-plaintext highlighter-rouge">helloworld</code>android 二进制规则中使用新条目指定选择<code class="language-plaintext highlighter-rouge">manifest_values</code>：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>manifest_values = {
"applicationId": "com.google.mediapipe.apps.basic",
"appName": "Hello World",
"mainActivity": ".MainActivity",
"cameraFacingFront": "False",
},
</code></pre>
</div>
</div>
现在，<code class="language-plaintext highlighter-rouge">MainActivity</code>要检索中指定的元数据<code class="language-plaintext highlighter-rouge">manifest_values</code>，添加一个<code class="language-plaintext highlighter-rouge">ApplicationInfo</code>对象：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>private ApplicationInfo applicationInfo;
</code></pre>
</div>
</div>
在<code class="language-plaintext highlighter-rouge">onCreate()</code>函数中，添加：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>try {
applicationInfo =
 getPackageManager().getApplicationInfo(getPackageName(), PackageManager.GET_META_DATA);
} catch (NameNotFoundException e) {
Log.e(TAG, "Cannot find application info: " + e);
}
</code></pre>
</div>
</div>
<code class="language-plaintext highlighter-rouge">startCamera()</code>现在在函数末尾添加以下行：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>CameraHelper.CameraFacing cameraFacing =
applicationInfo.metaData.getBoolean("cameraFacingFront", false)
 ? CameraHelper.CameraFacing.FRONT
 : CameraHelper.CameraFacing.BACK;
cameraHelper.startCamera(this, cameraFacing, /*unusedSurfaceTexture=*/ null);
</code></pre>
</div>
</div>
此时，应用程序应该构建成功。但是，当您在设备上运行应用程序时，您会看到黑屏（即使已授予相机权限）。这是因为即使我们保存了<code class="language-plaintext highlighter-rouge">surfaceTexture</code>提供的变量<code class="language-plaintext highlighter-rouge">CameraXPreviewHelper</code>，<code class="language-plaintext highlighter-rouge">previewSurfaceView</code>也不会使用它的输出并将其显示在屏幕上。
由于我们想在 MediaPipe 图中使用帧，因此我们不会在本教程中添加代码来直接查看相机输出。相反，我们直接跳到如何将相机帧发送到 MediaPipe 图形并在屏幕上显示图形的输出进行处理。
<h2 id="externaltextureconverter-setup"><code class="language-plaintext highlighter-rouge">ExternalTextureConverter</code>设置</h2>
A<code class="language-plaintext highlighter-rouge">SurfaceTexture</code>从流中捕获图像帧作为 OpenGL ES 纹理。要使用 MediaPipe 图，从相机捕获的帧应存储在常规 Open GL 纹理对象中。MediaPipe 提供了一个类，<code class="language-plaintext highlighter-rouge">ExternalTextureConverter</code>用于将存储在<code class="language-plaintext highlighter-rouge">SurfaceTexture</code>对象中的图像转换为常规的 OpenGL 纹理对象。
要使用<code class="language-plaintext highlighter-rouge">ExternalTextureConverter</code>，我们还需要一个<code class="language-plaintext highlighter-rouge">EGLContext</code>，它由一个<code class="language-plaintext highlighter-rouge">EglManager</code>对象创建和管理。将依赖项添加到<code class="language-plaintext highlighter-rouge">BUILD</code>要使用的文件中<code class="language-plaintext highlighter-rouge">EglManager</code>，<code class="language-plaintext highlighter-rouge">"//mediapipe/java/com/google/mediapipe/glutil"</code>.
在<code class="language-plaintext highlighter-rouge">MainActivity</code>中，添加以下声明：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>private EglManager eglManager;
private ExternalTextureConverter converter;
</code></pre>
</div>
</div>
在函数中，在请求相机权限之前<code class="language-plaintext highlighter-rouge">onCreate(Bundle)</code>添加一条语句来初始化对象：<code class="language-plaintext highlighter-rouge">eglManager</code>
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>eglManager = new EglManager(null);
</code></pre>
</div>
</div>
回想一下，我们在中定义了确认相机权限已被授予并调用的<code class="language-plaintext highlighter-rouge">onResume()</code>函数。在此检查之前，添加以下行以初始化对象：<code class="language-plaintext highlighter-rouge">MainActivity</code><code class="language-plaintext highlighter-rouge">startCamera()</code><code class="language-plaintext highlighter-rouge">onResume()</code><code class="language-plaintext highlighter-rouge">converter</code>
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>converter = new ExternalTextureConverter(eglManager.getContext());
</code></pre>
</div>
</div>
这<code class="language-plaintext highlighter-rouge">converter</code>现在使用由<code class="language-plaintext highlighter-rouge">GLContext</code>管理<code class="language-plaintext highlighter-rouge">eglManager</code>。
我们还需要重写中的<code class="language-plaintext highlighter-rouge">onPause()</code>函数，<code class="language-plaintext highlighter-rouge">MainActivity</code>以便如果应用程序进入暂停状态，我们会<code class="language-plaintext highlighter-rouge">converter</code>正确关闭：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>@Override
protected void onPause() {
super.onPause();
converter.close();
}
</code></pre>
</div>
</div>
要将输出通过管道<code class="language-plaintext highlighter-rouge">previewFrameTexture</code>传输到<code class="language-plaintext highlighter-rouge">converter</code>，请将以下代码块添加到<code class="language-plaintext highlighter-rouge">setupPreviewDisplayView()</code>：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>previewDisplayView
.getHolder()
.addCallback(
new SurfaceHolder.Callback() {
 @Override
 public void surfaceCreated(SurfaceHolder holder) {}

 @Override
 public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
 // (Re-)Compute the ideal size of the camera-preview display (the area that the
 // camera-preview frames get rendered onto, potentially with scaling and rotation)
 // based on the size of the SurfaceView that contains the display.
 Size viewSize = new Size(width, height);
 Size displaySize = cameraHelper.computeDisplaySizeFromViewSize(viewSize);

 // Connect the converter to the camera-preview frames as its input (via
 // previewFrameTexture), and configure the output width and height as the computed
 // display size.
 converter.setSurfaceTextureAndAttachToGLContext(
 previewFrameTexture, displaySize.getWidth(), displaySize.getHeight());
 }

 @Override
 public void surfaceDestroyed(SurfaceHolder holder) {}
});
</code></pre>
</div>
</div>
在此代码块中，我们添加了一个自定义<code class="language-plaintext highlighter-rouge">SurfaceHolder.Callback</code>并<code class="language-plaintext highlighter-rouge">previewDisplayView</code>实现该<code class="language-plaintext highlighter-rouge">surfaceChanged(SurfaceHolder holder, int format, int width, int height)</code>函数，以计算设备屏幕上相机帧的适当显示大小，并将<code class="language-plaintext highlighter-rouge">previewFrameTexture</code>对象绑定并将计算的帧发送<code class="language-plaintext highlighter-rouge">displaySize</code>到<code class="language-plaintext highlighter-rouge">converter</code>.
我们现在准备好在 MediaPipe 图中使用相机帧。
<h2 id="using-a-mediapipe-graph-in-android">在 Android 中使用 MediaPipe 图</h2>
<h3 id="add-relevant-dependencies">添加相关依赖</h3>
要使用 MediaPipe 图，我们需要将依赖项添加到 Android 上的 MediaPipe 框架。我们将首先添加一个构建规则来构建一个<code class="language-plaintext highlighter-rouge">cc_binary</code>使用 MediaPipe 框架的 JNI 代码，然后构建一个<code class="language-plaintext highlighter-rouge">cc_library</code>规则以在我们的应用程序中使用这个二进制文件。将以下代码块添加到您的<code class="language-plaintext highlighter-rouge">BUILD</code>文件中：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>cc_binary(
name = "libmediapipe_jni.so",
linkshared = 1,
linkstatic = 1,
deps = [
 "//mediapipe/java/com/google/mediapipe/framework/jni:mediapipe_framework_jni",
],
)

cc_library(
name = "mediapipe_jni_lib",
srcs = [":libmediapipe_jni.so"],
alwayslink = 1,
)
</code></pre>
</div>
</div>
将依赖项添加<code class="language-plaintext highlighter-rouge">":mediapipe_jni_lib"</code>到文件中的<code class="language-plaintext highlighter-rouge">mediapipe_lib</code>构建规则<code class="language-plaintext highlighter-rouge">BUILD</code>。
接下来，我们需要添加特定于我们要在应用程序中使用的 MediaPipe 图的依赖项。
<code class="language-plaintext highlighter-rouge">libmediapipe_jni.so</code>首先，在构建规则中为所有计算器代码添加依赖项：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>"//mediapipe/graphs/edge_detection:mobile_calculators",
</code></pre>
</div>
</div>
MediaPipe 图表是<code class="language-plaintext highlighter-rouge">.pbtxt</code>文件，但要在应用程序中使用它们，我们需要使用<code class="language-plaintext highlighter-rouge">mediapipe_binary_graph</code>构建规则生成<code class="language-plaintext highlighter-rouge">.binarypb</code>文件。
在<code class="language-plaintext highlighter-rouge">helloworld</code>android 二进制构建规则中，将<code class="language-plaintext highlighter-rouge">mediapipe_binary_graph</code>特定于图形的目标添加为资产：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>assets = [
"//mediapipe/graphs/edge_detection:mobile_gpu_binary_graph",
],
assets_dir = "",
</code></pre>
</div>
</div>
在<code class="language-plaintext highlighter-rouge">assets</code>构建规则中，您还可以添加其他资产，例如图形中使用的 TensorFlowLite 模型。
此外，<code class="language-plaintext highlighter-rouge">manifest_values</code>为特定于图形的属性添加其他属性，以便稍后在以下位置检索<code class="language-plaintext highlighter-rouge">MainActivity</code>：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>manifest_values = {
"applicationId": "com.google.mediapipe.apps.basic",
"appName": "Hello World",
"mainActivity": ".MainActivity",
"cameraFacingFront": "False",
"binaryGraphName": "mobile_gpu.binarypb",
"inputVideoStreamName": "input_video",
"outputVideoStreamName": "output_video",
},
</code></pre>
</div>
</div>
请注意，<code class="language-plaintext highlighter-rouge">binaryGraphName</code>表示二进制图的文件名，由目标<code class="language-plaintext highlighter-rouge">output_name</code>中的字段确定<code class="language-plaintext highlighter-rouge">mediapipe_binary_graph</code>。<code class="language-plaintext highlighter-rouge">inputVideoStreamName</code>和<code class="language-plaintext highlighter-rouge">outputVideoStreamName</code>分别是图中指定的输入和输出视频流名称。
现在，<code class="language-plaintext highlighter-rouge">MainActivity</code>需要加载 MediaPipe 框架。此外，该框架使用 OpenCV，因此<code class="language-plaintext highlighter-rouge">MainActvity</code>也应该加载<code class="language-plaintext highlighter-rouge">OpenCV</code>. <code class="language-plaintext highlighter-rouge">MainActivity</code>在（在类内部，但不在任何函数内部）使用以下代码来加载两个依赖项：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>static {
// Load all native libraries needed by the app.
System.loadLibrary("mediapipe_jni");
System.loadLibrary("opencv_java3");
}
</code></pre>
</div>
</div>
<h3 id="use-the-graph-in-mainactivity">使用图表<code class="language-plaintext highlighter-rouge">MainActivity</code></h3>
首先，我们需要加载包含从图形文件<code class="language-plaintext highlighter-rouge">.binarypb</code>编译的资产。<code class="language-plaintext highlighter-rouge">.pbtxt</code>为此，我们可以使用 MediaPipe 实用程序，<code class="language-plaintext highlighter-rouge">AndroidAssetUtil</code>.
<code class="language-plaintext highlighter-rouge">onCreate(Bundle)</code>在初始化之前初始化资产管理器<code class="language-plaintext highlighter-rouge">eglManager</code>：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>// Initialize asset manager so that MediaPipe native libraries can access the app assets, e.g.,
// binary graphs.
AndroidAssetUtil.initializeNativeAssetManager(this);
</code></pre>
</div>
</div>
现在，我们需要设置一个<code class="language-plaintext highlighter-rouge">FrameProcessor</code>对象，将准备好的相机帧发送<code class="language-plaintext highlighter-rouge">converter</code>到 MediaPipe 图并运行该图，准备输出，然后更新<code class="language-plaintext highlighter-rouge">previewDisplayView</code>以显示输出。添加以下代码以声明<code class="language-plaintext highlighter-rouge">FrameProcessor</code>：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>private FrameProcessor processor;
</code></pre>
</div>
</div>
并在初始化<code class="language-plaintext highlighter-rouge">onCreate(Bundle)</code>后对其进行初始化<code class="language-plaintext highlighter-rouge">eglManager</code>：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>processor =
new FrameProcessor(
 this,
 eglManager.getNativeContext(),
 applicationInfo.metaData.getString("binaryGraphName"),
 applicationInfo.metaData.getString("inputVideoStreamName"),
 applicationInfo.metaData.getString("outputVideoStreamName"));
</code></pre>
</div>
</div>
<code class="language-plaintext highlighter-rouge">processor</code>需要消耗来自<code class="language-plaintext highlighter-rouge">converter</code>处理的转换帧。<code class="language-plaintext highlighter-rouge">onResume()</code>在初始化之后添加以下行<code class="language-plaintext highlighter-rouge">converter</code>：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>converter.setConsumer(processor);
</code></pre>
</div>
</div>
应该将<code class="language-plaintext highlighter-rouge">processor</code>其输出发送到<code class="language-plaintext highlighter-rouge">previewDisplayView</code>为此，将以下函数定义添加到我们的自定义<code class="language-plaintext highlighter-rouge">SurfaceHolder.Callback</code>：
<div class="language-plaintext highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>@Override
public void surfaceCreated(SurfaceHolder holder) {
processor.getVideoSurfaceOutput().setSurface(holder.getSurface());
}

@Override
public void surfaceDestroyed(SurfaceHolder holder) {
processor.getVideoSurfaceOutput().setSurface(null);
}
</code></pre>
</div>
</div>
创建时，<code class="language-plaintext highlighter-rouge">SurfaceHolder</code>我们<code class="language-plaintext highlighter-rouge">Surface</code>有<code class="language-plaintext highlighter-rouge">VideoSurfaceOutput</code>. <code class="language-plaintext highlighter-rouge">processor</code>当它被销毁时，我们将其<code class="language-plaintext highlighter-rouge">VideoSurfaceOutput</code>从<code class="language-plaintext highlighter-rouge">processor</code>.
就是这样！您现在应该能够在设备上成功构建和运行应用程序，并在实时摄像机源上看到 Sobel 边缘检测运行！恭喜！
<img src="https://google.github.io/mediapipe/images/mobile/edge_detection_android_gpu.gif" alt="edge_detection_android_gpu_gif">
如果您遇到任何问题，请在此处查看教程的完整代码 
来源：https://www.cnblogs.com/Amos-Turing/p/15924705.html

頁: [1]

琼殿技术论坛's Archiver

mediapipe 中文教程 android开发