Pasé por el documental de media pipe y usé su código para conectar y jugar con javascript de vainilla, el código no parece funcionar bien con eso, y el problema ocurre si, por ejemplo, también tuve que cambiar un poco en el código original para adaptarlo a mis programas. , y terminó bien, pero después de implementar Ruby on Rails y sigo tratando de averiguar qué sucede
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_detection/face_detection.js" crossorigin="anonymous"></script> </head> <body> <div class="container"> <video class="input_video"></video> <canvas class="output_canvas" width="1280px" height="720px"></canvas> </div> <script type="text/javascript" src="script.js"></script> </body> </html> const videoElement = document.getElementsByClassName('input_video')[0]; const canvasElement = document.getElementsByClassName('output_canvas')[0]; const canvasCtx = canvasElement.getContext('2d'); const drawingUtils = window function onResults(results) { // Draw the overlays. canvasCtx.save(); canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height); canvasCtx.drawImage( results.image, 0, 0, canvasElement.width, canvasElement.height); if (results.detections.length > 0) { drawingUtils.drawRectangle( canvasCtx, results.detections[0].boundingBox, {color: 'cyan', lineWidth: 4, fillColor: '#00000000'}); drawingUtils.drawLandmarks(canvasCtx, results.detections[0].landmarks, { color: 'purple', radius: 3, }); } canvasCtx.restore(); } const faceDetection = new FaceDetection({locateFile: (file) => { return `https://cdn.jsdelivr.net/npm/@mediapipe/face_detection@0.4/${file}`; }}); faceDetection.setOptions({ //modelSelection: 0, model: "short", minDetectionConfidence: 0.50 }); faceDetection.onResults(onResults); const camera = new Camera(videoElement, { onFrame: async () => { await faceDetection.send({image: videoElement}); }, width: 1280, height: 720 }); camera.start();