Блог

Мне пришлось пройти через документальный фильм media pipe и использовать их код для подключения и игры с ванильным javascript, код, похоже, не очень хорошо работает с этим, и проблема возникает, если, скажем, я также изменил исходный код в соответствии с моими программами, и все закончилось хорошо, но после того, как я развернулся в ruby on rails и все еще пытаюсь понять, что произойдет

 lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt;  lt;meta charset="utf-8"gt;  lt;script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"gt;lt;/scriptgt;  lt;script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"gt;lt;/scriptgt;  lt;script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"gt;lt;/scriptgt;  lt;script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_detection/face_detection.js" crossorigin="anonymous"gt;lt;/scriptgt; lt;/headgt;  lt;bodygt;  lt;div class="container"gt;  lt;video class="input_video"gt;lt;/videogt;  lt;canvas class="output_canvas" width="1280px" height="720px"gt;lt;/canvasgt;  lt;/divgt;  lt;script type="text/javascript" src="script.js"gt;lt;/scriptgt; lt;/bodygt; lt;/htmlgt;  

 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 gt; 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) =gt; {  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 () =gt; {  await faceDetection.send({image: videoElement});  },  width: 1280,  height: 720 }); camera.start();