How to use react-video-recorder with tensorflow plugin? Using react-webcam doesn`t problem but couldn't use together react-video-recorder and tensorflow.
function VideoRecord() {
const webcamRef = useRef(null);
const canvasRef = useRef(null);
const runCoco = async () => {
const net = await cocossd.load();
console.log("Handpose model loaded.");
setInterval(() => {
detect(net);
}, 10);
};
const detect = async (net) => {
if (
typeof webcamRef?.current !== "undefined" &&
webcamRef?.current !== null &&
webcamRef?.current.video.readyState === 4
) {
const video = webcamRef?.current.video;
const videoWidth = webcamRef?.current.video.videoWidth;
const videoHeight = webcamRef?.current.video.videoHeight;
webcamRef.current.video.width = videoWidth;
webcamRef.current.video.height = videoHeight;
canvasRef.current.width = videoWidth;
canvasRef.current.height = videoHeight;
const obj = await net.detect(video);
const ctx = canvasRef?.current.getContext("2d");
drawRect(obj, ctx);
}
};
useEffect(() => { runCoco() }, []);
return (
<div className="App">
<header className="App-header">
<VideoRecorder
ref={webcamRef}
className="videoRecord"
timeLimit={20000}
onRecordingComplete={videoBlob => {
// Do something with the video...
console.log('videoBlob', videoBlob);
}}
// timeLimit="15"
/>
<canvas
ref={canvasRef}
style={{
position: "absolute",
marginLeft: "auto",
marginRight: "auto",
left: 0,
right: 0,
textAlign: "center",
zindex: 8,
width: 640,
height: 480,
}}
/>
</header>
</div>
);
}
How to use react-video-recorder with tensorflow plugin? Using react-webcam doesn`t problem but couldn't use together react-video-recorder and tensorflow.