RTSP stream with poor quality in my react app

Question

I'm trying to display a RTSP stream in my react app. I found a solution here in Stack how to accomplish this matter. The followig link is the one I used to make it possible How to display IP camera feed from an RTSP url onto reactjs app page?. So I basically have a nodejs server running the following code (for security reasons I don't show the IP and password)

function myStream() {
   var stream = new Stream({
        name: 'bomdia',
        streamUrl: 'rtsp://admin:*****@X.X.X.X:554',
        wsPort: 9000,
        ffmpegOptions: { // options ffmpeg flags
            '-stats': '', // an option with no neccessary value uses a blank string
            '-r': 30 // options with required values specify the value after the key
        }
    })
    
    
}



module.exports ={
    myStream
}

And in my front-end app I have the following code

function CameraStream (){
    var client
    var canvas
    var player
    useEffect(()=>{
         client = new WebSocket( 'ws://localhost:9000/' );
         canvas = document.getElementById('canvas');
         player = new jsmpeg(client, {canvas:canvas});
    },[])

    return (
        <div>
            <h5>Camera stream</h5>
            <canvas id="canvas"></canvas>
       </div>
        

    )
}

So far so good, my app displays the camera stream but I'm having trouble with the quality, it has a lot glitches. My question here guys is what can I do to make the stream have the same quality it has in VLC,for instance. Is the useEffect code? Do I need to change something in the ffmpegOptions? is a codec problem ? I assume the problem is mine because in vlc the quality of the stream is perfect. So I added the useEffect code but it did not work.

I provide a print of my poor quality below