From 69f400daa3e680859fb223e8366d2014e1f82252 Mon Sep 17 00:00:00 2001 From: Lucas Gomes Santana Date: Thu, 7 Aug 2025 19:40:34 -0300 Subject: [PATCH 1/2] Fixing the eventListener bug --- index.html | 2 +- script.js | 49 +++++++++++++++++++++++++++++++------------------ 2 files changed, 32 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 167cadd..7143e1b 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,6 @@ - + \ No newline at end of file diff --git a/script.js b/script.js index e4ba013..ec75bb4 100644 --- a/script.js +++ b/script.js @@ -8,24 +8,37 @@ Promise.all([ ]).then(startVideo) function startVideo() { - navigator.getUserMedia( - { video: {} }, - stream => video.srcObject = stream, - err => console.error(err) - ) + navigator.mediaDevices.getUserMedia({ video: {} }) + .then(stream => { + video.srcObject = stream; + video.onloadedmetadata = () => { + video.play().catch(err => console.log("Error to play the video:", err)); + }; + }) + .catch(err => console.error("Error on camera:", err)); } -video.addEventListener('play', () => { - const canvas = faceapi.createCanvasFromMedia(video) - document.body.append(canvas) - const displaySize = { width: video.width, height: video.height } - faceapi.matchDimensions(canvas, displaySize) +video.addEventListener('playing', () => { // Replacing 'play' for 'playing' + console.log("Vídeo pronto para reprodução!"); + 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() - const resizedDetections = faceapi.resizeResults(detections, displaySize) - canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height) - faceapi.draw.drawDetections(canvas, resizedDetections) - faceapi.draw.drawFaceLandmarks(canvas, resizedDetections) - faceapi.draw.drawFaceExpressions(canvas, resizedDetections) - }, 100) -}) \ No newline at end of file + try { + const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()) + .withFaceLandmarks() + .withFaceExpressions(); + + const resizedDetections = faceapi.resizeResults(detections, displaySize); + canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height); + faceapi.draw.drawDetections(canvas, resizedDetections); + faceapi.draw.drawFaceLandmarks(canvas, resizedDetections); + faceapi.draw.drawFaceExpressions(canvas, resizedDetections); + + } catch (err) { + console.error("Error on face detection:", err); + } + }, 100); +}); \ No newline at end of file From 09bf6c10c0b4e20eae0368822ba98319a254d9a4 Mon Sep 17 00:00:00 2001 From: Lucas Gomes Santana Date: Fri, 8 Aug 2025 19:04:17 -0300 Subject: [PATCH 2/2] Update script.js --- script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index ec75bb4..12d019f 100644 --- a/script.js +++ b/script.js @@ -19,7 +19,7 @@ function startVideo() { } video.addEventListener('playing', () => { // Replacing 'play' for 'playing' - console.log("Vídeo pronto para reprodução!"); + console.log("Video playing"); const canvas = faceapi.createCanvasFromMedia(video); document.body.append(canvas); const displaySize = { width: video.width, height: video.height }; @@ -41,4 +41,4 @@ video.addEventListener('playing', () => { // Replacing 'play' for 'playing' console.error("Error on face detection:", err); } }, 100); -}); \ No newline at end of file +});