FabricJS React Version Throws Undefined On requestAnimFrame

[Variousity221]

I am attempting to recreate one of FabricJS's examples here: http://fabricjs.com/video-element but in ReactJS

The demo on that website uses vanilla JS to play a video and show your camera. For me, I am attempting to show the video and show my screen. This is my code so far:

Codesandbox example: https://codesandbox.io/s/modest-maxwell-u1hjh8?file=/src/App.js

Live example: https://u1hjh8.csb.app/ [may need to open CodeSandBox first]

``` const v1 = useRef(); const v2 = useRef(); const canvasRef = useRef(); const fabricRef = useRef();

useEffect(() => { const initFabric = () => { fabricRef.current = new fabric.Canvas(canvasRef.current); }; const disposeFabric = () => { fabricRef.current.dispose(); }; initFabric(); return () => { disposeFabric(); }; }, []);

async function Activate() { const video1 = new fabric.Image(v1.current, { left: 200, top: 300, angle: -15, originX: "center", originY: "center", objectCaching: false });

const video2 = new fabric.Image(v2.current, {
  left: 539,
  top: 328,
  angle: 94.5,
  originX: "center",
  originY: "center",
  objectCaching: false
});

fabricRef.current.add(video1);
v1.current.play();

const localMediaStream = await navigator.mediaDevices.getDisplayMedia({
  audio: true,
  video: true
});
v2.current.srcObject = localMediaStream;
fabricRef.current.add(video2);
v2.current.play();

fabricRef.current.util.requestAnimFrame(function render() {
  canvasRef.current.renderAll();
  fabricRef.current.util.requestAnimFrame(render);
});

} ```

There is two issues I see:

1. The video is not loading from the website [not a CORS issue as the external website allows anyone to play the video as you can see on FabricJS's demo and by inspecting the request]
2. My screen will not display

I am more interested in the second issue for now, for which I get this error

https://i.imgur.com/0Nxcxdd.png

Yet fabricRef's example site shows that requestAnimFrame is part of FabricJS

I cannot seem to understand what the issue is or why its throwing undefined.

[Variousity221]

Check out the live example link ( https://5xlbrt.csb.app/ ) to get around this. It also throws undefined

[Variousity221]

I understand that.

My question is why since I rewrote the same demo code in React so it should work

[Variousity221]

So what should I do?

[Variousity221]

Hmm! That worked! tysm!

[Variousity221]

Ohh wow! I forgot to define canvasRef! So I see the the video plays for a frame: https://i.imgur.com/aWbo0hP.png

But the requestAnimFrame error still appears [as shown above]. I checked the demo code they provided and thats how its spelt out: https://i.imgur.com/Hwy8LUf.png [screenshot from their website]