1. 下载jdk 8u202版本:https://www.oracle.com/java/technologies/javase/javase8-archive-downloads.html
2. 下载android studio https://developer.android.google.cn/studio/
3. 下载nodejs https://nodejs.org/dist/v16.17.0/node-v16.17.0-x64.msi 官网:https://nodejs.org/zh-cn/
4. 安装jdk
   1. 使用默认设置，一直点击下一步直到安装完成
   2. 在弹出的界面中直接点击下一步，如果修改了安装路径，请记住路径
   3. 安装结束时，直接点击关闭按钮，不用去点击后续步骤按钮
   4. 开启一个cmd窗口，在命令行中输入 java -version 检查输出的版本信息是否为 java version "1.8.0_202
   5. jdk安装完成
5. 安装 Android Studio
   1. 打开安装程序后的第一个界面，按需求选择是否安装 Android virtual Device ，本文取消了虚拟设备安装。
   2. 安装路径安自己的需求选择，不影响后续
   3. 后续界面直接选择 install按钮 等待安装结束时，勾选 Start Android Studio 然后 Finish
   4. 如果以前安装过，请选择Do not import settings
   5. 安装必须的sdk文件
   6. 选择 Next 后 在 License 中选择 Accept 然后 Finish 等待安装完成
   7. 安装完成后关闭，即可。后续会用到.
6. 安装nodejs
   1. 使用默认值一路 Next 即可
7. 安装ionic、angular、cordova，打开 命令提示符(cmd.exe)
   1. npm install -g @ionic/cli 安装 ionic
   2. npm install -g @angular/cli 安装 angular
   3. npm install -g cordova 安装 cordova

1. 下载jdk 8u202版本:https://www.oracle.com/java/technologies/javase/javase8-archive-downloads.html

2. 下载android studio: https://developer.android.google.cn/studio/

3. 安装jdk，安装完成后在终端中输入javac -version 检查输出结果是否为:javac 1.8.0_202

4. 设置JAVA_HOME环境变量:

5. 在终端中输入: /usr/libexec/java_home -V | grep jdk 找到 1.8.0_202的路径并复制 /Library/Java/JavaVirtualMachines/jdk1.8.0_202.jdk/Contents/Home

6. 编辑 ~/.bashrc 添加如下内容

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_202.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH

然后运行 source ~/.bashrc

1. 安装android studio,然后打开，按照标准引导步骤完成初始化。需要下载SDK等文件的步骤时，请选择Accept然后点击Finish,等待完成。

2. 安装nodejs , 官网:https://nodejs.org/en/ ,macos版本的下载地址: https://nodejs.org/dist/v16.17.0/node-v16.17.0.pkg

3. 安装完成后在终端中输入:node -v && npm -v检查输出是否为安装的版本

4. 由于本次演示中ionic会使用到angular，全局安装一次angular: npm install -g @angular/cli

5. 全局安装cordova: npm install -g cordova

6. 全局安装ionic: npm install -g @ionic/cli

1. ionic start ionic_demo ionic_demo=项目文件夹名称

2. 当出现? Use the app creation wizard? (Y/n) 时选择 n

3. Framework 本文档选择 Angular

4. 输入项目名称

5. 选择template

6. 进入到ionic项目的目录: cd ionic_demo，

7. 关闭capacitor : ionic integrations disable capacitor

8. 添加Android 平台:ionic cordova platform add android ,出现? Are you sure you want to continue? (Y/n) 选择Y

9. 打开ionic_demo目录下的 config.xml 修改 <widget id="com.hld.ionicdemo" version="0.0.1" ...>中的id的值为:com.hld.ionicdemo类似的格式， 此值为Android 的包名，请尽量保证 id 的值全球唯一 ,widget中的version为Android app的版本号，如果版本升级，请增加该版本号的值

10. 继续修改config.xml <name>MyApp</name> 中的MyApp的值，此为App在手机上显示的名称

11. 按需求修改description 和 author节点的内容

12. 然后运行 ionic cordova platform rm android 删除一次 platforms/android文件，

13. 然后再运行 ionic cordova platform add android 删除后再运行，是为了使 config.xml 的修改生效，只有修改了id之后需要 rm 然后 add

14. 尝试编译一次android项目 ionic cordova build android,如果是发布prod版本 那么命令为 ionic cordova build android --prod

15. 如果出现 Error: Unknown argument: platform 请执行命令 ng add @ionic/cordova-builders

16. 如果出现类似 No installed build tools found. Please install the Android build tools version 30.0.3.错误 打开Android Studio 然后打开当前项目:ionic_demo/platforms/android

17. 在android studio中安装 build tools Android Studio -> tools -> SDK manager -> SDK Tools -> Show packages details and select needed versions 。 见图片标注

18. 然后再次在ionic_demo的终端目录中运行ionic cordova build android

1. 本文以 docker ubuntu 20.04为例搭建
2. 确保服务器中安装了git，建立 mediapipe目录，这里以/home/knift为例: mkdir /home/knift
3. 请确保安装了 python 3.7 并设置 3.7为默认的python
4. 由于docker 中没有 sudo 所以先安装 sudo apt install sudo
5. 安装其他必须的软件

