You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hello community, @mozmorris ,
I got stuck and I really don't know how to solve it. Now I'm writing my question here because I am a little bit desperate. Sorry for that..
I am trying to use react-webcam as media input only and a separate canvas element as output. That's because I need to draw some things later on top.
But the only thing I see is a black screen.. although my console gives me some "positive" output, means that it logs readyState=4 and a video element).
I don't get it, it only renders a black screen.. Hope someone can give me a hint.
For anyone coming across this. You might be loading opencv differently, but it should be very similar no matter how you load it.
import{Button}from"~/components/Button";importWebcamfrom"react-webcam";import{cv,setupOpenCv}from"~/lib/opencv";import{useRef,useState,useCallback}from"react";letinterval: NodeJS.Timeout;exportdefaultfunctionWebcamPage(){constwebcamRef=useRef<Webcam>(null);const[capturing,setCapturing]=useState(false);const[cvready,setCvReady]=useState(false);consthandleCanvas=useCallback((canvas: HTMLElement)=>{// console.log(canvas);if(cvready){constsrc=cv.imread(canvas);constdst=newcv.Mat();// You can try more different parameterscv.threshold(src,dst,177,200,cv.THRESH_BINARY);cv.imshow("canvasOutput",dst);src.delete();dst.delete();}},[cvready],);constcapture=useCallback(()=>{interval=setInterval(()=>{constcanv=webcamRef?.current?.getCanvas();if(!canv)return;handleCanvas(canv);},50);setCapturing(true);},[webcamRef,setCapturing,handleCanvas]);conststop=useCallback(()=>{clearInterval(interval);setCapturing(false);},[setCapturing]);return(<><ButtononClick={async()=>{awaitsetupOpenCv();setCvReady(true);}}>
init
</Button>{cvready ? "cv ready" : "cv not ready"}<Webcamaudio={false}ref={webcamRef}/>{capturing ? (<buttononClick={stop}>Stop Capture</button>) : (<buttononClick={capture}>Start Capture</button>)}<canvasid="canvasOutput"/></>);}
Hello community, @mozmorris ,
I got stuck and I really don't know how to solve it. Now I'm writing my question here because I am a little bit desperate. Sorry for that..
I am trying to use react-webcam as media input only and a separate canvas element as output. That's because I need to draw some things later on top.
But the only thing I see is a black screen.. although my console gives me some "positive" output, means that it logs readyState=4 and a video element).
I don't get it, it only renders a black screen.. Hope someone can give me a hint.
My question is a bit like #167
The text was updated successfully, but these errors were encountered: