WebSocket streaming relay & quality loose

[gregklka]

Hi guys, I've 3 IP cameras connected to my WebSocket server and I wanna display only 1 camera live preview at the time via WebSockets. To get a live camera preview I run the following command as a background thread: ffmpeg -rtsp_transport tcp -i rtsp://mylogin:mypassword@192.168.1.1:554/Streaming/Channels/102 -f mpegts -codec:v mpeg1video -s 640x480 -b:v 1000k -bf 0 http://localhost:4000/feed

front-end:

function renderLivePreview() {   
  canvasMain = document.getElementById('live-preview');        
  mainPlayer = new JSMpeg.Player(url, { 
    canvas: canvasMain, 
    preserveDrawingBuffer: true,
  });  
}

<canvas id="live-preview" className="LivePreview"></canvas>

Basically, live preview works fine until I start changing the source by terminating ffmpeg background process and running a new one. When I terminate and run these background threads a couple of times (it happens randomly) then some weird pixels are being displayed. Please see the two screens attached to the post.

Incorrect:

Correct: If I refresh HTML page (F5) everything gets back normal.

I suspect: a) memory is not properly cleaned b) jsmpeg lib can't recover from a state when is a gap with data when I turn off and on another thread. c) there is something wrong with my code.

Does anyone have an idea how to fix it?