Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

face-api.js Trying to Initialize NodeJS Env in Electron Renderer Process

See original GitHub issue

About a month ago, I opened an issue #113 which was related to my lack of necessary hardware which I have solved.

However, with the latest version of face-api.js when using the same project structure and similar files, I am unable to load face-api.js the way mentioned in #113 and am getting this error when I try to load face-api.js in a renderer process: error

Extra Info:

Loading face-api.js in a renderer process of my electron app.
face-api.js version 0.16.1
Using face-api.js with electron

This is the project structure: dir-structure

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
</head>
<body>
    <img id="myImg" src="face.png" alt="">

    <script src="./node_modules/face-api.js/dist/face-api.js"></script>
    <script src="index.js"></script>
</body>
</html>

index.js:

var img = document.getElementById("myImg");
console.log(faceapi); // Just to check whether everything is working.

(async () => {
    await faceapi.loadSsdMobilenetv1Model('./models')
    await faceapi.loadTinyFaceDetectorModel('./models')
    await faceapi.loadMtcnnModel('./models')
    await faceapi.loadFaceLandmarkModel('./models')
    await faceapi.loadFaceLandmarkTinyModel('./models')
    await faceapi.loadFaceRecognitionModel('./models')

    // Used to work till 0.15.0 / 0.15.1 but doesn't work anymore.
    var inf = await faceapi.detectSingleFace(img).withFaceLandmarks().withFaceDescriptor()
    console.log(inf)
})();

Looking into the face-api.js file where the error was thrown, it seems as if face-api.js thinks I’m using NodeJS even when I’m loading it in the browser.

Thanks a lot, in advance!

Issue Analytics

State:
Created 5 years ago
Comments:13 (3 by maintainers)

Top GitHub Comments

7reactions

justadudewhohackscommented, Dec 2, 2018

The most straight forward solution would be to export the env inititializiation functions and call them manually: https://github.com/justadudewhohacks/tfjs-image-recognition-base/blob/master/src/env/initialize.ts

For now you can probably just manually monkey patch the environment back to a browser environment:

faceapi.env.monkeyPatch({
    Canvas: HTMLCanvasElement,
    Image: HTMLImageElement,
    ImageData: ImageData,
    Video: HTMLVideoElement,
    createCanvasElement: () => document.createElement('canvas'),
    createImageElement: () => document.createElement('img')
})

4reactions

justadudewhohackscommented, Dec 1, 2018

Hmm, the nodejs check is implemented here. If this check succeeds in the renderer process, then we will have to fix this.

I will investigate in this issue.

Top Results From Across the Web

Unable to use Node.js APIs in renderer process - Stack Overflow

Update: the answer below is a workaround. You should not disable contextIsolation and you should not enable nodeIntegration .

Do not laugh — A simple AI powered game using TensorFlow ...

This part is a workaround to make face-api.js work properly inside an Electron app. In a normal browser environment this would not be...

Process Model | Electron

Each Electron app has a single main process, which acts as the application's entry point. The main process runs in a Node.js environment,...

Electron - BairesDev

Using the framework, developers can build cross-platform desktop apps using JavaScript, CSS, and HTML. It utilizes the Chromium rendering engine and Node.js ......

module not found error can't resolve 'fs' react js - You.com

Use fs module in React.js,node.js, webpack, babel,express ... "dev": "concurrently -k \"cross-env BROWSER=none npm start\" \"npm:electron\"", "electron": ...