apt install unzip -y 

apt install curl -y 

apt install wget -y

apt install vim -y

#本次运行环境使用的是ubuntu 20.04的 以下命令以root用户运行
apt update

apt install software-properties-common -y

add-apt-repository ppa:deadsnakes/ppa

apt update

apt install python3.7 -y

# 修改默认的python版本

rm /usr/bin/python # 如果提示 文件不存在，不用管

ln -s /usr/bin/python3.7 /usr/bin/python

python --version

1. apt install python3-pip -y 安装pip
2. pip3 install --user six 安装 six
3. pip3 install numpy 安装 numpy
4. cd /home/knift进入目录
5. git clone https://github.com/hbyjw/mediapipe-yu.git 这是目前修改完毕了的一份代码,等待clone完成
6. cd mediapipe-yu
7. 安装node ,以下命令使用的root账户

  apt update
  apt install nodejs -y
  apt install npm -y
  npm install -g n
  n stable
  PATH="$PATH"
  node -v

1. npm install -g @bazel/bazelisk 安装 Bazelisk

2. apt install curl -y 安装 curl 如果已经安装请忽略

3. apt install unzip 安装 unzip 如果已经安装请忽略

4. 安装 jdk

5. 下载 linux jdk8u202 的文件 wget https://download.oracle.com/otn/java/jdk/8u202-b08/1961070e4c9b4e26a04e7f5a083f551e/jdk-8u202-linux-x64.tar.gz?AuthParam=1661227741_d1d11510ae1be939bdb5abfd3b58281c 注意这个地址可能会失效，请自己去官网(https://www.oracle.com/java/technologies/javase/javase8-archive-downloads.html )获取下载地址

6. mv 'jdk-8u202-linux-x64.tar.gz?AuthParam=1661227741_d1d11510ae1be939bdb5abfd3b58281c' jdk.tar.gz 重命名文件。

7. 解压文件 tar -zxvf jdk.tar.gz 得到jdk1.8.0_202

8. mv jdk1.8.0_202 /usr/local/

9. ln -s /usr/local/jdk1.8.0_202 /usr/local/jdk

10. vim /etc/profile #配置JDK的环境变量,在末尾插入如下代码

```shell
export JAVA_HOME=/usr/local/jdk
export PATH=$JAVA_HOME/bin:$JAVA_HOME/jre/bin:$PATH
export CLASSPATH=.$CLASSPATH:$JAVA_HOME/lib:$JAVA_HOME/jre/lib:$JAVA_HOME/lib/tools.jar
```

1.source /etc/profile #重新加载系统环境变量 1. java -version#查看java版本

1. 删除 mediapipe-yu/WORKSPACE 中的 android_sdk_repository(name = "androidsdk", path = "/root/Android/Sdk") 和 android_ndk_repository(name = "androidndk", path = "/root/Android/Sdk/ndk-bundle/android-ndk-r21") ,删除/root/Android/目录

2. ./setup_android_sdk_and_ndk.sh 安装Android Sdk

3. ./setup_opencv.sh 安装 opencv

4. 测试

# Switch to OpenCV 4
sed -i -e 's:3.4.3/opencv-3.4.3:4.0.1/opencv-4.0.1:g' WORKSPACE
sed -i -e 's:libopencv_java3:libopencv_java4:g' third_party/opencv_linux.BUILD


 export GLOG_logtostderr=1

# 如果使用cpu
 bazel run --define MEDIAPIPE_DISABLE_GPU=1 \
    mediapipe/examples/desktop/hello_world:hello_world

# 如果使用GPU支持，先安装 ` sudo apt-get install mesa-common-dev libegl1-mesa-dev libgles2-mesa-dev  `
 bazel run --copt -DMESA_EGL_NO_X11_HEADERS --copt -DEGL_NO_X11 \
    mediapipe/examples/desktop/hello_world:hello_world

1. 如果测试时出现如下错误

file '@bazel_tools//tools/cpp:toolchain_utils.bzl' does not contain symbol 'use_cpp_toolchain' (did you mean 'find_cpp_toolchain'?)

按以下步骤执行

  Go to the cloned mediapipe directory.
  Edit .bazelversion file. It would contain 'x.0.0' -> change it to '5.2.0'
  Run 'bazel clean --expunge' and remove the cached bazel thingys in '/private/var/tmp/_bazel..' => Not sure if this is necessary, but to be sure.
  Run 'bazel version' => It should now say 5.2.0
  Run 'bazel run --define MEDIAPIPE_DISABLE_GPU=1 mediapipe/examples/desktop/hello_world:hello_world'
  Now it says Hello World! in my case.

1. 当出现 hello_world.cc:57] Hello World! 表示环境配置完成

