Pero el problema es que quiero deshacerme del video y mostrar solo los puntos de referencia por separado. Traté de crear un nuevo lienzo para hacer lo mismo, pero algo anda mal. Por favor, ayúdame.

El código:

 const detect = async (net) => { if ( typeof webcamRef.current !== "undefined" && webcamRef.current !== null && webcamRef.current.video.readyState === 4 ) { // Get Video Properties 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 // OLD MODEL // const face = await net.estimateFaces(video); // NEW MODEL const face = await net.estimateFaces({input:video}); console.log(face); // Get canvas context const ctx = canvasRef.current.getContext("2d"); const ctx1 = canvasRef1.current.getContext("2d"); requestAnimationFrame(()=>{drawMesh(face,ctx,ctx1)}); } }; useEffect(()=>{runFacemesh()}, []); return ( <div className="App"> <header className="App-header"> <Webcam ref={webcamRef} style={{ position: "absolute", marginLeft: "auto", marginRight: "auto", left: 0, right: 0, textAlign: "center", zindex: 9, width: 1000, height: 1000, display: "flex" }} /> <canvas ref={canvasRef} style={{ position: "absolute", marginLeft: "auto", marginRight: "auto", left: 0, right: 0, textAlign: "center", zindex: 9, width: 640, height: 480, flex: 1 }} /> <canvas ref={canvasRef1} style={{ position: "absolute", marginLeft: "auto", marginRight: "auto", left: 0, right: 0, textAlign: "center", zindex: 9, width: 640, height: 480, flex:1 }} /> </header> </div> ); }