Clicks on cavas are broken

Bugs
,
1

When clicking on canvas that is used by DeepAR, we get an error

image
image840×140 28.1 KB

2

Hello, could you give us more info which example are you running?

3

This is from our code.
It happens when you use <video> as an video source, and render DeepAR on <canvas>.
Clicks on this canvas are broken, even if you don’t have onClick event handler

4

Have you tried registering canvas listeners? Here is some sample code.

             var touchOccurring = false;
            
            const canvasRect = canvas.getBoundingClientRect();
            const touchInfo = (e, type) => ({
              x: e.clientX - canvasRect.left,
              y: e.clientY - canvasRect.top,
              type
            });

            registerCanvasListener('mousedown', e => {
              if (!touchOccurring) {
                deepAR.touchOccurred(touchInfo(e, ARTouchType.Start))
                touchOccurring = true;
              }
            });
            registerCanvasListener('touchstart', e => {
              if (!touchOccurring) {
                deepAR.touchOccurred(touchInfo(e.touches[0], ARTouchType.Start))
                touchOccurring = true;
              }
            });
            registerCanvasListener('mousemove', e => {
              if (touchOccurring) {
                deepAR.touchOccurred(touchInfo(e, ARTouchType.Move));
              }
            });
            registerCanvasListener('touchmove', e => {
              if (touchOccurring) {
                e.preventDefault(); // Prevent scrolling.
                deepAR.touchOccurred(touchInfo(e.touches[0], ARTouchType.Move))
              }
            });
            registerCanvasListener('mouseup', e => {
              if (touchOccurring) {
                deepAR.touchOccurred(touchInfo(e, ARTouchType.End))
                touchOccurring = false;
              }
            });
            registerCanvasListener('mouseout', e => {
              if (touchOccurring) {
                //deepAR.touchOccurred(touchInfo(e, ARTouchType.End))
               // touchOccurring = false;
              }
            });
            registerCanvasListener('touchend', e => {
              if (touchOccurring) {
                deepAR.touchOccurred(touchInfo(e.touches[0], ARTouchType.End))
                touchOccurring = false;
              }
            });

        }
      });
5

Is it possible to do this in react’s style?

<canvas onClick={...} ... />
6

deepAR.touchOccured is deprecated in 5.4.0

7

Sorry i assumed you were using an older SDK. If you are using the latest SDK the touches should just work automatically. Can you share your source code?

8

Elements in use:

<div>
      <video ref={localVideoRef} ... />
      <canvas ref={localVideoCanvasRef} ... />
</div>

DeepAR initialization:

  useEffect(() => {
    const setup = async () => {
      if (localVideoRef.current && localVideoCanvasRef.current) {
        const deepAR = await deeparModule.initialize({
          licenseKey: "...",
          canvas:  localVideoCanvasRef.current,
          additionalOptions: {
            cameraConfig: {
              disableDefaultCamera: true
            }
          },
        })
        deepAR.setVideoElement(localVideoRef.current)
        await deepAR.switchEffect("https://cdn.jsdelivr.net/npm/deepar/effects/aviators")
      }
    }
    setup()
  }, [localVideoRef, localVideoCanvasRef])
9

Any progress on this issue?

10

Your setup code looks okay, what exactly are you trying do to with touches?

11

Swap camera on touch

1 Like
12

Noticed recently: this only happens with touches. Testing with chrome dev tools in iPhone mode.
Clicks on desktop work fine.

13

Fixed in most recent 5.4.3 version

14

Thanks for letting us know