Face-api.js: TypeError: Illegal constructor.

[Bornlex]

Hi, I get the following error:

TypeError: Illegal constructor.

when I do the following:
const detection = await faceapi.detectSingleFace(video);

video is basically an HTML element (document.getElementById("video-stream"))
I also tried passing an id to the faceapi.detectSingleFace, same error.

I am using node v10.15.0, webpack, babel and React.

I had an error about tensorflow saying that fs module could not be resolved, but I guess this is not related. Just in case...

Here is the full code:

async function detectFaces(video, canvas, width, height) {
    window.logger.log("detectFaces");
    const detection = await faceapi.detectSingleFace(video);
    console.log(detection);
}

function loadVideo(video, canvas, width, height) {
    window.logger.log("loadVideo");
    navigator.mediaDevices.getUserMedia({
        video: {
            width : width,
            height: height
        }
    }).then(function(stream) {
        video.srcObject = stream;
        video.play();
        video.onloadedmetadata = function() {
            detectFaces(video, canvas, width, height);
        }
    }).catch(function(error) {
        console.log(error);
    });
}

Thank you.

[justadudewhohacks]

Hmm, can you post the full stacktrace please.

[ciobanudan97]

Hi , could you tell me how you solve the problem ,pleasee
I have the same error

[step4]

same error here in an electron-vue app:
I'm using the import statement import * as faceapi from "face-api.js";
then

await faceapi.loadSsdMobilenetv1Model("static/models");
let detections = await faceapi.detectAllFaces(this.images[i]);

stacktrace:

C:\Projects\face-blur\node_modules\tfjs-image-recognition-base\build\commonjs\env\createNodejsEnv.js:10 Uncaught (in promise) TypeError: Illegal constructor
    at createCanvasElement (C:\Projects\face-blur\node_modules\tfjs-image-recognition-base\build\commonjs\env\createNodejsEnv.js:10)
    at createCanvas (C:\Projects\face-blur\node_modules\tfjs-image-recognition-base\build\commonjs\dom\createCanvas.js:10)
    at Object.createCanvasFromMedia (C:\Projects\face-blur\node_modules\tfjs-image-recognition-base\build\commonjs\dom\createCanvas.js:22)
    at C:\Projects\face-blur\node_modules\tfjs-image-recognition-base\build\commonjs\dom\NetInput.js:37
    at Array.forEach (<anonymous>)
    at new NetInput (C:\Projects\face-blur\node_modules\tfjs-image-recognition-base\build\commonjs\dom\NetInput.js:22)
    at Object.<anonymous> (C:\Projects\face-blur\node_modules\tfjs-image-recognition-base\build\commonjs\dom\toNetInput.js:53)
    at step (C:\Projects\face-blur\node_modules\tslib\tslib.js:133)
    at Object.next (C:\Projects\face-blur\node_modules\tslib\tslib.js:114)
    at fulfilled (C:\Projects\face-blur\node_modules\tslib\tslib.js:104)
