Uncaught (in promise) TypeError: faceapi.allFacesMtcnn(...).map is not a function

I’m using VueJS. How can I fix these errors?

Code (VueJS)

onPlay: async function(videoEl) {
                if(videoEl.paused || videoEl.ended || !modelLoaded)
                    return false;
                let minFaceSize = 200;
                const { width, height } = faceapi.getMediaDimensions(videoEl);
                const canvas = document.getElementById('inputVideo');
                canvas.width = width;
                canvas.height = height;
                const mtcnnParams = {
                    minFaceSize
                };
                const fullFaceDescriptions = (faceapi.allFacesMtcnn(videoEl, mtcnnParams)).map(fd => fd.forSize(width, height));
                fullFaceDescriptions.forEach(({ detection, landmarks, descriptor }) => {
                    faceapi.drawDetection('overlay', [detection], { withScore: false });
                    faceapi.drawLandmarks('overlay', landmarks.forSize(width, height), { lineWidth: 4, color: 'red' });
                    const bestMatch = getBestMatch(trainDescriptorsByClass, descriptor);
                    const text = `${bestMatch.distance < maxDistance ? bestMatch.className : 'unkown'} (${bestMatch.distance})`;
                    const { x, y, height: boxHeight } = detection.getBox();
                    faceapi.drawText(
                    canvas.getContext('2d'),
                    x,
                    y + boxHeight,
                    text,
                    Object.assign(faceapi.getDefaultDrawOptions(), { color: 'red', fontSize: 16 })
                    )
                });
                setTimeout(() => onPlay(videoEl), 150);
            },
            run: async function() {
                await faceapi.loadMtcnnModel("/img/face-api/weights");
                await faceapi.loadFaceRecognitionModel("/img/face-api/weights/");
                trainDescriptorsByClass = initTrainDescriptorsByClass(faceapi.recognitionNet);
                modelLoaded = true;
                const videoEl = document.getElementById('inputVideo');
                navigator.getUserMedia(
                    { video: {} },
                    stream => videoEl.srcObject = stream,
                    err => console.error(err)
                );
                this.onPlay(videoEl);
            }

Code (HTML)

<div style="position: relative" class="margin">
        <video ref="inputVideo" onload="onPlay(this)" id="inputVideo" autoplay="true" muted></video>
        <canvas id="overlay" />
</div>

[chtsngn]

Ok. Thanks for help.

[justadudewhohacks]

You could use multiple images to compute reference descriptors and then compute the average of the euclidean distances between all reference descriptors and a input descriptor.

Usually, you should already get quite good results using a single image only. Can you share the image/s you are using as reference and the images of the faces, you are trying to recognize.