Update app.js

app.js

@@ -1,71 +1,176 @@
-// Access the video and canvas elements
-const video = document.getElementById('video');
-const canvas = document.getElementById('outputCanvas');
-const ctx = canvas.getContext('2d');
-const status = document.getElementById('status');
+import DeviceDetector from "https://cdn.skypack.dev/[email protected]";
 
-// Initialize the hand pose detection model
-async function setupHandPoseDetection() {
-  try {
-    // Load the hand pose detection model
-    const model = handPoseDetection.SupportedModels.MediaPipeHands;
-    const detectorConfig = {
-      runtime: 'tfjs', // Use TensorFlow.js runtime
-      modelType: 'full' // Choose between 'lite' or 'full'
-    };
-    const detector = await handPoseDetection.createDetector(model, detectorConfig);
+// Uso: testSupport({client?: string, os?: string}[])
+// Client e os são expressões regulares.
+// Veja: https://cdn.jsdelivr.net/npm/[email protected]/README.md para
+// valores legais para client e os
+testSupport([
+  {client: 'Chrome'},
+]);
 
-    status.textContent = 'Model loaded!';
-
-    // Start video stream
-    await setupCamera();
-
-    // Detect hands in real-time
-    detectHands(detector);
-  } catch (error) {
-    console.error('Error loading the model:', error);
-    status.textContent = 'Failed to load model.';
+function testSupport(supportedDevices:{client?: string; os?: string;}[]) {
+  const deviceDetector = new DeviceDetector();
+  const detectedDevice = deviceDetector.parse(navigator.userAgent);
+  let isSupported = false;
+  for (const device of supportedDevices) {
+    if (device.client !== undefined) {
+      const re = new RegExp(`^${device.client}$`);
+      if (!re.test(detectedDevice.client.name)) {
+        continue;
+      }
+    }
+    if (device.os !== undefined) {
+      const re = new RegExp(`^${device.os}$`);
+      if (!re.test(detectedDevice.os.name)) {
+        continue;
+      }
+    }
+    isSupported = true;
+    break;
+  }
+  if (!isSupported) {
+    alert(`Esta demonstração, rodando em ${detectedDevice.client.name}/${detectedDevice.os.name}, ` +
+          `não é bem suportada no momento, continue por sua conta e risco.`);
   }
 }
 
-// Set up the camera feed
-async function setupCamera() {
-  const stream = await navigator.mediaDevices.getUserMedia({ video: true });
-  video.srcObject = stream;
-  return new Promise((resolve) => {
-    video.onloadedmetadata = () => {
-      resolve(video);
-    };
-  });
-}
+const controls = window;
+const drawingUtils = window;
+const mpFaceMesh = window;
+const config = {locateFile: (file) => {
+  return `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@` +
+         `${mpFaceMesh.VERSION}/${file}`;
+}};
 
-// Detect hands and draw keypoints
-async function detectHands(detector) {
-  if (video.readyState === video.HAVE_ENOUGH_DATA) {
-    // Clear the canvas
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+// Nossos quadros de entrada virão daqui.
+const videoElement =
+    document.getElementsByClassName('input_video')[0] as HTMLVideoElement;
+const canvasElement =
+    document.getElementsByClassName('output_canvas')[0] as HTMLCanvasElement;
+const controlsElement =
+    document.getElementsByClassName('control-panel')[0] as HTMLDivElement;
+const canvasCtx = canvasElement.getContext('2d')!;
 
-    // Detect hands in the video frame
-    const hands = await detector.estimateHands(video);
+/**
+ * Opções da solução.
+ */
+const solutionOptions = {
+  selfieMode: true,
+  enableFaceGeometry: false,
+  maxNumFaces: 1,
+  refineLandmarks: false,
+  minDetectionConfidence: 0.5,
+  minTrackingConfidence: 0.5
+};
 
-    // Draw keypoints on the canvas
-    if (hands.length > 0) {
-      hands.forEach((hand) => {
-        const keypoints = hand.keypoints;
-        keypoints.forEach((keypoint) => {
-          const { x, y } = keypoint;
-          ctx.beginPath();
-          ctx.arc(x, y, 5, 0, 2 * Math.PI); // Draw a circle at each keypoint
-          ctx.fillStyle = 'red';
-          ctx.fill();
-        });
-      });
+// Adicionaremos isso ao nosso painel de controle mais tarde, mas salvaremos aqui para que possamos
+// chamar tick() cada vez que o gráfico for executado.
+const fpsControl = new controls.FPS();
+
+// Otimização: Desative o spinner animado após sua animação de ocultação ser concluída.
+const spinner = document.querySelector('.loading')! as HTMLDivElement;
+spinner.ontransitionend = () => {
+  spinner.style.display = 'none';
+};
+
+function onResults(results: mpFaceMesh.Results): void {
+  // Ocultar o spinner.
+  document.body.classList.add('loaded');
+
+  // Atualizar a taxa de quadros.
+  fpsControl.tick();
+
+  // Desenhar as sobreposições.
+  canvasCtx.save();
+  canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
+  canvasCtx.drawImage(
+      results.image, 0, 0, canvasElement.width, canvasElement.height);
+  if (results.multiFaceLandmarks) {
+    for (const landmarks of results.multiFaceLandmarks) {
+      drawingUtils.drawConnectors(
+          canvasCtx, landmarks, mpFaceMesh.FACEMESH_TESSELATION,
+          {color: '#C0C0C070', lineWidth: 1});
+      drawingUtils.drawConnectors(
+          canvasCtx, landmarks, mpFaceMesh.FACEMESH_RIGHT_EYE,
+          {color: '#FF3030'});
+      drawingUtils.drawConnectors(
+          canvasCtx, landmarks, mpFaceMesh.FACEMESH_RIGHT_EYEBROW,
+          {color: '#FF3030'});
+      drawingUtils.drawConnectors(
+          canvasCtx, landmarks, mpFaceMesh.FACEMESH_LEFT_EYE,
+          {color: '#30FF30'});
+      drawingUtils.drawConnectors(
+          canvasCtx, landmarks, mpFaceMesh.FACEMESH_LEFT_EYEBROW,
+          {color: '#30FF30'});
+      drawingUtils.drawConnectors(
+          canvasCtx, landmarks, mpFaceMesh.FACEMESH_FACE_OVAL,
+          {color: '#E0E0E0'});
+      drawingUtils.drawConnectors(
+          canvasCtx, landmarks, mpFaceMesh.FACEMESH_LIPS, {color: '#E0E0E0'});
+      if (solutionOptions.refineLandmarks) {
+        drawingUtils.drawConnectors(
+            canvasCtx, landmarks, mpFaceMesh.FACEMESH_RIGHT_IRIS,
+            {color: '#FF3030'});
+        drawingUtils.drawConnectors(
+            canvasCtx, landmarks, mpFaceMesh.FACEMESH_LEFT_IRIS,
+            {color: '#30FF30'});
+      }
     }
   }
-
-  // Repeat detection
-  requestAnimationFrame(() => detectHands(detector));
+  canvasCtx.restore();
 }
 
-// Initialize the application
-setupHandPoseDetection();
+const faceMesh = new mpFaceMesh.FaceMesh(config);
+faceMesh.setOptions(solutionOptions);
+faceMesh.onResults(onResults);
+
+// Apresentar um painel de controle através do qual o usuário pode manipular as opções da solução.
+new controls
+    .ControlPanel(controlsElement, solutionOptions)
+    .add([
+      new controls.StaticText({title: 'MediaPipe Face Mesh'}),
+      fpsControl,
+      new controls.Toggle({title: 'Modo Selfie', field: 'selfieMode'}),
+      new controls.SourcePicker({
+        onFrame:
+            async (input: controls.InputImage, size: controls.Rectangle) => {
+              const aspect = size.height / size.width;
+              let width: number, height: number;
+              if (window.innerWidth > window.innerHeight) {
+                height = window.innerHeight;
+                width = height / aspect;
+              } else {
+                width = window.innerWidth;
+                height = width * aspect;
+              }
+              canvasElement.width = width;
+              canvasElement.height = height;
+              await faceMesh.send({image: input});
+            },
+      }),
+      new controls.Slider({
+        title: 'Número Máximo de Rostos',
+        field: 'maxNumFaces',
+        range: [1, 4],
+        step: 1
+      }),
+      new controls.Toggle(
+        {title: 'Refinar Pontos de Referência', field: 'refineLandmarks'}),
+      new controls.Slider({
+        title: 'Confiança Mínima de Detecção',
+        field: 'minDetectionConfidence',
+        range: [0, 1],
+        step: 0.01
+      }),
+      new controls.Slider({
+        title: 'Confiança Mínima de Rastreamento',
+        field: 'minTrackingConfidence',
+        range: [0, 1],
+        step: 0.01
+      }),
+    ])
+    .on(x => {
+      const options = x as mpFaceMesh.Options;
+      videoElement.classList.toggle('selfie', options.selfieMode);
+      faceMesh.setOptions(options);
+    });