Блог

Я использую TensorflowJs и реагирую на интерфейсы на основе жестов. Я сопоставил курсор изображения с моим мобильным телефоном, и когда я перемещаю свой мобильный телефон по каналу камеры, он соответствующим образом перемещает элемент изображения.

Модель обнаружения объектов выполняется в компоненте react следующим образом:

 const runCoco = async () => {
    const net = await cocossd.load();
    console.log("COCOSSD model loaded.");
    //  Loop and detect hands
    setInterval(() => {
      detect(net);
    }, 10);
  };

  useEffect(runCoco,[]);
 

   //public variables
  const webcamRef = useRef(null);
  const canvasRef = useRef(null);
  const xScalar = 2.5;
  const yScalar = 1.7;
  const yShift = 389.203119516;
 

Я перемещаю элемент курсора на большую кнопку в своей программе, и когда я хочу нажать на элемент, я помещаю пластиковую бутылку в рамку (это был просто быстрый способ пройти тестирование). Когда бутылка обнаружена,я вызываю document.elementFromPoint(x, y) и в это время отправляю событие щелчка на элемент под курсором.

  const detect = async (net) => {
    // Check data is available
    if (
      typeof webcamRef.current !== "undefined" amp;amp;
      webcamRef.current !== null amp;amp;
      webcamRef.current.video.readyState === 4
    ) {
      // Get Video Properties
      const cursor = document.getElementById('cursor');  
      const video = webcamRef.current.video;
      const videoWidth = webcamRef.current.video.videoWidth;
      const videoHeight = webcamRef.current.video.videoHeight;

      // Set video width
      webcamRef.current.video.width = videoWidth;
      webcamRef.current.video.height = videoHeight;

      // Make Detections
      const obj = await net.detect(video);
      //console.log(obj);
        
      try
      {
        //all this manipulation below was just a good way I found to convert the bounding box outputs 
        //into comfortable larger x and y coordinates for the user to navigate with.
        x = (-1 * (((obj[0]['bbox'][0]   obj[0]['bbox'][2] ) / 2)))   640;
        y = obj[0]['bbox'][1] - 200; ///200px higher than the top of the bounding box
        
        x = x * xScalar;
        y = (y * yScalar);
      
        if (obj[0]['class'] === "cell phone" amp;amp; obj[0]['score'] > 0.8 )
        {
          prevX = x;
          prevY = y;
          cursor.style.transform = `translate(${ x }px, ${ y }px)`;
        }
        else if ( obj[0]['class'] === "bottle" )
        {
          
          console.log("");

          x = document.querySelector('#cursor').getBoundingClientRect().left;
          y = document.querySelector('#cursor').getBoundingClientRect().top;
          
          console.log( " Model Values: "   prevX   ", "   (prevY   yShift));
          console.log( " Cursor Values: "   x   " "   y );

          var ev = new MouseEvent('click', {
              'view': window,
              'bubbles': true,
              'cancelable': true,
              'screenX': x,
              'screenY': y
          });

          // x = 305.45550537109375;
          // y = 271.7203674316406;

          console.log( " Just before click: "   x   " "   y );
          var el = document.elementFromPoint( Math.trunc(x), Math.trunc(y) );
          console.log(" After click: "   x   " "   y)

          el.dispatchEvent(ev);
        }

      }
      catch (err)
      {
        console.error(err);
      }
    }
      
  }
 

Вот тут-то и возникает проблема:
Когда я передаю здесь буквальные значения, это работает. кнопка нажата, и все хорошо.

 x = 305.45550537109375;
y = 271.7203674316406;
 

 var el = document.elementFromPoint( Math.trunc(x), Math.trunc(y) ); 
    el.dispatchEvent(ev);
 

Но если я буду кормить его таким образом:

 x = document.querySelector('#cursor').getBoundingClientRect().left;
y = document.querySelector('#cursor').getBoundingClientRect().top;
 

Щелчок не зарегистрирован, отправленное событие ничего не делает.

Вот изображение некоторых выходов консоли, с помощью которых я пытался отладить ее:

Значения почти не отличаются, поэтому я действительно не могу понять, почему это не работает.

Это изображение кнопки и курсора в программе, если это помогает