Uncaught TypeError: Cannot read properties of undefined (reading 'limit') at RecognitionService.recognize (recognition_service.js:47:1) at App.js:54:1

[jrhim12]

import './App.css';

import {usestate} from 'react';

import UploadAndDisplayImage from './app1' import {useRef} from 'react';

import {CompreFace} from '@exadel/compreface-js-sdk';

function App() { const videoTag = useRef('null'); const canvasElement1 = useRef('null'); const canvasElement2 = useRef('null');

const drawFace = (canvasE1,faceData) =>{ const customEvent= new Event('next_frame', {'bubbles':true , "cancelable":false}); document.dispatchEvent(customEvent) let box=faceData.result[0].box; canvasE1.clearRect(0, 0, 640, 480) canvasE1.strokeStyle = "green"; canvasE1.linewidth = 10; canvasE1.strokeRect( box.x_min, box.y_min, box.x_max = box.x_min, box.y_max = box.y_min);

    // console.log(faceData)

}

const handleVideoStart= () =>{ navigator.mediaDevices.getUserMedia({video:true}) .then(res => videoTag.current.srcObject = res) .catch(error =>console.error(error))

videoTag.current.addEventListener('play', ()=>{

let server='http://localhost';
let port='8000';
let key='0c2f2d4c-ffd5-4ee4-96e0-f79021fff89f';

let core = new CompreFace(server, port);
let recognitionService = core.initFaceRecognitionService(key)

; let ctx1=canvasElement1.current.getContext('2d'); let ctx2=canvasElement2.current.getContext('2d');

document.addEventListener('next_frame', ()=>{

  ctx1.drawImage(videoTag.current,0,0,640,480);
  canvasElement1.current.toBlob( blob =>{
         console.log(blob);
         recognitionService.recognize(blob).then(res=>{
     drawFace(ctx2,res);
      console.log(res);
    }).catch(error =>{
      console.error(error)})
  },'image/png',0.95);

})

const customEvent= new Event('next_frame', {'bubbles':true , "cancelable":false});
document.dispatchEvent(customEvent);

})

}

return ( <div className="App"> <header className="App-header"> <video ref={videoTag} width="640" height="480" autoPlay muted> <canvas ref={canvasElement1} width="640" height="480" style={{display:'none'}}> <canvas ref={canvasElement2} width="640" height="480" style={{position:'absolute'}}> <button onClick={handleVideoStart}>start button

  <UploadAndDisplayImage/>
</div>

); }

export default App;

[smchedlidze826]

Looks like you have an older version of sdk installed

You will need to update compreface javascript sdk version to the latest(at this moment it is 1.0.0) or you can add {limit:10} as a second parameter in recognize function

recognitionService.recognize(blob,{limit:10})