createCanvasElement @ C:\Projects\face-blur\node_modules\tfjs-image-recognition-base\build\commonjs\env\createNodejsEnv.js:10
createCanvas @ C:\Projects\face-blur\node_modules\tfjs-image-recognition-base\build\commonjs\dom\createCanvas.js:10
createCanvasFromMedia @ C:\Projects\face-blur\node_modules\tfjs-image-recognition-base\build\commonjs\dom\createCanvas.js:22
(anonymous) @ C:\Projects\face-blur\node_modules\tfjs-image-recognition-base\build\commonjs\dom\NetInput.js:37
NetInput @ C:\Projects\face-blur\node_modules\tfjs-image-recognition-base\build\commonjs\dom\NetInput.js:22
(anonymous) @ C:\Projects\face-blur\node_modules\tfjs-image-recognition-base\build\commonjs\dom\toNetInput.js:53
step @ C:\Projects\face-blur\node_modules\tslib\tslib.js:133
(anonymous) @ C:\Projects\face-blur\node_modules\tslib\tslib.js:114
fulfilled @ C:\Projects\face-blur\node_modules\tslib\tslib.js:104
Promise rejected (async)
step @ C:\Projects\face-blur\node_modules\tslib\tslib.js:106
(anonymous) @ C:\Projects\face-blur\node_modules\tslib\tslib.js:107
__awaiter @ C:\Projects\face-blur\node_modules\tslib\tslib.js:103
ComposableTask.then @ C:\Projects\face-blur\node_modules\face-api.js\build\commonjs\globalApi\ComposableTask.js:8
VideoPage.vue?10d6:134 Uncaught (in promise) TypeError: Cannot read property 'detectAllFaces' of undefined
    at VueComponent._callee4$ (webpack-internal:///./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/renderer/components/VideoPage.vue?vue&type=script&lang=js&:202:75)
    at tryCatch (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:114:21)
    at step (webpack-internal:///./node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at eval (webpack-internal:///./node_modules/babel-runtime/helpers/asyncToGenerator.js:35:14)
    at new Promise (<anonymous>)
    at new F (webpack-internal:///./node_modules/core-js/library/modules/_export.js:36:28)
    at eval (webpack-internal:///./node_modules/babel-runtime/helpers/asyncToGenerator.js:14:12)
    at VueComponent.detectFaces (webpack-internal:///./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/renderer/components/VideoPage.vue?vue&type=script&lang=js&:223:10)
_callee4$ @ VideoPage.vue?10d6:134
tryCatch @ runtime.js?96cf:62
invoke @ runtime.js?96cf:296
prototype.(anonymous function) @ runtime.js?96cf:114
step @ asyncToGenerator.js?0f75:17
(anonymous) @ asyncToGenerator.js?0f75:35
F @ _export.js?63b6:36
(anonymous) @ asyncToGenerator.js?0f75:14
detectFaces @ VideoPage.vue?10d6:134
_callee$ @ VideoPage.vue?10d6:64
tryCatch @ runtime.js?96cf:62
invoke @ runtime.js?96cf:296
prototype.(anonymous function) @ runtime.js?96cf:114
step @ asyncToGenerator.js?0f75:17
(anonymous) @ asyncToGenerator.js?0f75:28
Promise rejected (async)
step @ asyncToGenerator.js?0f75:27
(anonymous) @ asyncToGenerator.js?0f75:28
Promise resolved (async)
step @ asyncToGenerator.js?0f75:27
(anonymous) @ asyncToGenerator.js?0f75:35
F @ _export.js?63b6:36
(anonymous) @ asyncToGenerator.js?0f75:14
(anonymous) @ VideoPage.vue?10d6:62
emitTwo @ events.js:131
emit @ events.js:214

seems it tries to use the nodejs version, but it should use the browser version

[ciobanudan97]

Yes , I put this in my code and it works:
faceapi.env.monkeyPatch({
Canvas: HTMLCanvasElement,
Image: HTMLImageElement,
ImageData: ImageData,
Video: HTMLVideoElement,
createCanvasElement: () => document.createElement('canvas'),
createImageElement: () => document.createElement('img')
})

[lmeerma]

@ciobanudan97 thanks, that solved my problem. For me the problem only occurred after monkey patching the 'fetch' method. Patching createCanvasElement as described above solved the issue for me.

[k3nnet]

i am facing a similar error . can't seem to resolve it with the above mentioned suggestions . here's the code

`import { Component, Input, ViewChild, ElementRef, AfterViewInit, Inject } from '@angular/core';
import * as faceapi from 'face-api.js';
import {WebcamImage, WebcamInitError, WebcamUtil} from 'ngx-webcam';
import {Subject,Observable} from 'rxjs';
import * as canvas from 'canvas';
import * as $ from 'jquery';
import { DOCUMENT } from '@angular/common';

faceapi.env.monkeyPatch({
Canvas: HTMLCanvasElement,
Image: HTMLImageElement,
ImageData: ImageData,
Video: HTMLVideoElement,
createCanvasElement: () => document.createElement('canvas'),
createImageElement: () => document.createElement('img')
})
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
@Input() cameraName:string = "";
@ViewChild('myImage',{ static: false }) imageInput: ElementRef;
title = 'imageRecognition';

private doc:Document

constructor(@Inject(DOCUMENT) document
) {
this.doc=document;
}

ngOnInit() {
this.loadModels();

}
ngAfterViewInit() {

}

async loadModels() {
// load the models
const MODEL_URL = './assets/models/'

await faceapi.loadSsdMobilenetv1Model(MODEL_URL)
await faceapi.loadFaceLandmarkModel(MODEL_URL)
await faceapi.loadFaceRecognitionModel(MODEL_URL)
const input = this.imageInput.nativeElement
let fullFaceDescriptions = await faceapi.detectAllFaces(input).withFaceLandmarks().withFaceDescriptors()

}

}`

[huangxinjian]

this is reason : https://medium.com/@andreas.schallwig/do-not-laugh-a-simple-ai-powered-game-3e22ad0f8166
@ciobanudan97 for him answer.