mobilenet to use video

src/components/Webcam.js

 import React, { useState, useRef, useEffect } from 'react';
-import * as mobilenet from '@tensorflow-models/mobilenet'
-import dog from './dog.jpg';
-import loadVideo from '../utilities/camera'
+import * as mobilenet from '@tensorflow-models/mobilenet';
+import loadVideo from '../utilities/camera';
 
 function WebcamImage()  {
 
   const [model, setModel] = useState(null);
-  //const [imageUrl, setImageUrl] = useState(null);
   const [results, setResult] = useState(null);
-  const imageRef = useRef();
-  const [userWebCam, setUserWebCam] = useState(null)
+  const [userWebCam, setUserWebCam] = useState(null);
+  const [predict, setPredict] = useState(null);
 
 
   const loadModel = async () => {
@@ -18,9 +16,19 @@ function WebcamImage()  {
     console.log("toimii");
   }
 
+  const predictVideo = async(image) =>{
+		if (model) {
+			const prediction = await model.predict(image, 4)
+			const predictType = prediction[0].className
+      setPredict(predictType)
+      console.log(predictType);
+			predictVideo(userWebCam)
+		}
+	}
+
   // load the model (only once as component is mounted)
   useEffect(() => {
-    loadModel();
+    loadModel()
   }, [])
 
   // load the video (only once as component is mounted)
@@ -35,20 +43,12 @@ function WebcamImage()  {
 		}
 	}, [])
 
-  const identify = async () => {
-    const result = await model.classify(imageRef.current)
-    setResult(result);
-    console.log(result);
-  }
-
   return (
     <div>
       <div >
 				<video id="userWebCam"></video>
 			</div>
-      <button onClick={loadModel}>Load</button>
-      <button onClick={identify}>Identify</button>
-      <img alt="dogi" src={dog} ref={imageRef}/>
+      <h3>{predict}</h3>
     </div>
   )
 }