在 cordova 使用face-api.js与Android

yhuiod9q  于 2022-11-15  发布在  Android
关注(0)|答案(1)|浏览(168)

Cordova不允许将本地文件加载到face-api.js中使用的TensorFlow训练中,但此问题不会在iOS或浏览器中发生。如何解决?

ki0zmccv

ki0zmccv1#

要在本地加载文件(这些文件将被解压缩并用于TensorFlow中的训练),您必须告诉Face-api.js库将调用哪个方法来读取文件,并设置值 在faceapi. env. monkeyPatch中创建。
我不能说这是最好的解决方案,但它是一个有效的解决方案。我将Android平台与其他平台分离(这没有问题),在Android内部,我将JSON文件与二进制文件分离。
下面是一个完整的示例,考虑了加载一张512 x512的人脸图像:
PS:VueJS中的Javascript代码。

插件列表

cordova 插件
cordova插件文件

应用程序版本

<script>
import * as faceapi from "face-api.js";

export default {
  data: () => ({}),
  mounted() {
    let cls = this;
    document.addEventListener(
      "deviceready",
      function() {
        cls.loadFaceDetectModels();
      },
      false
    );
  },
  methods: {
    async loadFaceDetectModels() {
      let MODEL_URL;
      if (window.device.platform === "Android") {
        MODEL_URL =
          window.cordova.file.applicationDirectory + "www/static/models/";
        faceapi.env.monkeyPatch({
          readFile: filePath =>
            new Promise(resolve => {
              window.resolveLocalFileSystemURL(
                filePath,
                function(fileEntry) {
                  fileEntry.file(
                    function(file) {
                      var reader = new FileReader();

                      let fileExtension = filePath
                        .split("?")[0]
                        .split(".")
                        .pop();
                      if (fileExtension === "json") {
                        reader.onloadend = function() {
                          resolve(this.result);
                        };
                        reader.readAsText(file);
                      } else {
                        reader.onloadend = function() {
                          resolve(new Uint8Array(this.result));
                        };

                        reader.readAsArrayBuffer(file);
                      }
                    },
                    function() {
                      resolve(false);
                    }
                  );
                },
                function() {
                  resolve(false);
                }
              );
            }),
          Canvas: HTMLCanvasElement,
          Image: HTMLImageElement,
          ImageData: ImageData,
          Video: HTMLVideoElement,
          createCanvasElement: () => document.createElement("canvas"),
          createImageElement: () => document.createElement("img")
        });
        await faceapi.nets.tinyFaceDetector.loadFromDisk(MODEL_URL);
        await faceapi.nets.faceRecognitionNet.loadFromDisk(MODEL_URL);
      } else {
        MODEL_URL = "./static/models";
        await faceapi.loadTinyFaceDetectorModel(MODEL_URL);
        await faceapi.loadFaceRecognitionModel(MODEL_URL);
      }

      this.testFaceDetector();
    },
    testFaceDetector() {
      let cls = this;
      let baseImage = new Image();
      baseImage.src = "./static/img/faceWillSmith.jpg";
      baseImage.onload = function() {
        faceapi
          .detectSingleFace(baseImage, new faceapi.TinyFaceDetectorOptions())
          .run()
          .then(res => {
            alert(JSON.stringify(res));
          });
      };
    }
  }
};
</script>

配置文件xml

<platform name="android">
    <allow-intent href="market:*" />
    <preference name="loadUrlTimeoutValue" value="700000" />
    <preference name="android-minSdkVersion" value="21" />
    <preference name="android-targetSdkVersion" value="21" />
    <preference name="AndroidPersistentFileLocation" value="Compatibility" />
    <preference name="AndroidPersistentFileLocation" value="Internal" />
    <preference name="AndroidExtraFilesystems" value="files,files-external,documents,sdcard,cache,cache-external,assets,root,applicationDirectory" />
</platform>

相关问题