k-yle / rtsp-relay

📽 View an RTSP stream in your web browser using an express.js server
https://npm.im/rtsp-relay
MIT License
325 stars 59 forks source link

Possible EventEmitter memory leak detected #151

Open Nafidinara opened 2 years ago

Nafidinara commented 2 years ago

Hello, I got this following error, when try to stream many cam. (node:18488) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 data listeners added to [Socket]. Use emitter.setMaxListeners() to increase limit how can I turn off unused cam or like when click close button in canvas. maybe like this : $('.btn-close-stream').on('click', () => { //code here }); Any solution to do that?

k-yle commented 2 years ago

Please see this section of the README.

Also ensure that you're destroying the stream on the client-side:

const player = await loadPlayer({
    url: "https://example.com/abc"
    canvas: document.getElementById('my-canvas'),
});

// when you've finished with the stream
player.destroy();
Zw1d commented 2 years ago

@k-yle I have a similar issue. I'm using react and I'm trying to properly disconnect from stream but I get: player.destroy is not a function Would you be so kind to present an example how to "cleanup" the right way in react?

Update: I have managed to do it this way (react, functional component):

export const CameraTile = (props) => {
const canvas = useRef(null);
const [player, setPlayer] = useState(null);
useEffect(()=>{
  loadPlayer({
    url: `wss://${process.env.NEXT_PUBLIC_NAC_HOST}/stream/${cameraId}/${token}`,
    canvas: canvas.current,
  })
    .then(player => {
      console.log("Got player", player);
      setPlayer(player);
    })
  }, []);
  useEffect(()=>{
    return function cleanup() {
      if(player) {
        player.destroy();
      }
    }
  }, [player]);
}
return (
<canvas ref={canvas} />
)
}
k-yle commented 2 years ago

@Zw1d, sorry I forgot to include an await in the example in this comment. If you add the await it should work fine