Webcam video is not interactive/selectable.

[Ayush0Chaudhary]

This is where I am adding the video

screen recording for the same.

screen-capture.1.mp4

Steps to reproduce:

1. Initialize the canvas && Get stream from you webcam.

The canvas

 const canvas = new fabric.Canvas("canvas", {
      height: height,
      width: width,
      backgroundColor: "#ededed",
    });

    engine.handleCursorMove();
    engine.setCanvas(canvas, width, height);

    fabric.util.requestAnimFrame(function render() {
      canvas.renderAll();
      fabric.util.requestAnimFrame(render);
    });

and stream

    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });

2. Assign stream to a video html element through ref hook

        <video
          ref={ref}
          autoPlay={true}
          height="800"
          width="800"
          style={{ transform: "scaleX(-1)", display: "none" }}
          className="max-w-none h-auto scale-50"
          id={"(video):" + index.toString()}
        ></video>

3. Add the video Element to the canvas

  reRenderCanvas() {
    const engine = this;
    if (!engine.canvas) return;
    const canvas = engine.canvas;
    engine.canvas.remove(...engine.canvas.getObjects());
    for (let i = 0; i < engine.videoElements.length; i++) {
      const element = engine.videoElements[i];
      const videoElement = document.getElementById(
        element.htmlElementId
      ) as HTMLVideoElement;
      if (!isHtmlVideoElement(videoElement)) {
        return;
      }
      const videoFabricObject = new fabric.Image(videoElement, {
        left: element.placement.x,
        top: element.placement.y,
        angle: element.placement.rotation,
        scaleX: element.placement.scaleX,
        scaleY: element.placement.scaleY,
      });
      element.imageObject = videoFabricObject;
      canvas.add(videoFabricObject);
      console.log(videoFabricObject);
    }
  }

[asturur]

@Ayush0Chaudhary if the reproduction case is not available no one will help

[Ayush0Chaudhary]

I wrote the reproduction case. Thank you for replying

[asturur]

yes you wrote it but anyone that wants to debug has to start a react app and copy paste it and make it work, possibly doing something different and creating a different use case that maybe work or does not work for another reason.
Who is going to invest time in doing it?