Cordova -> face-api-js [错误] 无法加载资源：在此服务器上找不到请求的 URL 空，第 0 行

问题描述

过去 4 天我一直在努力解决这个问题。我终于到了网上没有任何建议有帮助的地步。我正在尝试构建一个“简单”的cordova 应用程序，该应用程序使用face-api.js 在实时本地摄像头提要上进行情绪/表情检测。设置很简单：视频使用 iosrtc cordova 插件，然后在画布覆盖上使用 face-api-js 来绘制人脸地标..等。

我在使用 safari 控制台时收到以下错误（因为我直接在 ios 设备上进行测试）。 [错误] 无法加载资源：在此服务器上找不到请求的 URL。（空，第 0 行） file:///private/var/containers/Bundle/Application/6ADC69C6-C6F1-45D9-B609-0C85B3E47C4A/Angel.app/www/null

奇怪的是，数据图像似乎在一两秒后解析。你可以在这里看到这种情况：

请注意，当我的“间隔代码”重复时，图像开始解析：

让我们深入研究代码：

HTML

<!DOCTYPE html>
<html>
  <head>
    <Meta
      http-equiv="Content-Security-Policy"
      content=" media-src * blob: ; script-src * 'self' 'unsafe-inline' 'unsafe-eval'; connect-src * blob: http: https: 'self' 'unsafe-inline' 'unsafe-eval' http://*/* https://*/* https://*:* "
    />
    <Meta name="format-detection" content="telephone=no" />
    <Meta name="msapplication-tap-highlight" content="no" />
    <Meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"
    />

    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:400,700,400italic"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <title>Angel</title>
  </head>
  <body>
    <div class="app">
      <!--*******************
            local video stream
        ********************-->

      <div class="local-stream" id="local-stream"></div>

    </div>
    <script type="text/javascript" src="cordova.js"></script>
 
    <script type="text/javascript" src="js/faceapi/face-api.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
  </body>
</html>

JS：

 document.addEventListener("deviceready",function () {
  (async () => {
    let MODEL_URL =
      window.cordova.file.applicationDirectory + "www/assets/models/";

    let videoContainer = document.getElementById("local-stream");

    var localStream,localVideoEl;
    localVideoEl = document.createElement("video");
    localVideoEl.style.height = "250px";
    localVideoEl.style.width = "250px";
    localVideoEl.setAttribute("autoplay","autoplay");
    localVideoEl.setAttribute("playsinline","playsinline");
    localVideoEl.setAttribute("id","video");
    localVideoEl.setAttribute("class","local-video");
    videoContainer.appendChild(localVideoEl);

    cordova.plugins.iosrtc.registerGlobals();
    return navigator.mediaDevices
      .getUserMedia({
        video: true,audio: true,})
      .then(function (stream) {
        console.log("getUserMedia.stream",stream);
        console.log("getUserMedia.stream.getTracks",stream.getTracks());

        // Note: Expose for debug
        localStream = stream;

        // Attach local stream to video element
        localVideoEl.srcObject = localStream;

        //return localStream;

        (async () => {
          
          await faceapi.nets.ssdMobilenetv1.loadFromUri(
            "MYHOSTEDMODELS(THIS WORKS FINE)"
          );
          await faceapi.nets.faceLandmark68Net.loadFromUri(
            "MYHOSTEDMODELS(THIS WORKS FINE)"
          );
          await faceapi.nets.faceExpressionNet.loadFromUri(
            "MYHOSTEDMODELS(THIS WORKS FINE)"
          );
          await faceapi.nets.faceRecognitionNet.loadFromUri(
            "MYHOSTEDMODELS(THIS WORKS FINE)"
          );

          const video = document.getElementById("video");
          const canvas = faceapi.createCanvasFromMedia(video);
          videoContainer.append(canvas);
          const dimensions = {
            width: 250,height: 250,};

          faceapi.matchDimensions(canvas,dimensions);

          setInterval(async () => {
            let detection = await faceapi
              .detectAllFaces(video)
              .withFaceLandmarks()
              .withFaceExpressions()
              .withFaceDescriptors();
            let resizedDimensions = faceapi.resizeResults(
              detection,dimensions
            );

            //DRAW ON CAMERA IF YOU WANT.
            canvas.getContext("2d").clearRect(0,250,250);
            faceapi.draw.drawDetections(canvas,resizedDimensions);
            faceapi.draw.drawFaceLandmarks(canvas,resizedDimensions);
            faceapi.draw.drawFaceExpressions(canvas,resizedDimensions);
          },100);
        })();
      })

      .catch(function (err) {
        console.log("getUserMedia.error errrrr",err,err.stack);
      });
  })().then(() => {});
});

插件（package.json）

"cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},"cordova.plugins.diagnostic": {},"cordova-plugin-statusbar": {},"cordova-plugin-background-mode": {},"cordova-plugin-ipad-multitasking": {},"cordova-custom-config": {},"cordova-plugin-file": {},"cordova-plugin-device": {},"cordova-plugin-wkwebview-engine": {},"@globules-io/cordova-plugin-ios-xhr": {},"cordova-plugin-iosrtc": {
        "MANUAL_INIT_AUdio_DEVICE": "FALSE"
      }
    },"platforms": [
      "browser","ios"
    ]
  },

最后一点：视频播放正常。是 face-api 似乎把整个事情都炸了。任何帮助将不胜感激！！！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

face-api javascript