2. 必须执行一次如下代码,CPU / GPU 模式选择一个即可

 # 如果使用cpu模式
  bazel build -c opt --define MEDIAPIPE_DISABLE_GPU=1 \
  mediapipe/examples/desktop/template_matching:template_matching_tflite
 # 如果使用GPU模式
  bazel build --copt -DMESA_EGL_NO_X11_HEADERS --copt -DEGL_NO_X11 \
  mediapipe/examples/desktop/template_matching:template_matching_tflite

1. 拷贝服务端文件到/home/knift/server
2. cd /home/knift/server
3. npm i 安装node_modules
4. npm start 启动服务
5. 在浏览器中录入服务端运行的地址，本演示文档使用的是: http://172.22.57.214:3002 ,登陆界面的账号密码已写入界面，无需修改直接登入
6. 登入后点击建立model ,检查运行环境是否配置正常
7. 建立model时如果提示权限问题，进入到 服务端的shell目录,执行 chmod +x knift_index.sh && chmod +x knift_labelmap.sh 再次运行建立model
8. 当出现 xxx.sh not found 时 找到服务端的文件 /home/knift/server/routes/buildmodel.js 将 cbc.build("/home/knift/", tempImgDir, no,modelDir,ext)中的第一个参数的路径改成 mideapipe所在的根目录，本此演示的路径为 /home/knift/mediapipe-yu/ 重启服务,注意路径后面有个/别掉了

1. 修改 ionic_demo->resources->android-xml 中 network_security_config 为如下内容

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<base-config cleartextTrafficPermitted="true" />
</network-security-config>

1. 在ionic_demo目录中新建一个 local_plugins目录
2. 将插件文件拷贝到local_plugins
4. 在ionic_demo目录下面执行:ionic cordova plugin add ./local_plugins/com.hld.cordova.plugin.mediapipe 等待插件安装完成

1. 运行ionic serve 可以在web中插件界面修改的即时变化
2. 运行ionic g service services/GV 表示在 src->app目录下面生成 srvices->gv.service.ts 用来做全局变量
3. 在 gv.service.ts 中添加插件API的变量地址

export class GVService {

  mediapipeAPIRUL = "http://172.22.57.214:3002" 
  tfliteURL = this.mediapipeAPIRUL + "/download/tfliteversion"  //tflite文件下载地址 ，初始化调用一次
  updateModelURL = this.mediapipeAPIRUL + "/download/pb"  //更新本机的训练模型数据，用户每次点击识别按钮时要执行
  buildmodelULR = this.mediapipeAPIRUL + "/buildmodel" //训练的模型一般不会调用，此API在测试时用过

  constructor() { }
}

1. 在src->app->app.component.ts 导入GVSservice

  constructor(
    private gv: GVService, //导入GVService
    private platform: Platform, //导入ionic的Platform 用来获取platform的加载情况
  ) {

  }
 

1. 在要执行代码的 xxx.ts文件中的 @Component(.... 之前添加代码: declare let HLDMediapipe: any 这样才该 xxx.ts文件中调用插件方法才不会报错

2. 执行插件初始化 HLDMediapipe.init 在插件初始化成功的回调中执行 HLDMediapipe.updateTF 具体代码参考 src->app->app.component.ts

3. 修改tab1 html，添加一个按钮 <ion-button (click)="start()" >启动</ion-button> , ionic 组件文档：https://ionicframework.com/docs/components ，

4. 编写 start()方法如下

  start() {
    let that = this
    //此为插件的方法，运行时，会启动条码扫描，然后下载模型数据，然后启动识别界面
    HLDMediapipe.barcodescanDownloadKniftScan((suc) => {
      console.log(suc)
  
    }, (err) => {
      console.log(err)
    }, { url: this.gv.updateModelURL }) //updateModelURL 为更新模型的API地址
  }

5. 下载gradle :https://downloads.gradle-dn.com/distributions/gradle-7.5.1-bin.zip

6. 如何安装gradle 见: https://gradle.org/install/ 内涵环境变量设置

7. Mac os中安装以及设置gradle环境变量

# 安装 如果提示没有权限 请在命令前添加sudo 
 mkdir /opt/gradle
 unzip -d /opt/gradle  gradle-7.5.1.zip
 ls /opt/gradle/gradle-7.5.1

# 设置
vim ~/.bashrc

#将下面的代码添加到文件最后一行
GRADE_HOME=/opt/gradle/gradle-7.5.1
export GRADE_HOME
export PATH=$PATH:/opt/gradle/gradle-7.5.1/bin

source ~/.bashrc 

# 验证

 gradle -v

WARNING: Download from http://mirror.tensorflow.org/github.com/bazelbuild/rules_closure/archive/cf1e44edb908e9616030cc83d085989b8e6cd6df.tar.gz failed: class com.google.devtools.build.lib.bazel.repository.downloader.UnrecoverableHttpException GET returned 404 Not Found
WARNING: Download from https://storage.googleapis.com/mirror.tensorflow.org/github.com/tensorflow/runtime/archive/fc70a32ecd248dd7612d75d2177125ed14541367.tar.gz failed: class com.google.devtools.build.lib.bazel.repository.downloader.UnrecoverableHttpException GET returned 404 Not Found