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>