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:[email protected]: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?

[zhang22113]

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:[email protected]: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?

How is your WebSocket connection switched? How was the last websocket closed?

[phoboslab]

How is your WebSocket connection switched? How was the last websocket closed?

See here for an example on how to switch between streams: https://github.com/phoboslab/jsmpeg/issues/424#issuecomment-1962730059