How does one use the npm module?

[blurymind]

You have this as a package on npm, but there are zero instructions how to initiate or use it as a module. Can you please update your page on npm as well as the examples here, so we have a bare idea of how to access the methods?

I am trying to use it with electron, so I need to import it with the require method

[xavierjs]

Hi,

The NPM module is not maintained anymore.
Plz use the ES6 version included in this repository.

I did an electron app 2 months ago so it should work without any problem.
You can take a look at this issue for further details: #24

best,
Xavier

[blurymind]

so can it be used with the require method? I think that you need to take it off from npm if it's not functional when used with it

[xavierjs]

It is not very hard to use, you can find help on the readme.md of this github and the issue I submitted. If it is not clear a pull request would be welcome :).

I don't care of NPM anymore, it is already a museum for abandonware and a nice bloatware factory.

[blurymind]

a lot of the software I contribute to uses npm, its still a great way to fetch and update modules. There is alot of abandonware, but npm tracks how often modules are updated and reduces their score when that is low

I wouldnt have found your library without npm

electron fiddle - that is officialy developed by the electron guys relies on npm - so we cant use facefilter in it atm- because its module is not usable via require('facefilter'), but because you have it listed as an npm package- that makes it seem like a bug with the library

[blurymind]

In any case I love your library and want to thank you for working on it :)

[xavierjs]

Thanks :) I will still add a big warning on the NPM page of facefilter. There are great packages on NPM (Electron is great), I was just often disappointed by packages doing small stuffs but requiring so many dependancies that they bloated the application. Maybe a more visible way to display the size of the package + dependancies or a recursive dependancies display would help to avoid such packages...

[blurymind]

one of the reasons I decided to go with your library is the lack of dependencies. I think that you've done a great job and it is a shame that the npm is not updated.

Btw I managed to get it to work by manually downloading the ES6 js file and including it like this:

const faceFilter =require('./lib/jeelizFaceFilterES6.js')

faceFilter.init({
    canvasId: 'jeeFaceFilterCanvas',
    NNCpath: '../../../dist/', //path to JSON neural network model (NNC.json by default)
    callbackReady: function(errCode, spec){
        if (errCode){
            console.log('AN ERROR HAPPENS. ERROR CODE =', errCode);
            return;
        }
        [init scene with spec...]
        console.log('INFO: JEEFACEFILTERAPI IS READY');
    }, //end callbackReady()

    //called at each render iteration (drawing loop)
    callbackTrack: function(detectState){
        //render your scene here
        [... do something with detectState]
    } //end callbackTrack()
});//end init call

In case some other electron guys are interested

Perhaps to update the npm it wont be that hard, just update package.json :) it will save some confusion

[xavierjs]

Thank you very much, I pushed an update to the readme.md with a link to the issue
( https://github.com/jeeliz/jeelizFaceFilter#using-es6 )
I also updated the NPM, but it is still not obvious to maintain all Jeeliz libraries ( https://github.com/jeeliz ) and we are only 2 developers. We also have to go on improving the tech (especially in AR) and explore new ways... That's also why I am thinking about stopping some distributions channels where there are fewer people.

best,
Xavier

[blurymind]

thank you for updating it :) 👍

[blurymind]

@xavierjs will
const faceFilter =require('facefilter')
return jeelizFaceFilterES6.js though?
I was able to do it by copying the file to a directory and requiring it via the relative path, which kind of renders npm install pointless.
After doing npm install facefilter, the developer would expect to get it from the installed modules folder via const faceFilter =require('facefilter')

[bjlaa]

Hi,

If you want to require the ES6 version while using the npm module you can use:

const faceFilter = require('facefilter/dist/jeelizFaceFilterES6.js')

[blurymind]

Is there some way to make it require it by default when doing
const faceFilter = require('facefilter')

From my understanding facefilter wont work if you dont require jeelizFaceFilterES6.js with nodejs.
If not, it would be worth updating the require example again

[xavierjs]

gotcha bro I think I have to play with the main option of the package.json file (https://docs.npmjs.com/files/package.json). I will try...

[xavierjs]

I have updated the NPM package and put "main": "dist/jeelizFaceFilterES6.js", in the package.json. I hope it will nail it.

best,
Xavier

[blurymind]

this should nail it! Thank you @xavierjs =) 👍

[matiasjaure]

Hi Guys, Is there any react sample working? I'm getting a compiler error when trying to include jeelizFaceFilterES6.js

[xavierjs]

https://github.com/jeeliz/jeelizFaceFilter#using-the-es6-module
There are some closed issue about react integration.
It is possible to integrate it with react. https://jeeliz.com/sunglasses is based on react.
You are webcome to submit a PR with the boilerplate + react. I am currently working on other stuffs and my pipeline is full.

[matiasjaure]

I was able to make it initialize, the camera is on but nothing is being rendered, any hints?

[matiasjaure]

https://github.com/jeeliz/jeelizFaceFilter#using-the-es6-module
There are some closed issue about react integration.
It is possible to integrate it with react. https://jeeliz.com/sunglasses is based on react.
You are webcome to submit a PR with the boilerplate + react. I am currently working on other stuffs and my pipeline is full.

Hi! Could I take a look at the way you integrate it? The canvas is not rendering and I don't know what else to try.

[jasonbonfadri]

How can we capture the image?

[xavierjs]

A NPM/React/Three-Fiber boilerplate has been added to the repository: https://github.com/jeeliz/jeelizFaceFilter/tree/master/reactThreeFiberDemo