TypeError：_mediapipe_face_mesh__WEBPACK_IMPORTED_MODULE_3__.FaceMesh 不是构造函数

Question

我希望将 mediapipe 集成到 NextJS + Electron 应用程序中。但是，在导入

FaceMesh

并“尝试”使用它时，我在

@mediapipe/face_mesh

上收到以下错误：

对于上下文，我在库的帮助下使用 NextJS + Electron

Nextron

。我已经尝试过以下问题中提出的方法：

1. https://github.com/google/mediapipe/issues/1946
2. https://github.com/google/mediapipe/issues/2546
3. https://github.com/google/mediapipe/issues/3796

但我没有得到任何结果。

内部

FaceMeshComponent.js

：

import React, {useRef, useEffect} from 'react';
import Webcam from "react-webcam"
import { FaceMesh } from "@mediapipe/face_mesh";

function FaceMeshComponent() {
    const webcamRef = useRef(null);
    const canvasRef = useRef(null);

    useEffect(() => {   
        const faceMesh = new FaceMesh({locateFile: (file) => {
            return `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/${file}`;
        }});

        faceMesh.setOptions({
            maxNumFaces: 1,
            refineLandmarks: true,
            minDetectionConfidence: 0.5,
            minTrackingConfidence: 0.5
        });
    }, [])

   return <div>...</div>

感谢我能得到的任何帮助！

Answer 1

对于任何面临这个问题的人来说，似乎

@meddiapipe/face-mesh

项目已经有点被放弃了。

由于该包只是编译后的 Web-Assembly 模块，因此您可以直接下载它并将其用作本地依赖项。

添加

exports.FaceMesh = FaceMesh

最后

face_mesh.js

将完成快速而肮脏的修复。在我的例子中，

face_mesh

是我使用的另一个模块的依赖项，因此在构建时快速附加该导出（在我的例子中是汇总）也可以解决问题

function mediaPipeExportsWorkaround() {
    return {
        name: "mediapipe_workaround",
        load(id) {
            if (path.basename(id) === "face_mesh.js") {
                console.log("mediapipe workaround");
                let code = fs.readFileSync(id, "utf-8");
                code += "exports.FaceMesh = FaceMesh;";
                return { code };
            } else {
                return null;
            }
        },
    };
}

export default defineConfig({
    ...
    build: {
        ...
        rollupOptions: {
            plugins: [mediaPipeExportsWorkaround()],
        },
    },
....

我想接下来的解决方案将非常相似。

Answer 2

尝试使用

import * as FaceMesh from '@mediapipe/face_mesh';

而不是您目前拥有的face_mesh导入内容。

此外，当您创建对象实例时，请使用：

const faceMesh:FaceMesh.FaceMesh = new FaceMesh.FaceMesh (...)