Skip to main content
Agregando un enlace a los módulos
Origen Enlace

Aclaro que utilizo buevue, e hice el import dentro de un componente en el script, algo así:

Esto debido a que una vez trabajé con vue-select y los estilos solo me funcionaron importando la librería dentro del complemento, y quería evitar problemas, pero no estoy seguro si se puede utilizar dentro de resources/js/app.js un window.faceapi = require('face-api.js');. Luego de hacer eso cada vez que compilaba me daba el siguiente error:

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>App<title>Laravel Emotiva- :v<Face-Api</title>
        <link rel="stylesheet" href="{{asset('css/app.css')}}">
    </head>
    <body class="antialiased dark">
        <div id="app">
            <div class="bg-red-400 dark:bg-orange-400 w-full text-center text-white p-4 flex flex-wrap space-x-4">
                <h1 class="text-5xl">App Emotiva</h1>
                @include('partials.nav')
            </div>

            <camera-component></camera-component>
        </div>

        <script src="{{asset('js/app.js')}}"></script>
    </body>
</html>

Modulos

Aclaro que utilizo bue, e hice el import dentro de un componente en el script, algo así:

Esto debido a que una vez trabajé con vue-select y los estilos solo me funcionaron importando la librería dentro del complemento, pero no estoy seguro si se puede utilizar dentro de resources/js/app.js un window.faceapi = require('face-api.js');. Luego de hacer eso cada vez que compilaba me daba el siguiente error:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>App Emotiva :v</title>
        <link rel="stylesheet" href="{{asset('css/app.css')}}">
    </head>
    <body class="antialiased dark">
        <div id="app">
            <div class="bg-red-400 dark:bg-orange-400 w-full text-center text-white p-4 flex flex-wrap space-x-4">
                <h1 class="text-5xl">App Emotiva</h1>
                @include('partials.nav')
            </div>

            <camera-component></camera-component>
        </div>

        <script src="{{asset('js/app.js')}}"></script>
    </body>
</html>

Aclaro que utilizo vue, e hice el import dentro de un componente en el script, algo así:

Esto debido a que una vez trabajé con vue-select y los estilos solo me funcionaron importando la librería dentro del complemento, y quería evitar problemas, pero no estoy seguro si se puede utilizar dentro de resources/js/app.js un window.faceapi = require('face-api.js');. Luego de hacer eso cada vez que compilaba me daba el siguiente error:

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel - Face-Api</title>
        <link rel="stylesheet" href="{{asset('css/app.css')}}">
    </head>
    <body class="antialiased dark">
        <div id="app">
            <div class="bg-red-400 dark:bg-orange-400 w-full text-center text-white p-4 flex flex-wrap space-x-4">
                <h1 class="text-5xl">App Emotiva</h1>
                @include('partials.nav')
            </div>

            <camera-component></camera-component>
        </div>

        <script src="{{asset('js/app.js')}}"></script>
    </body>
</html>

Modulos

Origen Enlace

Solución:

Primero que nada cambie import faceapi from 'face-api.js'; por import * as faceapi from 'face-api.js'; como me sugirió @porloscerrosΨ.

Aclaro que utilizo bue, e hice el import dentro de un componente en el script, algo así:

<template>
</template>
<script>
    import * as faceapi from 'face-api.js';
    export default {
        
    }
</script>

Esto debido a que una vez trabajé con vue-select y los estilos solo me funcionaron importando la librería dentro del complemento, pero no estoy seguro si se puede utilizar dentro de resources/js/app.js un window.faceapi = require('face-api.js');. Luego de hacer eso cada vez que compilaba me daba el siguiente error:

WARNING in ./node_modules/face-api.js/build/es6/env/createFileSystem.js 5:17-30 Module not found: Error: Can't resolve 'fs' in 'C:\Users\elias\Documents\PC_IV\Programacion_Computacional_IV\proyecto_final\node_modules\face-api.js\build\es6\env'

Para solucionarlo agregué la siguiente línea dentro de el archivo webpack.mix.js

mix.webpackConfig({ resolve: { fallback: { fs: false } }});

Ahora el problema eran los módulos, pero eso es sencillo, dentro de la carpeta storage/app/public agrego una carpeta modules donde agrego todos los módulos, dentro de la carpeta config/ se encuentra filesystems.php, asegurarse de que exista las siguientes líneas de código:

'links' => [
    public_path('storage') => storage_path('app/public'),
],

Y si no existe ejecutar el siguiente comando dentro de consola (Yo uso windows, no estoy seguro si el comando puede cambiar según el SO):

>php artisan serve

Y al referenciar los modulos mediante loadFromUri se debe hacer así ('storage/modules').

Dejaré todo el código del componente por si les interesa:

CameraComponent.vue

<template>
    <div id="camera" class="border border-dark rounded-lg bg-slate-300 h-64 w-64 flex justify-center items-center">
        <video id="video" width="400" height="300" autoplay muted ref="video"></video>
    </div>
</template>

<script>
    import * as faceapi from 'face-api.js';
    export default {
        data() {
            return {
            }
        },
        methods: {
            startVideo() {
                const video = this.$refs.video;
                console.log(video, this.$refs.video);
                navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
                console.log(navigator.getUserMedia);
                if (navigator.getUserMedia) {
                    navigator.mediaDevices.getUserMedia({
                        video: true
                    }).then(
                        stream => (video.srcObject = stream),
                        err => console.log(err)
                    );
                }
                video.addEventListener('play', function () {
                    const canvas = faceapi.createCanvasFromMedia(video);
                    document.body.append(canvas);
                    const displaySize = {
                        width: video.width,
                        height: video.height
                    };
                    faceapi.matchDimensions(canvas, displaySize);
                    setInterval(async () => {
                        const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions();
                        console.log(detections);
                        const resizedDetections = faceapi.resizeResults(detections, displaySize);
                        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
                        faceapi.draw.drawDetections(canvas, resizedDetections);
                        faceapi.draw.drawFaceExpressions(canvas, resizedDetections);
                        faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
                    }, 100);
                });
            },
            loadModels() {
                Promise.all([
                    faceapi.nets.tinyFaceDetector.loadFromUri('/storage/models'),
                    faceapi.nets.faceLandmark68Net.loadFromUri('/storage/models'),
                    faceapi.nets.faceRecognitionNet.loadFromUri('/storage/models'),
                    faceapi.nets.faceExpressionNet.loadFromUri('/storage/models'),
                    faceapi.nets.ageGenderNet.loadFromUri('/storage/models'),
                ]).then(this.startVideo).catch(err => console.log(err));
            }
        },
        mounted() {
            this.loadModels();
        }
    }
</script>

app.js

require('./bootstrap');

window.Vue = require('vue').default;

Vue.component('camera-component', require('./components/CameraComponent.vue').default);

const app = new Vue({
    el: '#app',
    data: {
        
    },
});
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>App Emotiva :v</title>
        <link rel="stylesheet" href="{{asset('css/app.css')}}">
    </head>
    <body class="antialiased dark">
        <div id="app">
            <div class="bg-red-400 dark:bg-orange-400 w-full text-center text-white p-4 flex flex-wrap space-x-4">
                <h1 class="text-5xl">App Emotiva</h1>
                @include('partials.nav')
            </div>

            <camera-component></camera-component>
        </div>

        <script src="{{asset('js/app.js')}}"></script>
    </body>
</html>