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

Created on 1 Dec 2018 · 13Comments · Source: justadudewhohacks/face-api.js

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!

Source

Frixoe

Most helpful comment

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')
})

justadudewhohacks on 2 Dec 2018

👍6 ❤1

All 13 comments

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.

justadudewhohacks on 1 Dec 2018

👍4

@justadudewhohacks Thank you! And it does seem like the NodeJS check succeeds in the renderer process.

Frixoe on 2 Dec 2018

@justadudewhohacks Please get this fixed as soon as possible. I really need this to work for a project.

Thank you.

Frixoe on 2 Dec 2018

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')
})

justadudewhohacks on 2 Dec 2018

👍6 ❤1

Thanks so much!

Frixoe on 2 Dec 2018

It worked!

Frixoe on 2 Dec 2018

Should be fixed now, see my answer in this issue.

I think the renderer process environment should now get initialized correctly, if you want to give face-api.js v0.16.2 a try.

I also exported createBrowserEnv and createNodejsEnv, so in case there are still issues with incorrect initialization one can easily fix this by faceapi.env.setEnv(faceapi.env.createBrowserEnv()) for example.

justadudewhohacks on 13 Dec 2018

Unfortunately, it didn’t work. I updated the module, removed the monkey patch, then tested my app, and it gave me the same error again :(

Frixoe on 20 Dec 2018

@justadudewhohacks are there any basic examples on using face-api with electron? I can't get it working and would really like to use it in a project